diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..8243b7101 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 0e014e535..fa2fb5563 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -2,32 +2,131 @@ - - Wireframe - + + + + Development Essentials: README, Wireframes & Git Branches
-

Wireframe

-

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

Development Essentials

+

+ Understanding README files, wireframes, and Git branches.

+
- -

Title

+ random image +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file is basically a quick guide to your project. It's + usually the first thing people see when they visit your repository or + open your folder. The main point of it is to explain what your project + is about, how to use it, and anything important someone should know if + they want to try it or help work on it. +

+

It might include things like:

+ +

+ So in short, a README is there to make your project easy to understand + and use—for both users and developers. +

+

+ Read more about README +

+
+
+ random image +

What is the purpose of a wireframe?

+

+ A wireframe is basically a simple visual plan of a website or app. It + shows where things like buttons, text, images, and menus will go—kind + of like a rough draft before you start designing or building + anything.
+ The main point of a wireframe is to figure out the layout and how + users will move through the site. It helps everyone involved + (designers, developers, clients) get on the same page about the + structure and flow before putting in a lot of time and effort.
+ Think of it like sketching a floor plan before building a house—it's + not about the colors or decoration yet, just where everything should + be. +

+

+ Discover wireframing basics +

+
+ +
+ random image +

What is a branch in Git?

+

+ A branch in Git is like a separate copy of your project where you can + safely make changes without messing up the main version.
+ Let's say you're adding a new feature or fixing something—rather + than changing the main code right away, you create a branch, do your + work there, and once you're happy with it, you can merge it back into + the main project.
+ It helps keep things clear and makes it easier for teams to work on + different things at the same time without getting in each other's + way.
+ There are some provided HTML and CSS files you can use to get started. + You can use these files as a starting point or create your own files + from scratch. +

+

+ Read more about Git branches

- Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..a042ffdd3 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -87,3 +87,25 @@ article { grid-column: span 3; } } +/* My own changes */ +footer { + position: fixed; /* Fixes the footer relative to the viewport */ + bottom: 0; /* Positions it at the very bottom */ + left: 0; /* Stretch from left */ + width: 100%; /* Full width */ + background-color: #eee; /* Background color for visibility */ + text-align: center; + padding: 1rem 0; + box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */ + z-index: 1000; /* Make sure it stays on top */ +} +.desaturated-image { + display: block; /* Makes sure image starts on a new line */ + margin-top: 0.5rem; /* Small gap between text and image */ + + /* Reduce saturation to 50% to make it less colorful */ + filter: saturate(0.5); + + max-width: 100%; /* Responsive image width */ + height: auto; +}