diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d..8243b710 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a 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 +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including a 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 ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including a title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The page header includes a title and description. +- [x] The articles section has three unique articles, each including a title, summary, and a link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. ## Resources diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e53..f240597e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,71 @@ - - - - Wireframe - - - + + + + + Wireframe + + + + +
-

Wireframe

+

Module-Onboarding Project

- This is the default, provided code and no changes have been made yet. + This webpage summarises the purpose of a README file and Wireframe. It also explores what a branch in Git is.

- -

Title

+ image example of a README file +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file serves as a crucial piece of documentation for any + software project, providing essential information to users, + developers, and contributors. It typically outlines what the project + does, why it's useful, how to get started, and where to seek help. + Essentially, it acts as a welcome guide, making it easier for anyone + to understand and interact with the project.

- Read more + Read + more +
+ +
+ image example of a wireframe +

What is the purpose of a wireframe?

+

+ The primary purpose of a wireframe is to outline the basic structural design and user experience of a website + or application before any detailed design work is done. It's a visual representation of the layout, content, + and functionality, helping designers, developers, and stakeholders understand the overall structure and flow. +

+ Read more +
+ +
+ image example of a branch in Git +

What is a branch in Git?

+

+ A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in + Git is master. As you start making commits, you're given a master branch that points to the last commit you + made. Every time you commit, the master branch pointer moves forward automatically. +

+ Read + more
-
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c..7458296b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,21 +1,3 @@ -/* 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 ====== */ :root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); @@ -26,7 +8,12 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ -body { +header {text-align:center;} + +h1 {color: blue;} + + body { + margin: 40px; background: var(--paper); color: var(--ink); font: var(--font); @@ -36,10 +23,38 @@ a { border: var(--line); max-width: fit-content; } -img, +img, src svg { width: 100%; + height: 100%; + object-fit: cover; +} + +.fixed-height { + height: 250px; + width: 100%; + object-fit: cover; +} + +.side-by-side { + display: flex; + gap: 20px; + justify-content: center; + flex-wrap: wrap; + margin-top: 20px; +} + +.side-by-side article { + flex: 1 1 400px; + max-width: 450px; +} + +.article-img { + width: 100%; + height: 250px; object-fit: cover; + display: block; + margin-bottom: 1rem; } /* ====== Site Layout ====== Setting the overall rules for page regions