diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..09f1f150d 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 +- [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 - [ ] 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 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 0e014e535..08c2a1029 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,26 +8,43 @@
-

Wireframe

-

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

Wireframe to Web Code

+

The beginning of the onboarding process, where you will learn how to convert a wireframe design into functional web code. +

+
-

Title

+

What is a Wireframe

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A wireframe is the skeleton of your digital project. Think of it as the foundation for your website, app, or dashboard. It focuses on layout, and content placement—not on colors, fonts, or any visual polish.

By Peldi Guilizzoni "What is a Wireframe?" The Balsamiq Blog May 08, 2025

- Read more + Continue Reading
+ +
+ +

What is the Purpose of a README file?

+

"A README.md is a key document in repositories, especially on GitHub. It introduces the project, explains its purpose, setup, and usage, and helps users and developers contribute effectively." + +

+ Continue via GeeksforGeeks +
+
+

What is a Branch in Git?

+

"Use a branch to isolate development work without affecting other branches in the repository. Each repository has one default branch, and can have multiple other branches. You can merge a branch into another branch using a pull request."

+ Continue via GitHub Docs + +
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..94ec29f45 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -68,7 +68,11 @@ main { > *:first-child { grid-column: span 2; } -} + } + h2 { + color: #e40606; + } + /* ====== 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.