-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (61 loc) · 2.93 KB
/
index.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
<!DOC HTML>
<html>
<head>
<link rel="style sheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav id="navbar">
<header>HTML & CSS</header>
<ul>
<a class="nav-link" href="#Introduction_to_HTML"><li>Introduction to HTML</li></a>
<a class="nav-link" href="#What_is_HTML_for_anyway?"><li>What is HTML for anyway?</li></a>
<a class="nav-link" href="#What_about_CSS?"><li>What about CSS?</li></a>
<a class="nav-link" href="#What_is_CSS_Used_For?"><li>What is CSS Used For?</li></a>
<a class="nav-link" href="#Conclusion"><li>Conclusion</li></a>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction_to_HTML">
<header>Introduction to HTML</header>
<p> this is a guide to html please read through and try to remember what you have learned as you might need to reference it later.</p>
<section class="main-section" id="What_is_HTML_for_anyway?">
<header>What is HTML for anyway?</header>
<p>HTML is used to;</p>
<ul>
<li>define the structure of a webpage</li>
<li>organize a webpage's content</li>
</ul>
<p class="code-intro">Here is an example;</p>
<code> <p> this is for writing plain or paragraph text</code>
<p class="code-intro">One more;</p>
<code> <h1> This tag is for your primary heading, you should only have one and it should inform the reader and search engines of the primary subject matter of your page. </code>
</section>
<section class="main-section" id="What_about_CSS?">
<header>What about CSS?</header>
<p>CSS is short for cascading style sheets and is used for styling text and informing our browsers how our HTML code should be displayed.</p>
<p class="code-intro">Example;</p>
<code>.class will select a custom class you have defined for styling with CSS</code>
<p class="code-intro">Here is another example;</p>
<code>#id will choose all elements that you have given the specified ID to</code>
</section>
<section class="main-section" id="What_is_CSS_Used_For?">
<header>What is CSS Used For?</header>
<p>CSS is useful for the following</p>
<ul>
<li>Style our webpages</li>
<li>transform how elements work</li>
<li>optimize for devices</li>
</ul>
<p class="code-intro">This code will set the font size of our headings to twice the root defined setting.</p>
<code>h1{font-size:2rem;}</code>
</section>
<section class="main-section" id="Conclusion">
<header>Conclusion</header>
<p>Both HTML and CSS are needed to create a responsive, well designed website.
HTML is easy to learn, CSS takes some time to understand. Rest assured it is well worth the time to learn!
</p>
</section>
</main>
</body>
</html>