Skip to content

Commit d6b1a26

Browse files
gideondefargideondefar
committed
Format HTML for consistent indentation and readability
1 parent 03a7645 commit d6b1a26

3 files changed

Lines changed: 128 additions & 97 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,53 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<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" />
9-
</head>
10-
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
</header>
14-
<main>
15-
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
20-
</form>
21-
</main>
22-
<footer>
23-
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
25-
</footer>
26-
</body>
27-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<title>My form exercise</title>
8+
<meta name="description" content="" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>Product Pick</h1>
15+
</header>
16+
<main>
17+
<form aria-label="order form">
18+
<label for="name">name: </label>
19+
<input type="text" name="name" id="name" minlength="2" maxlength="100" autocomplete="name" pattern="\S.*\S"
20+
title="name must contain at least two non-space characters. Must start and end with non-space character."
21+
aria-label="enter your name" required />
22+
23+
<label for="email">email: </label>
24+
<input type="email" name="email" id="email" aria-label="enter your email address" required />
25+
26+
<label for="shirt-color">shirt color: </label>
27+
<select name="shirt-color" id="shirt-color" aria-label="select shirt color" required>
28+
<option value="" disabled selected>Choose a color</option>
29+
<option value="red">red</option>
30+
<option value="green">green</option>
31+
<option value="blue">blue</option>
32+
</select>
33+
<select name="shirt-size" id="shirt-size" aria-label="select shirt size" required>
34+
<option value="" disabled selected>Choose a size</option>
35+
<option value="xs">XS</option>
36+
<option value="s">S</option>
37+
<option value="m">M</option>
38+
<option value="l">L</option>
39+
<option value="xl">XL</option>
40+
<option value="xxl">XXL</option>
41+
</select>
42+
<button type="submit" aria-label="submit order">
43+
Check out
44+
</button>
45+
</form>
46+
</main>
47+
<footer>
48+
<!-- change to your name-->
49+
<p>By Gideon Defar</p>
50+
</footer>
51+
</body>
52+
53+
</html>

‎Wireframe/index.html‎

Lines changed: 60 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,67 @@
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>Welcome to Intro to Programming</h1>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Welcome to Intro to Programming</h1>
14+
<p>
15+
Here we will learn about some introductory web development
16+
concepts.
17+
</p>
18+
</header>
19+
<main>
20+
<article>
21+
<img src="https://cdn.bulldogjob.com/system/photos/files/000/003/440/original/readme.webp"
22+
alt="example readme file" />
23+
<h2>The purpose of a README file</h2>
1224
<p>
13-
Here we will learn about some introductory web development
14-
concepts.
25+
A README file is a text file often included with a software
26+
program or code package which provides the reader with
27+
information they may need to use the software, such as
28+
installation instructions.
1529
</p>
16-
</header>
17-
<main>
18-
<article>
19-
<img
20-
src="https://cdn.bulldogjob.com/system/photos/files/000/003/440/original/readme.webp"
21-
alt="example readme file" />
22-
<h2>The purpose of a README file</h2>
23-
<p>
24-
A README file is a text file often included with a software
25-
program or code package which provides the reader with
26-
information they may need to use the software, such as
27-
installation instructions.
28-
</p>
29-
<a
30-
href="https://bulldogjob.com/readme/how-to-write-a-good-readme-for-your-github-project"
31-
>Write your own README file</a
32-
>
33-
</article>
34-
<article>
35-
<img
36-
src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/01-youtube-wireframe-example.png"
37-
alt="example of a wireframe" />
38-
<h2>The purpose of a wireframe</h2>
39-
<p>
40-
A wireframe is used to express the layout of a visual medium
41-
such as a newspaper, or web page. It helps designers and
42-
programmers to get a simple overview of a design.
43-
</p>
44-
<a
45-
href="https://www.figma.com/resource-library/what-is-wireframing/"
46-
>Read more about wireframing</a
47-
>
48-
</article>
49-
<article>
50-
<img
51-
src="https://miro.medium.com/v2/resize:fit:1200/format:webp/1*e6EkEBIDZcOmlwPqCnsJKg.jpeg"
52-
alt="diagram of git branching" />
53-
<h2>What is a Git branch</h2>
54-
<p>
55-
A git branch is a copy of the code in a git repository.
56-
Branches are created so that developers can work separately
57-
on specific features. Once a feature is completed it is
58-
merged into main. If the creation of a feature is not
59-
successful, for example there are too many bugs, the branch
60-
can be deleted without affecting the main branch.
61-
</p>
62-
<a
63-
href="https://medium.com/@jacoblogan98/understanding-git-branching-5d01f3dda541"
64-
>Read more about Git</a
65-
>
66-
</article>
67-
</main>
68-
<footer>
30+
<a href="https://bulldogjob.com/readme/how-to-write-a-good-readme-for-your-github-project">Write your own
31+
README file</a>
32+
</article>
33+
<article>
34+
<img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/01-youtube-wireframe-example.png"
35+
alt="example of a wireframe" />
36+
<h2>The purpose of a wireframe</h2>
6937
<p>
70-
Completed by Gideon Defar for ITP at Code Your
71-
Future.
38+
A wireframe is used to express the layout of a visual medium
39+
such as a newspaper, or web page. It helps designers and
40+
programmers to get a simple overview of a design.
7241
</p>
73-
</footer>
74-
</body>
42+
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more about wireframing</a>
43+
</article>
44+
<article>
45+
<img src="https://miro.medium.com/v2/resize:fit:1200/format:webp/1*e6EkEBIDZcOmlwPqCnsJKg.jpeg"
46+
alt="diagram of git branching" />
47+
<h2>What is a Git branch</h2>
48+
<p>
49+
A git branch is a copy of the code in a git repository.
50+
Branches are created so that developers can work separately
51+
on specific features. Once a feature is completed it is
52+
merged into main. If the creation of a feature is not
53+
successful, for example there are too many bugs, the branch
54+
can be deleted without affecting the main branch.
55+
</p>
56+
<a href="https://medium.com/@jacoblogan98/understanding-git-branching-5d01f3dda541">Read more about Git</a>
57+
</article>
58+
</main>
59+
<footer>
60+
<p>
61+
Completed by Gideon Defar for Code Your
62+
Future.
63+
</p>
64+
</footer>
65+
</body>
66+
7567
</html>

