Skip to content

Commit f2d01d5

Browse files
author
Dhruv Mohindru
committed
End of video 33
1 parent 79565c5 commit f2d01d5

File tree

2 files changed

+198
-60
lines changed

2 files changed

+198
-60
lines changed

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 27 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<link href="style.css" rel="stylesheet" />
56
<title>The Basic Language of the Web: HTML</title>
67
</head>
78

@@ -15,10 +16,11 @@ <h5>The Basic Language of the Web: HTML</h5>
1516
<h6>The Basic Language of the Web: HTML</h6>
1617
-->
1718

18-
<header>
19+
<header class="main-header">
1920
<h1>📘 The Code Magazine</h1>
2021

2122
<nav>
23+
<!-- <strong>This is the navigation</strong> -->
2224
<a href="blog.html">Blog</a>
2325
<a href="#">Challenges</a>
2426
<a href="#">Flexbox</a>
@@ -30,77 +32,50 @@ <h1>📘 The Code Magazine</h1>
3032
<header>
3133
<h2>The Basic Language of the Web: HTML</h2>
3234

33-
<img
34-
src="img/laura-jones.jpg"
35-
alt="Headshot of Laura Jones"
36-
height="50"
37-
width="50"
38-
/>
39-
40-
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
41-
42-
<img
43-
src="img/post-img.jpg"
44-
alt="HTML code on a screen"
45-
width="500"
46-
height="200"
47-
/>
35+
<img src="img/laura-jones.jpg" alt="Headshot of Laura Jones" height="50" width="50" />
36+
37+
<p id="author">Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
38+
39+
<img src="img/post-img.jpg" alt="HTML code on a screen" width="500" height="200" />
4840
</header>
4941

5042
<p>
5143
All modern websites and web applications are built using three
5244
<em>fundamental</em>
53-
technologies: HTML, CSS and JavaScript. These are the languages of the
54-
web.
45+
technologies: HTML, CSS and JavaScript. These are the languages of the web.
5546
</p>
5647

57-
<p>
58-
In this post, let's focus on HTML. We will learn what HTML is all about,
59-
and why you too should learn it.
60-
</p>
48+
<p>In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.</p>
6149

6250
<h3>What is HTML?</h3>
6351
<p>
64-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
65-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
66-
language that web developers use to structure and describe the content
67-
of a webpage (not a programming language).
52+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage. It's a markup language that web
53+
developers use to structure and describe the content of a webpage (not a programming language).
6854
</p>
6955
<p>
70-
HTML consists of elements that describe different types of content:
71-
paragraphs, links, headings, images, video, etc. Web browsers understand
56+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand
7257
HTML and render HTML code as websites.
7358
</p>
7459
<p>In HTML, each element is made up of 3 parts:</p>
7560

7661
<ol>
77-
<li>The opening tag</li>
62+
<li class="first-li">The opening tag</li>
7863
<li>The closing tag</li>
7964
<li>The actual element</li>
8065
</ol>
8166

8267
<p>
8368
You can learn more at
84-
<a
85-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
86-
target="_blank"
87-
>MDN Web Docs</a
88-
>.
69+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>.
8970
</p>
9071

9172
<h3>Why should you learn HTML?</h3>
9273

93-
<p>
94-
There are countless reasons for learning the fundamental language of the
95-
web. Here are 5 of them:
96-
</p>
74+
<p>There are countless reasons for learning the fundamental language of the web. Here are 5 of them:</p>
9775

9876
<ul>
99-
<li>To be able to use the fundamental web dev language</li>
100-
<li>
101-
To hand-craft beautiful websites instead of relying on tools like
102-
Worpress or Wix
103-
</li>
77+
<li class="first-li">To be able to use the fundamental web dev language</li>
78+
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
10479
<li>To build web applications</li>
10580
<li>To impress friends</li>
10681
<li>To have fun 😃</li>
@@ -112,35 +87,27 @@ <h3>Why should you learn HTML?</h3>
11287
<aside>
11388
<h4>Related posts</h4>
11489

