Skip to content

Implement wireframe with semantic HTML and CSS for 100 accessibility … #468

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Implement wireframe with semantic HTML and CSS for 100 accessibility … #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
61 changes: 36 additions & 25 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development Concepts</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Web Development Fundamentals</h1>
<p>Essential concepts for beginner developers</p>
</header>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
<section class="articles">
<article>
<div class="article-image"></div>
<h2>What is the purpose of a README file?</h2>
<p>A README file is a crucial document that provides information about a project. It helps users understand what the project does, how to install it, how to use it, and other important details that make the project accessible to others.</p>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" class="read-more">Read More</a>
</article>

<article>
<div class="article-image"></div>
<h2>What is the purpose of a wireframe?</h2>
<p>A wireframe is a visual representation of a website's skeletal framework. It helps designers and developers plan the layout and functionality of a website before coding begins, ensuring all stakeholders have a clear understanding of the project.</p>
<a href="https://www.usability.gov/how-to-and-tools/methods/wireframing.html" class="read-more">Read More</a>
</article>

<article>
<div class="article-image"></div>
<h2>What is a branch in Git?</h2>
<p>A branch in Git is a parallel version of a repository. It allows you to work on different features or fixes simultaneously without affecting the main codebase. Branches make it possible to develop and test changes in isolation before merging them back.</p>
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" class="read-more">Read More</a>
</article>
</section>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>© 2025 Web Development Fundamentals | <a href="#">Contact Us</a> | <a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a></p>
</footer>
</body>
</html>
</body>
</html>
130 changes: 130 additions & 0 deletions Wireframe/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
/* General styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
padding-bottom: 60px; /* Space for the footer */
}

/* Header styles */
header {
text-align: center;
padding: 2rem 1rem;
background-color: #f8f8f8;
margin-bottom: 2rem;
}

header h1 {
margin-bottom: 0.5rem;
}

/* Main content styles */
main {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

.articles {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

/* For medium screens and larger */
@media (min-width: 768px) {
.articles {
grid-template-columns: repeat(2, 1fr);
}

.articles article:first-child {
grid-column: 1 / -1;
}
}

article {
border: 1px solid #ddd;
padding: 1.5rem;
border-radius: 5px;
}

.article-image {
height: 200px;
background-color: #eee;
margin-bottom: 1rem;
border: 1px solid #ddd;
}

article h2 {
margin-bottom: 1rem;
}

article p {
margin-bottom: 1.5rem;
}

.read-more {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #333;
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
/* Add underline to make links distinguishable without relying on color */
text-decoration: underline;
/* Add a border to make even more distinguishable */
border: 2px solid #111;
}

.read-more:hover, .read-more:focus {
background-color: #555;
outline: 2px solid #777;
text-decoration: underline;
}

/* Hide text visually but keep for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

/* Footer styles */
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}

footer a {
color: #fff; /* Brighter color for better contrast */
text-decoration: underline; /* Always show underline for footer links */
font-weight: bold; /* Make text bold for better visibility */
padding: 2px 4px; /* Add some padding around links */
border-radius: 3px;
}

footer a:hover, footer a:focus {
color: white;
background-color: #555; /* Background change on hover/focus */
outline: 2px solid #ddd;
text-decoration: underline;
}