Skip to content

Commit d5910d9

Browse files
author
danisoloo
committed
modified wireframe index.html
 modified: Wireframe/index.html
1 parent 9b4d4ce commit d5910d9

File tree

1 file changed

+69
-30
lines changed

1 file changed

+69
-30
lines changed

‎Wireframe/index.html‎

Lines changed: 69 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,72 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Learning Git and Development Tools</title>
7+
<meta name="description" content="Learn about README files, wireframes, Git branches, and practice with an accessible HTML form." />
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Learning Git and Development Tools</h1>
13+
<p>Understanding README files, wireframes, and Git branches</p>
14+
</header>
15+
16+
<main>
17+
<section class="articles">
18+
<article class="feature">
19+
<img src="https://docs.github.com/assets/cb-55933/mw-1440/images/help/repository/readme-links.webp"
20+
alt="Scrabble tiles spelling out README on top of papers">
21+
<h2>What is the purpose of a README file?</h2>
22+
<p>A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.</p>
23+
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Read More</a>
2524
</article>
26-
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
33-
</html>
25+
26+
<div class="row">
27+
<article>
28+
<img src="https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg"
29+
alt="Notebook sketch showing a website wireframe layout">
30+
<h2>What is the purpose of a wireframe?</h2>
31+
<p>A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.</p>
32+
<a href="https://www.productplan.com/glossary/wireframe/" target="_blank" rel="noopener noreferrer">Read More</a>
33+
</article>
34+
35+
<article>
36+
<img src="https://media.istockphoto.com/id/876487150/photo/abstract-background-of-source-code-branch-3d-rendering.jpg?b=1&s=612x612&w=0&k=20&c=P5xSmni20OHy5EqfydTFwiCCN_xRzAOGToUKXAPqZ_o="
37+
alt="3D abstract image representing Git branching">
38+
<h2>What is a branch in Git?</h2>
39+
<p>A branch in Git is a separate line of development that allows you
40+
to work on new features or bug fixes without affecting the main
41+
codebase. Once changes are ready, branches can be merged back into
42+
the main branch.</p>
43+
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener noreferrer">Read More</a>
44+
</article>
45+
</div>
46+
</section>
47+
48+
<!-- Example form with stricter name validation -->
49+
<section>
50+
<h2>Order a T-shirt</h2>
51+
<form>
52+
<label for="name">Full Name:</label>
53+
<input
54+
type="text"
55+
id="name"
56+
name="name"
57+
minlength="2"
58+
pattern="^(?!\s*$).+"
59+
autocomplete="name"
60+
required
61+
title="Name must be at least 2 characters and not just spaces."
62+
/>
63+
<button type="submit" aria-label="Submit T-shirt order">Submit</button>
64+
</form>
65+
</section>
66+
</main>
67+
68+
<footer>
69+
<p>© 2025 Learning Git and Development Tools | Contact: info@example.com</p>
70+
</footer>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)