diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..75a6fb565 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,70 @@ - + - - - - Wireframe - - - -
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

-
-
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
-
- - + + + + README, Wireframes and Git Branches + + + +
+

README, Wireframes and Git Branches

+

A simple guide to three important web development concepts.

+
+
+
+ README file illustration +

What is the purpose of a README file?

+

+ A README file explains what a project is, how it works, and how + someone can use it. It often includes setup instructions, features, + and important notes for developers. +

+ Read more +
+ + +
+ Wireframe file illustration +

What is the purpose of a wireframe?

+

+ A wireframe is a simple plan for a webpage or app. It shows where + content, images, buttons, and sections will go before the final design + is created. +

+ Read more +
+ + +
+ Git branch file illustration +

What is a branch in Git?

+

+ A branch in Git is a separate version of a project. It lets developers + work on new features or fixes without changing the main version of the + code. +

+ Read more +
+
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d7e2ac0db 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,58 +1,73 @@ /* 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 +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 +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 ====== */ :root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; + --paper: oklch(7 0 0); + --ink: blue; + --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 */ +General rules for basic HTML elements in any context */ +header { + text-align: center; +} +/* Futuristic font */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background: var(--paper); + color: var(--ink); + font: var(--font); + font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif; } a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + padding: var(--space); + border: var(--line); + max-width: fit-content; } img, svg { - width: 100%; - object-fit: cover; + width: 100%; + height: 250px; + object-fit: cover; + border: 3px solid blue; + border-radius: 20px; } -/* ====== Site Layout ====== +/* ====== 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; + margin: 0 auto 80px auto; } footer { position: fixed; bottom: 0; + left: 0; + width: 100%; text-align: center; + font-size: 0.8rem; + padding: 10px; + background: var(--paper); + z-index: 10; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -62,28 +77,41 @@ https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + 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. +/* ====== 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. */ 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; - } + border: var(--line); + border-radius: 20px; + box-shadow: 0 0 15px blue; + padding-bottom: var(--space); + text-align: left; + display: grid; + grid-template-columns: var(--space) 1fr var(--space); +} +article > * { + grid-column: 2 / 3; +} +article > img { + grid-column: 2 / 3; + margin-top: var(--space); +} +> img { + grid-column: 2 / 3; + margin-top: var(--space); +} +h1, +h2, +a { + text-transform: uppercase; + letter-spacing: 1px; }