diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..fbccb4936 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -4,12 +4,12 @@ -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including an image, title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including an image, title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. -- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The page layout closely match the wireframe. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. +- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The page layout closely match the wireframe. ### Developers must adhere to professional standards. @@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..c6aa319cf 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -6,27 +6,71 @@ Wireframe +
-

Wireframe

-

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

+

Developer essentials

+

A quick introduction to READMEs, wireframes, and Git branches.

- -

Title

+ readme file +

What is a README file?

+

+ A README is often what people look at in a project to understand what + it is about. It should include a description of the project, + instructions on how to use it, and any additional information that may + be useful. +

+ Read more +
+ +
+ wireframe sketch of website layout +

What is the purpose of a wireframe?

+

+ A wireframe for a website is like a blueprint for a house. It is a + visual representation of the layout of the website. It is useful for + planning purposes and can save time before building, by helping us + spot potential issues early. +

+ Read more +
+ +
+ git branching diagram +

What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch in Git is like an alternative version of a project. When + several developers work on the same project, separate branches help + them avoid overriding each other's work. These branches then can be + merged into the main branch through a pull request.

- Read more + Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..f2c0233a7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,57 +18,78 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); + --color: white; --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; + /* increased font size, since it felt tiny */ + --font: 1.15rem/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 */ body { background: var(--paper); color: var(--ink); font: var(--font); + min-height: 400px; + margin-bottom: 100px; } + a { - padding: var(--space); + padding: 4px 20px; border: var(--line); max-width: fit-content; + text-decoration: none; + font-weight: bold; } -img, -svg { + +img { width: 100%; object-fit: cover; + height: 350px; + filter: grayscale(70%); } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header { + text-align: center; +} + main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding: 0 8rem; + + /* ====== Articles Grid Layout ==== + Setting the rules for how articles are placed in the main element.*/ + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); + + >*:first-child { + grid-column: span 2; + } } + footer { position: fixed; bottom: 0; + width: 100%; text-align: center; + background-color: var(--color); + border-top: solid 2px; } -/* ====== 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/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + +footer a { + padding: 2px; + border: none } + /* ====== 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. @@ -80,10 +101,12 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } -} +} \ No newline at end of file