Upright_Developer_Engineering_Boot_Camp/Instructions.html at master · Fusion-AI-Labs/Upright_Developer_Engineering_Boot_Camp · GitHub

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
Hello HTML!

Objective
Learn about how to create your first HTML page.

Learning
In this lab, we will be learning the basics of HTML. We will be focusing on HTML semantic tags and link tags. We will also utilize Emmet Abbreviations: shortcut key combinations that autofill content for us.


Topics:

HTML
HTML semantic tags
HTML <a href> tag links
VSCode Emmet Abbreviations
Achieving

In this lab, we will create a basic website using HTML. It will have a layout, placeholder content, and multiple pages connected by
<a href> links.

Your work will result in:

A website created with HTML.
A website laid out utilizing semantic div tags.
A website that has placeholder content.
A website that has multiple pages navigable by <a href> links.
Procedure

Using the ! HTML Emet Abbreviation
 Inside of index.html, type ! and press Tab.
 This should create an empty HTML template for you to use.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>


Creating our HTML Layout
 Your tags to create this layout will live inside of the <body> tag pair. This is true for every website you build.

 Your <title> tag should contain the name of the page. (Home, in this case).

 In our website, we will need the following semantic div tags: <header>, <nav>, and <main>. Be sure to include their closing tag.


Filling out placeholder content
 <header> Should contain a title for the page.

 <nav>Should contain at least three<a href>s that will navigate to other pages on the site. Leave them blank for now.

 <main> Should contain placeholder text and <img>s.

 To generate placeholder text in VSCode, type lorem100 and push Enter. This will generate 100 words of placeholder text. You can change 100 to be whatever amount of words you want. lorem5000 is also valid.

 To access placeholder images, here are a few options to try: Lorem Flickr, Placekitten. Lorem Picsum.

Creating multiple pages
 In the same directory as index.html, create another file named about.html

 In about.html, use the emet abbreviation again to generate the necessary HTML boiler plate.

 Inside of <body>, put in a <p> tag to inform us of which page we are on (About, in this case.)

 Create two more pages in the exact fashion you created about.html. These are your unique invention and should have unique names.
 Don't forget to change the <title> tag content to reflect which page the user is on.

Linking to our new pages
 Back in index.html, return to the <a href>s in <nav>.
 For the first <a href>, point the link to /about.html. Name this link "About".

 Fill out the other two <a href>s so that they correspond to the two additional pages that you created.

Review
The software should:

Have a Home page the user lands on.

The home page should contain the <header>, <nav>, and <main> semantic divs filled out with placeholder content.

Have multiple pages that can all be navigated to via the links in <nav>.

Going Further
Add <a href>s to your additional pages that allow the user to navigate back to the Home page.

Add different placeholder content to your additional pages. Utilize different semantic tags than those initially given.

Style your <a href>s to appear as buttons rather than links.

You can research inline styles to do this. This will be bringing in CSS.

Style all of your semantic tags utilizing inline styles.