Skip to content

Commit 73b1697

Browse files
DamianDLDamianDL
committed
Update to Forms for Sprint 2 exercise
1 parent 3e10354 commit 73b1697

4 files changed

Lines changed: 113 additions & 72 deletions

File tree

‎Form-Controls/Draft‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!

‎Form-Controls/index.html‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,31 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
9+
<title>Form</title>
910
</head>
1011
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
</header>
14-
<main>
15-
<form>
12+
13+
<form action="results.html" method="get">
1614
<!-- write your html here-->
1715
<!--
1816
try writing out the requirements first as comments
1917
this will also help you fill in your PR message later-->
18+
<div>
19+
<label for="first-name">First Name:</label>
20+
<input type="text" id="first-name" name="first-name" /><br />
21+
</div>
22+
<div>
23+
<label for="password">Password:</label>
24+
<input type="password" id="password" name="password" /><br />
25+
</div>
26+
<div>
27+
<button type="submit">Submit</button>
28+
</div>
29+
2030
</form>
2131
</main>
2232
<footer>

‎Wireframe/index.html‎

Lines changed: 21 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,79 +3,31 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe Webcode Assignment</title>
6+
<title>Wireframe to Webcode Assignment-Sprint 1</title>
77
<link rel="stylesheet" href="style.css" />
8-
9-
<style>
10-
.container {
11-
display: grid;
12-
grid-template-rows: auto auto; /* Two rows */
13-
grid-template-columns: 1fr 1fr; /* Two columns for second row */
14-
gap: 20px;
15-
max-width: 800px;
16-
margin: 0 auto;
17-
}
18-
19-
.article {
20-
padding: 20px;
21-
background-color: #f4f4f4;
22-
border: 1px solid #ccc;
23-
text-align: center;
24-
}
25-
26-
/* First article spans both columns */
27-
.article-top {
28-
grid-column: span 2;
29-
}
30-
31-
@media (max-width: 768px) {
32-
.container {
33-
grid-template-columns: 1fr; /* Stack on small screens */
34-
}
35-
.article-top {
36-
grid-column: span 1;
37-
}
38-
}
39-
</style>
40-
</head>
41-
<body>
42-
<div class="container">
43-
<article class="article article-top">Top Article (Centered)</article>
44-
<article class="article">Bottom Left Article</article>
45-
<article class="article">Bottom Right Article</article>
46-
</div>
47-
</body>
48-
</head>
8+
</head>
499
<body>
5010
<header>
51-
<h1>Wireframe to Webcode Assignment</h1>
11+
<h1>Wireframe Webcode Assignment</h1>
5212
<p>
53-
This is the initial DRAFT version of this page. <!--First line updated to reflect draft status-->
13+
This is the initial DRAFT version of this page. <!--First line updated to reflect draft status-->
5414
</p>
5515
</header>
5616
<main>
5717
<article>
58-
<img src="placeholder.svg" alt="" />
59-
<h2>Wireframe schematic</h2>
18+
19+
<h2>What is the Purpose of a Readme File</h2>
6020
<p>
61-
Wireframe is a visual guide that represents the skeletal framework
62-
of a website or application. Its purpose is to outline the layout.
63-
</p>
64-
<a href="">Read more</a>
65-
</article> <<!--What is the purpose of a Wireframe-->
66-
<h3>What is the Purpose of a Readme File</h3>
67-
</main>
68-
<p>
69-
A readme file serves as a guide for users and developers, providing
21+
>A readme file serves as a guide for users and developers, providing
7022
essential information about a project, including its purpose,
7123
installation instructions, usage guidelines, and contribution
7224
protocols. It helps ensure that everyone involved understands how to
7325
effectively use and contribute to the project.
7426
</p>
75-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more, Github Document</a>
76-
</article> <<!--What is the purpose of a Wireframe-->
77-
<h4>What is the Purpose of a Wireframe</h4>
78-
</main>
27+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
28+
</article>
29+
<article>
30+
<h2>What is the Purpose of a Wireframe</h2>
7931
<p>
8032
A wireframe is a visual guide that represents the skeletal framework
8133
of a website or application. Its purpose is to outline the layout,
@@ -85,9 +37,9 @@ <h4>What is the Purpose of a Wireframe</h4>
8537
experience is intuitive and effective.
8638
</p>
8739
<a href="https://www.productplan.com/glossary/wireframe/">Read more about Wireframes</a>
88-
</article> <<!--What is a branch in Git-->
89-
<h5>What is a branch in Git</h5>
90-
</main>
40+
</article>
41+
<article>
42+
<h2>What is a branch in Git</h2>
9143
<p>
9244
A branch in Git is a separate line of development that allows
9345
multiple versions of a project to coexist. It enables developers to
@@ -97,6 +49,12 @@ <h5>What is a branch in Git</h5>
9749
branch when ready.
9850
</p>
9951
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more about Git branches</a>
52+
</article>
53+
</main>
54+
<footer>
55+
<p>
56+
This is the default, provided code and no changes have been made yet.
57+
</p>
10058
</footer>
10159
</body>
102-
</html>
60+
</html>

‎Wireframe/old_index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<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 Webcode Assignment</title>
7+
<link rel="stylesheet" href="style.css" />
8+
9+
<style>
10+
11+
</head>
12+
<body>
13+
<header>
14+
<h1>Wireframe to Webcode Assignment</h1>
15+
<p>
16+
This is the initial DRAFT version of this page. <!--First line updated to reflect draft status-->
17+
</p>
18+
</header>
19+
<main>
20+
<article>
21+
<img src="placeholder.svg" alt="" />
22+
<h2>Wireframe schematic</h2>
23+
<p>
24+
Wireframe is a visual guide that represents the skeletal framework
25+
of a website or application. Its purpose is to outline the layout.
26+
</p>
27+
<a href="">Read more</a>
28+
29+
/* First article spans both columns */
30+
31+
</head>
32+
<body>
33+
<!-- Article-top: Readme Files -->
34+
</article> <<!--What is the purpose of a Wireframe-->
35+
<h3>What is the Purpose of a Readme File</h3>
36+
</main>
37+
<p>
38+
A readme file serves as a guide for users and developers, providing
39+
essential information about a project, including its purpose,
40+
installation instructions, usage guidelines, and contribution
41+
protocols. It helps ensure that everyone involved understands how to
42+
effectively use and contribute to the project.
43+
</p>
44+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more, Github Document</a>
45+
</article> <<!--What is the purpose of a Wireframe-->
46+
<h4>What is the Purpose of a Wireframe</h4>
47+
</main>
48+
<p>
49+
A wireframe is a visual guide that represents the skeletal framework
50+
of a website or application. Its purpose is to outline the layout,
51+
structure, and functionality of a page before the actual design and
52+
development process begins. Wireframes help stakeholders visualize
53+
the user interface, plan content placement, and ensure that the user
54+
experience is intuitive and effective.
55+
</p>
56+
<a href="https://www.productplan.com/glossary/wireframe/">Read more about Wireframes</a>
57+
</article> <<!--What is a branch in Git-->
58+
<h5>What is a branch in Git</h5>
59+
</main>
60+
<p>
61+
A branch in Git is a separate line of development that allows
62+
multiple versions of a project to coexist. It enables developers to
63+
work on new features, bug fixes, or experiments without affecting the
64+
main codebase. Branches facilitate collaboration, as team members can
65+
work independently and later merge their changes back into the main
66+
branch when ready.
67+
</p>
68+
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more about Git branches</a>
69+
</footer>
70+
</body>
71+
72+
</html>

0 commit comments

Comments
 (0)