-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab_021.html
127 lines (121 loc) · 5.88 KB
/
lab_021.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
<title>
Lab 21 - More HTML
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
<meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
<meta content="#0000ff" name="theme-color" />
<link href="manifest.json" rel="manifest" />
<link href="css/reset.css" media="screen" rel="stylesheet" />
<link href="css/screen.css" media="screen" rel="stylesheet" />
<link href="css/prism.css" rel="stylesheet" />
</head>
<body data-lab-id="21">
<a class="skip-to-content" href="#content" tabindex="1">
Skip to content
</a>
<main class="layout">
<nav id="index">
<p class="link-home">
<a href="index.html">
<span>Hack4Impact Starter Pack</span>
</a>
</p>
<button class="link-menu">
Menu
</button>
<nav tabindex="0">
<ol>
</ol>
</nav>
</nav>
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 21</em>
More HTML
</h1>
<h2>Goals</h2>
<ul>
<li>Update your HTML to include new structural and semantic tags</li>
</ul>
<h2>Add More!</h2>
<p>Update all the pages of your website with the new things we've learned about and that are in
<code>index.html</code>.
</p>
<ul>
<li>Add an <code class="language-html"><h1></code> heading at the top, inside <code
class="language-html"><main></code> on every page. Give it the <code>class="page-title"</code>
attribute.</li>
<p class="note"><strong>Note:</strong> We recommend naming it after the page i.e. "blog", "resume", etc.</p>
<li>Add an <code class="language-html"><h1></code> heading at the top, inside <code
class="language-html"><nav></code> on every page. Give it the <code>class="logo"</code> attribute.
This will be the large name or logo in the upper left of your website. Give them all the same text, your
name, etc.</li>
<li>Give all your <code class="language-html"><nav></code> tags, the <code>class="navbar"</code>
attribute.
</li>
<li>Give all your <code class="language-html"><footer></code> tags, the <code>class="footer"</code>
attribute.
</li>
</ul>
<h2>Update Your Resume</h2>
<p>Your resume page will be where a digital version of your resume will be stored! Don't worry if you don't have
anything yet, as you go through your academic and professional career, you can always update it!</p>
<ul>
<li>In your <code>resume.html</code> page, make a <code class="language-html"><div></code> inside your
<code class="language-html"><main></code> under your heading. Give it the <code>class="resume"</code>
attribute.
</li>
<li>
In your <code>resume.html</code> page, give all your <code class="language-html"><section></code> tags,
the <code>class="section"</code> attribute.
</li>
<li>
In your <code>resume.html</code> page, move all your <code class="language-html"><section></code> tags
inside your <code class="language-html"><div class="resume"></code> tag
</li>
<li>
In your <code>resume.html</code> page, inside each <code class="language-html"><section></code> tag,
put an <code class="language-html"><h2></code> heading at the top. Give it the
<code>class="section-title"</code> attribute.
</li>
<li>In your <code>resume.html</code> page, inside each <code class="language-html"><h2></code> tag,
give them one of the following: "Education", "Experience", "Skills", "Projects", "Coursework", "Activities",
"Awards", "Interests", "References"
</li>
<p class="note"><strong>Note:</strong> It's recommended you have "Education",
"Coursework", "Skills", "Projects", and "Experience". If you want to have other categories of your resume,
simply add more of the <code class="language-html"><section></code>, heading, and all!</p>
</ul>
<h2>Update Your Portfolio</h2>
<p>Projects are a great way to show that you've worked through something practical or built something cool. You
are already making your first portfolio project, this website! This page is where you can link to and showcase
your work.</p>
<ul>
<li>In your <code>portfolio.html</code> page, make a <code class="language-html"><div></code> inside your
<code class="language-html"><main></code> under your heading. Give it the <code>class="project"</code>
attribute.
</li>
</ul>
<h2>Blog and Contact</h2>
<p>We won't be doing much with the blog page in the Starter Pack, but we'll add more to our contact page in a
little bit. For now, they should have most of the things <code>index.html</code> has: <code
class="language-html"><nav></code>, <code class="language-html"><body></code>, <code
class="language-html"><main></code>, <code class="language-html"><footer></code>, and <code
class="language-html"><h1></code> headings.</p>
<p class="note"><strong>Note:</strong> Stage and commit! Try to split up any large changes into logical, small
stages and commits.</p>
</div>
</main>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({startOnLoad: true, theme: "base"});
</script>
</body>
</html>