115-
<ul>
90+
<ul class="related">
11691
<li>
117-
<img
118-
src="img/related-1.jpg"
119-
alt="Person programming"
120-
width="75"
121-
width="75"
122-
/>
92+
<img src="img/related-1.jpg" alt="Person programming" width="75" width="75" />
12393
<a href="#">How to Learn Web Development</a>
124-
<p>By Jonas Schmedtmann</p>
94+
<p class="related-author">By Jonas Schmedtmann</p>
12595
</li>
12696
<li>
12797
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
12898
<a href="#">The Unknown Powers of CSS</a>
129-
<p>By Jim Dillon</p>
99+
<p class="related-author">By Jim Dillon</p>
130100
</li>
131101
<li>
132-
<img
133-
src="img/related-3.jpg"
134-
alt="JavaScript code on a screen"
135-
width="75"
136-
height="75"
137-
/>
102+
<img src="img/related-3.jpg" alt="JavaScript code on a screen" width="75" height="75" />
138103
<a href="#">Why JavaScript is Awesome</a>
139-
<p>By Matilda</p>
104+
<p class="related-author">By Matilda</p>
140105
</li>
141106
</ul>
142107
</aside>
143108

144-
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
109+
<footer>
110+
<p id="copyright" class="copyright text">Copyright &copy; 2027 by The Code Magazine.</p>
111+
</footer>
145112
</body>
146113
</html>

‎starter/03-CSS-Fundamentals/style.css

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
* {
2+
/* border-top: 10px solid #1098ad; */
3+
4+
}
5+
body {
6+
color: #444;
7+
font-family: sans-serif;
8+
9+
border-top: 10px solid #1098ad;
10+
}
11+
12+
/* h1,
13+
h2,
14+
h3,
15+
h4,
16+
p,
17+
li {
18+
font-family: sans-serif;
19+
color: #444;
20+
} */
21+
22+
h1,
23+
h2,
24+
h3 {
25+
color: #1098ad;
26+
}
27+
28+
h1 {
29+
font-size: 26px;
30+
31+
text-transform: uppercase;
32+
font-style: italic;
33+
}
34+
35+
h2 {
36+
font-size: 40px;
37+
}
38+
39+
h3 {
40+
font-size: 30px;
41+
}
42+
43+
h4 {
44+
font-size: 20px;
45+
46+
text-transform: uppercase;
47+
text-align: center;
48+
}
49+
50+
p {
51+
font-size: 22px;
52+
53+
line-height: 1.5;
54+
}
55+
56+
li {
57+
font-size: 20px;
58+
}
59+
60+
/* footer p {
61+
font-size: 16px;
62+
} */
63+
64+
/* article header p {
65+
font-style: italic;
66+
} */
67+
68+
#author {
69+
font-style: italic;
70+
font-size: 18px;
71+
}
72+
73+
#copyright {
74+
font-size: 16px;
75+
}
76+
77+
.related-author {
78+
font-size: 18px;
79+
font-weight: bold;
80+
}
81+
82+
/* ul {
83+
list-style: none;
84+
} */
85+
86+
.related {
87+
list-style: none;
88+
}
89+
90+
.main-header {
91+
background-color: #f7f7f7;
92+
}
93+
94+
aside {
95+
background-color: #f7f7f7;
96+
border-top: 5px solid #1098ad;
97+
border-bottom: 5px solid #1098ad;
98+
}
99+
100+
body {
101+
/* background-color: orange; */
102+
}
103+
104+
/* .first-li {
105+
font-weight: bold;
106+
} */
107+
108+
li:first-child {
109+
font-weight: bold;
110+
}
111+
112+
li:last-child {
113+
font-style: italic;
114+
}
115+
116+
li:nth-child(even) {
117+
/* color: red; */
118+
}
119+
120+
/* Misconception: this won't work */
121+
article p:first-child {
122+
color: red;
123+
}
124+
125+
/* Styling links */
126+
a:link {
127+
color: #1098ad;
128+
text-decoration: none;
129+
}
130+
131+
a:visited {
132+
/* color: #777; */
133+
color: #1098ad;
134+
}
135+
136+
a:hover {
137+
color: orangered;
138+
font-weight: bold;
139+
text-decoration: underline orangered;
140+
}
141+
142+
a:active {
143+
background-color: black;
144+
font-style: italic;
145+
}
146+
147+
a {
148+
color: red;
149+
}
150+
/* LVHA */
151+
152+
/* Resolving conflicts */
153+
/* #copyright {
154+
color: red;
155+
}
156+
157+
.copyright {
158+
color: blue;
159+
}
160+
161+
.text {
162+
color: yellow;
163+
}
164+
165+
footer p {
166+
color: green !important;
167+
} */
168+
169+
nav {
170+
font-size: : 18px;
171+
}

0 commit comments

Comments
 (0)