Skip to content

ITP-2026-1 | Michael English | Week 1 | Wireframe to Web Code #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Eigo-G wants to merge 5 commits into from
Closed

ITP-2026-1 | Michael English | Week 1 | Wireframe to Web Code #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
98f283e
my changes for the website
Feb 20, 2026
1cd237b
Fixed a comment error and Style error
Feb 20, 2026
e11ed4d
changed <h3> & <h4> to <h2> as they are equal. Changed <br> to new <p>
Mar 6, 2026
d1bc879
checked off README objectives
Mar 6, 2026
83bf653
Added color to h2 in style.css
Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions Wireframe/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u

<!--{{<objectives>}}>-->

- [ ] 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
<!--{{</objectives>}}>-->

## 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

Expand Down
35 changes: 26 additions & 9 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,43 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
<h1>Wireframe to Web Code</h1>
<p> The beginning of the onboarding process, where you will learn how to convert a wireframe design into functional web code.

</p>
</header>
<!-- The main content of the page, where articles about wireframes, README files, and Git branches are presented. -->
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<h2>What is a Wireframe</h2>
<p>
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.</p><p>By Peldi Guilizzoni "What is a Wireframe?" <i>The Balsamiq Blog</i> May 08, 2025</p>
</p>
<a href="">Read more</a>
<a href="https://balsamiq.com/blog/what-are-wireframes/">Continue Reading</a>
</article>

<article>
<!-- Added two (2) additional article within the main to properly fit grid format -->
<h2>What is the Purpose of a README file?</h2>
<p>"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."

</p>
<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Continue via GeeksforGeeks</a>
</article>
<article>
<h2>What is a Branch in Git?</h2>
<p>"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."</p>
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Continue via GitHub Docs</a>

</article>
</main>
<!-- The footer of the page, where credits for changes made to the content are given. -->
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Changes made by Michael English "Eigo-G" on GitHub.
</p>
</footer>
</footer>

</body>
</html>
6 changes: 5 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading