forked from Cathe313/html-css-intro
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (127 loc) · 4.47 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
<!doctype html>
<html>
<head>
<title>DecodeMTL - Full-stack web development</title>
<style type="text/css">
/* select the body tag */
body {
margin: 0;
}
/* select all the tags <section> */
section {
border-bottom: 1px solid black;
overflow: hidden;
}
/* select all the tags that have
class="technologies"
or even class="technologies some-other-class"
or even class="some-other-class technologies some-third-class"
*/
.technologies {
background-color: aliceblue;
}
.schedule {
background-color: tomato;
}
.curriculum {
background-color: rgba(0, 255, 0, 0.5);
}
/* select all the UL elements that are anywhere insde a NAV element */
nav ul {
list-style: none;
}
nav li {
display: inline;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
}
nav a {
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul><!-- generated with ul>(li>a)*4 -->
<li><a href="">Technologies</a></li>
<li><a href="">Schedule</a></li>
<li><a href="">Curriculum</a></li>
<li><a href="">How to apply</a></li>
</ul>
</nav>
<header>
<!-- Headings give information about the structure of the page -->
<h1>DecodeMTL - Full-stack web development</h1>
<p>Come here to lear to be a developer!</p>
</header>
<section class="technologies">
<header>
<h2>Technologies</h2>
<p>Here are the diff technologies we will see</p>
</header>
<!-- Lists -->
<ul><!-- un-ordered list-->
<li>JavaScript</li>
<li>NodeJS</li>
<li>Express</li>
</ul>
</section>
<section class="schedule">
<h2>Schedule</h2>
</section>
<section class="curriculum">
<h2>Curriculum</h2>
<ol><!-- ordered list, generated with ol>li*4 -->
<li>
<h3>Programming</h3>
<ul><!-- lists can be nested -->
<li>Basic JavaScript syntax</li>
<li>Web server with Node</li>
<li>Callbacks and Promises</li>
</ul>
</li>
<li>Back-end development</li>
<li>Front-end development</li>
<li>Project</li>
</ol>
</section>
<section class="how-to-apply">
<h2>How to apply</h2>
</section>
<aside>
<p>
Look at this great link of what some bootcamp attendees were able to build after their bootcamp
</p>
<a href="http://www.awesome-project.com">click here</a>
<a href="http://www.awesome-project.com">click here</a>
<a href="http://www.awesome-project.com">click here</a>
<a href="http://www.awesome-project.com">click here</a>
<a href="http://www.awesome-project.com">click here</a>
</aside>
<footer>
<h3>Other pages</h3>
<ul>
<li><a href="about.html">Read more about us</a></li>
</ul>
<h3>Partners</h3>
<ul>
<li>
<a href="http://kidscodejeunesse.org/home/">
<img src="images/partners/kidscode-logo.jpg">
</a>
</li>
<li>
<a href="http://kidscodejeunesse.org/home/">
<img src="images/partners/kidscode-logo.jpg">
</a>
</li>
<li>
<a href="http://kidscodejeunesse.org/home/">
<img src="images/partners/kidscode-logo.jpg">
</a>
</li>
</ul>
</footer>
</body>
</html>