‎Wireframe/style.css‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ As well as useful links to learn more */
3131
--line: 1px solid;
3232
--container: 1280px;
3333
}
34+
3435
/* ====== Base Elements ======
3536
General rules for basic HTML elements in any context */
3637
body {
@@ -42,25 +43,31 @@ body {
4243
align-items: center;
4344
gap: 2rem;
4445
}
46+
4547
a {
4648
padding: var(--space);
4749
border: var(--line);
4850
max-width: fit-content;
4951
}
52+
5053
img,
5154
svg {
5255
width: 100%;
5356
object-fit: cover;
5457
}
58+
5559
p {
5660
margin-bottom: 0.5rem;
5761
}
62+
5863
h1 {
5964
margin-bottom: 1rem;
6065
}
66+
6167
h2 {
6268
margin-bottom: 0.8rem;
6369
}
70+
6471
/* ====== Site Layout ======
6572
Setting the overall rules for page regions
6673
https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -74,6 +81,7 @@ main {
7481
header {
7582
text-align: center;
7683
}
84+
7785
footer {
7886
position: fixed;
7987
bottom: 0;
@@ -84,6 +92,7 @@ footer {
8492
background-color: rgb(54, 53, 53);
8593
color: white;
8694
}
95+
8796
/* ====== Articles Grid Layout ====
8897
Setting the rules for how articles are placed in the main element.
8998
Inspect this in Devtools and click the "grid" button in the Elements view
@@ -95,10 +104,12 @@ main {
95104
display: grid;
96105
grid-template-columns: 1fr 1fr;
97106
gap: var(--space);
98-
> *:first-child {
107+
108+
>*:first-child {
99109
grid-column: span 2;
100110
}
101111
}
112+
102113
/* ====== Article Layout ======
103114
Setting the rules for how elements are placed in the article.
104115
Now laying out just the INSIDE of the repeated card/article design.
@@ -110,10 +121,12 @@ article {
110121
text-align: left;
111122
display: grid;
112123
grid-template-columns: var(--space) 1fr var(--space);
113-
> * {
124+
125+
>* {
114126
grid-column: 2/3;
115127
}
116-
> img {
128+
129+
>img {
117130
grid-column: span 3;
118131
}
119132
}

0 commit comments

Comments
 (0)