diff --git a/Wireframe/README.html b/Wireframe/README.html new file mode 100644 index 000000000..fbad327ad --- /dev/null +++ b/Wireframe/README.html @@ -0,0 +1,35 @@ + + + + + + README File + + + +
+

README File

+
+ +
+
+

+ A README file is a text file that explains what a project is about. It + usually includes information such as the purpose of the project, how + to install it, how to use it, and any important notes for users or + developers. +

+ +

+ README files are commonly written in Markdown and are displayed + automatically on platforms like GitHub. They help users understand a + project quickly without needing to read the source code. +

+
+ ← Back to homepage +
+ + + diff --git a/Wireframe/formcontrol.png b/Wireframe/formcontrol.png new file mode 100644 index 000000000..31f695e46 Binary files /dev/null and b/Wireframe/formcontrol.png differ diff --git a/Wireframe/gitbranch.html b/Wireframe/gitbranch.html new file mode 100644 index 000000000..2d15c4dc2 --- /dev/null +++ b/Wireframe/gitbranch.html @@ -0,0 +1,36 @@ + + + + + + Git Branch + + + +
+

Git Branch

+
+ +
+
+

+ A Git branch is a separate line of development within a Git + repository. It allows developers to work on new features, bug fixes, + or experiments without affecting the main codebase. +

+ +

+ Branches make collaboration easier by allowing multiple people to + work on the same project at the same time. Once the work is complete, + a branch can be merged back into the main branch. +

+
+ ← Back to homepage +
+ + + + + diff --git a/Wireframe/gitbranch.png b/Wireframe/gitbranch.png new file mode 100644 index 000000000..5594e1882 Binary files /dev/null and b/Wireframe/gitbranch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..da88b611f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -8,26 +8,47 @@
-

Wireframe

+

Wireframe Coursework

- This is the default, provided code and no changes have been made yet. + Explaining README files, wireframes, and Git branches using a simple + webpage layout.

+
- -

Title

+ README file illustration +

README File

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains what a project is about, how to install it, and + how to use it. It is usually the first file users read.

- Read more + Read more +
+ +
+ Wireframe layout example +

Wireframe

+

+ A wireframe shows the basic structure of a webpage before design and + development begin. It focuses on layout and content placement. +

+ Read more +
+ +
+ Git branch diagram +

Git Branch

+

+ A Git branch allows developers to work on new features separately + without affecting the main project code. +

+ Read more
+ diff --git a/Wireframe/readme.png b/Wireframe/readme.png new file mode 100644 index 000000000..3973b0913 Binary files /dev/null and b/Wireframe/readme.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..21928c0ee 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,104 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ +/* ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: color-mix(in oklab, black 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + +/* ====== Base Elements ====== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { + width: 90%; + margin: 10px auto; background: var(--paper); color: var(--ink); font: var(--font); + padding-bottom: 40px; } + a { + display: inline-block; padding: var(--space); border: var(--line); max-width: fit-content; + text-decoration: none; } + img, svg { width: 100%; object-fit: cover; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} -footer { - position: fixed; - bottom: 0; + +header { text-align: center; + margin-top: 20px; +} + +header h1 { + margin-bottom: var(--space); } -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ + +header p { + margin-bottom: calc(var(--space) * 2); +} + main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { - grid-column: span 2; - } -} -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ +} + +main > *:first-child { + grid-column: span 2; +} + article { border: var(--line); padding-bottom: var(--space); text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } +} + +article > * { + grid-column: 2 / 3; +} + +article > img { + grid-column: span 3; + margin-bottom: var(--space); +} + +article a { + margin-top: var(--space); +} + +footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 30px; + border-top: var(--line); + display: flex; + justify-content: center; + align-items: center; + background: var(--paper); +} + +footer p { + margin: 0; + text-align: center; } diff --git a/Wireframe/wireframe.html b/Wireframe/wireframe.html new file mode 100644 index 000000000..e4a965759 --- /dev/null +++ b/Wireframe/wireframe.html @@ -0,0 +1,35 @@ + + + + + + Wireframe + + + +
+

Wireframe

+
+ +
+
+

+ A wireframe is a simple visual guide that represents the basic + structure and layout of a webpage. It shows where content such as + headings, text, images, and buttons will be placed. +

+ +

+ Wireframes are created before design and development begin. They help + developers and designers focus on structure and user experience + without being distracted by colors, fonts, or detailed styling. +

+
+ ← Back to homepage +
+ + + + diff --git a/Wireframe/wireframe2.png b/Wireframe/wireframe2.png new file mode 100644 index 000000000..858683028 Binary files /dev/null and b/Wireframe/wireframe2.png differ