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..e636a20bd 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,54 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe + + + + +
+

Developer essentials

+

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

+
+
+
+ readme file +

What is a README file?

- This is the default, provided code and no changes have been made yet. + 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.

-
-
-
- -

Title

-

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

- Read more -
-
- - - + Read more + + +
+ git branching diagram +

What is a branch in Git?

+

+ 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 +
+ + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..55b9253d5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,8 +18,10 @@ 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; @@ -32,28 +34,40 @@ body { font: var(--font); } a { - padding: var(--space); + padding: 4px 20px; border: var(--line); - max-width: fit-content; + 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; } footer { position: fixed; bottom: 0; + width: 100%; text-align: center; } +footer a { + padding: 2px; + border: none +} /* ====== 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