-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (144 loc) · 6.13 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
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
#nav-bar{
position: fixed;
min-width: 290px;
top: 0;
right: 0;
left: 0;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, .4);
}
#nav-bar header{
margin: 10px;
}
#nav-bar a{
display: flex;
padding: 40px;
text-decoration: none;
color: #000;
font-size: 2rem;
border-top: 1px solid;
}
#main-doc{
margin-left:300px ;
}
header{
font-size: 2.6rem;
}
@media only screen and (max-width: 750px) {
#nav-bar{
display: none;
}
#main-doc{
margin-left: 30px;
}
}
</style>
<title>Technical Documentation Page</title>
</head>
<body>
<nav id="nav-bar">
<header>Web Documentation</header>
<a href="#introduction" class="nav-link">Introduction</a>
<a href="#prerequisites" class="nav-link">Prerequisites</a>
<a href="#html_and_css" class="nav-link">HTML and CSS</a>
<a href="#javascript" class="nav-link">JavaScript</a>
<a href="#summary" class="nav-link">Summary</a>
</nav>
<main id="main-doc">
<section class="main-section" id="introduction">
<header>Introduction</header>
<p>
It's a lot of work to create a professional website, so if you're new
to web development, we encourage you to start small. You won't build
another Facebook right away, but it's not hard to get your own simple
website online, so we'll start there.
</p>
<p>
By working through the articles listed below in order, you will go
from nothing to getting your first webpage online. Let's begin our
journey!
</p>
</section>
<section class="main-section" id="prerequisites">
<header>Prerequisites</header>
<p>
You don't need any previous knowledge to start this course. All you
need is a computer that can run modern web browsers, an internet
connection, and a willingness to learn.
</p>
<p>
If you are not sure if front-end web development is for you, and/or
you want a gentle introduction before starting a longer and more
complete course, work through our Getting started with the web module
first.
</p>
</section>
<section class="main-section" id="html_and_css">
<header>HTML and CSS</header>
<p>
Hypertext Markup Language (HTML) is the code that you use to structure
your web content and give it meaning and purpose.
</p>
<p>
For example, is my content a set of paragraphs or a list of bullet
points? Do I have images inserted on my page? Do I have a data table?
Without overwhelming you, HTML basics provides enough information to
make you familiar with HTML.
</p>
<p>Example of HTML</p>
<pre>
<code>
<p><p>My cat is <strong>very</strong> grumpy.</p></p>
</code>
</pre>
<p>
Cascading Stylesheets (CSS) is the code that you use to style your
website. For example, do you want the text to be black or red? Where
should content be drawn on the screen? What background images and
colors should be used to decorate your website? CSS basics takes you
through what you need to get started.
</p>
<p><li>Link HTML with CSS</li></p>
<p><link href="styles/style.css" rel="stylesheet></p>
<p>Example of CSS</p>
<code>
p { color: red; }
</code>
</section>
<section class="main-section" id="javascript">
<header>JavaScript</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
<ul>
<li><p>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</p></li>
<li><p>JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</p></li></ul>
<p>Below are some JavaScript examples</p>
<code>
function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");
</code>
<br></br>
<code>
var x = 42.
</code>
<br></br>
<code>
let y = 13.
</code>
</section>
<section class="main-section" id="summary">
<header>Summary</header>
<p>Once you have finished writing the code and organizing the files that make up your website, you need to put it all online so people can find it. Publishing your sample code describes how to get your simple sample code online with minimum effort.</p>
</section>
</main>
</body>
</html>