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/Readme.png b/Wireframe/Readme.png new file mode 100644 index 000000000..16aeb1a7a Binary files /dev/null and b/Wireframe/Readme.png differ diff --git a/Wireframe/Wireframe1.png b/Wireframe/Wireframe1.png new file mode 100644 index 000000000..d7fe9e6f6 Binary files /dev/null and b/Wireframe/Wireframe1.png differ diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png new file mode 100644 index 000000000..e536ff1bc Binary files /dev/null and b/Wireframe/git-branch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..b8cb1aa32 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,30 +3,54 @@ - Wireframe + Software development UNI
-

Wireframe

+

Code Hub

- This is the default, provided code and no changes have been made yet. + Learn to code with hands-on projects and expert guidance. Join our community of developers

- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + README file illustration +

What is a README file?

+

+ A README is the front door of any software project — the first document a visitor reads when they encounter your code.

- Read more +

+ Typically named README.md and written in Markdown, it lives at the root of a repository and renders automatically on platforms like GitHub. Its core purpose is to answer three questions immediately: what does this project do, how do I get it running, and how do I use it?
A well-crafted README... +

+ Read more +
+
+ Wireframe illustration +

What is a WIREFRAME?

+

+ A wireframe is a skeletal blueprint of a digital interface — a low-fidelity sketch that maps out layout and structure before any visual design begins. +

+

+ Think of it as the floor plan of a building: it shows where the rooms are, how they connect, and how large each space is — but says nothing about paint colours or furniture. In UI/UX design, wireframes... +

+ Read more +
+
+ Git branch illustration +

What is a BRANCH in Git?

+

+ A branch in Git is an independent line of development — a lightweight pointer that lets you work on changes in isolation without affecting the main codebase. +

+

+ Imagine a river that splits into a side channel. Work can proceed along the side channel independently; later, the two streams can be merged back together. In Git, this is exactly what a branch does: it diverges from a point in the commit history so +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bbaf7fa5b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,8 +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". @@ -31,6 +26,10 @@ body { color: var(--ink); font: var(--font); } +header { + text-align: center; + padding: var(--space); +} a { padding: var(--space); border: var(--line); @@ -86,4 +85,20 @@ article { > img { grid-column: span 3; } + + .intro { + font-size: 1em; + font-weight: bold; + } + + .content { + font-size: 0.9em; + opacity: 0.8; + } } +footer { + padding-bottom: var(--space); + position: relative; + bottom: 0; + width: 100%; +} \ No newline at end of file