Skip to content

Commit cc60697

Browse files
jorge1alcalajorge1alcala
committed
learning selector
1 parent d5fd364 commit cc60697

File tree

7 files changed

+181
-71
lines changed

7 files changed

+181
-71
lines changed

‎starter/02-HTML-Fundamentals/img/laura-jones.jpg‎

6.64 KB
Loading

‎starter/02-HTML-Fundamentals/img/post-img.jpg‎

53.4 KB
Loading

‎starter/02-HTML-Fundamentals/img/related-1.jpg‎

50.2 KB
Loading

‎starter/02-HTML-Fundamentals/img/related-2.jpg‎

33 KB
Loading

‎starter/02-HTML-Fundamentals/img/related-3.jpg‎

43.5 KB
Loading

‎starter/02-HTML-Fundamentals/index.html‎

Lines changed: 140 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,149 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8 " />
5-
<title>The basic Language of the Web: HTML</title>
4+
<meta charset="UTF-8" />
5+
<title>The Basic Language of the Web: HTML</title>
6+
<link rel="stylesheet" href="style.css" />
67
</head>
78

89
<body>
9-
<h1>📘 The Code Magazine</h1>
10-
<a href="blog.html">Blog</a>
11-
<a href="challenges" target="_blank" rel="noopener noreferrer">Challenge</a>
12-
<a href="challenges" target="_blank" rel="noopener noreferrer">Challenge</a>
10+
<!--
11+
<h1>The Basic Language of the Web: HTML</h1>
1312
<h2>The Basic Language of the Web: HTML</h2>
14-
<img
15-
src="laura-jones.jpg"
16-
alt="Headshot of laura jones"
17-
width="50"
18-
height="50"
19-
/>
20-
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
21-
<img src="post-img.jpg" alt="HTML code on a screen" width="500" />
22-
<p>
23-
All modern websites and web applications are built using three
24-
<em>fundamental</em>
25-
technologies: HTML, CSS and JavaScript. These are the languages of the
26-
web.
27-
</p>
28-
In this post, let's focus on HTML. We will learn what HTML is all about, and
29-
why you too should learn it. In this post, let's focus on HTML. We will
30-
learn what HTML is all about, and why you too should learn it.
31-
<p>
32-
In this post, let's focus on HTML. We will learn what HTML is all about,
33-
and why you too should learn it.
34-
</p>
35-
<h3>What is HTML?</h3>
36-
<p>
37-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
38-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup language
39-
that web developers use to structure and describe the content of a webpage
40-
(not a programming language).
41-
</p>
42-
<p>
43-
HTML consists of elements that describe different types of content:
44-
paragraphs, links, headings, images, video, etc. Web browsers understand
45-
HTML and render HTML code as websites.
46-
</p>
47-
<p>In HTML, each element is made up of 3 parts:</p>
48-
49-
<ol>
50-
<li>The opening tag</li>
51-
<li>The closing tag</li>
52-
<li>The actual element</li>
53-
</ol>
54-
55-
<p>
56-
You can learn more at the
57-
<a href="https://developer.mozilla.org/en-US/" target="_blank"
58-
>MDN Web Docs</a
59-
>
60-
.
61-
</p>
62-
<h3>Why should you learn HTML?</h3>
63-
<p>
64-
There are countless reasons for learning the fundamental language of the
65-
web. Here are 5 of them:
66-
</p>
67-
<ul>
68-
<li>To be able to use the fundamental web dev language</li>
69-
<li>
70-
To hand-craft beautiful websites instead of relying on tools like
71-
Worpress or Wix
72-
</li>
73-
<li>To build web applications</li>
74-
<li>To impress friends</li>
75-
<li>To have fun 😃</li>
76-
</ul>
77-
78-
<p>Hopefully you learned something new here. See you next time!</p>
13+
<h3>The Basic Language of the Web: HTML</h3>
14+
<h4>The Basic Language of the Web: HTML</h4>
15+
<h5>The Basic Language of the Web: HTML</h5>
16+
<h6>The Basic Language of the Web: HTML</h6>
17+
-->
18+
19+
<header>
20+
<h1>📘 The Code Magazine</h1>
21+
22+
<nav>
23+
<a href="blog.html">Blog</a>
24+
<a href="#">Challenges</a>
25+
<a href="#">Flexbox</a>
26+
<a href="#">CSS Grid</a>
27+
</nav>
28+
</header>
29+
30+
<article>
31+
<header>
32+
<h2>The Basic Language of the Web: HTML</h2>
33+
34+
<img
35+
src="img/laura-jones.jpg"
36+
alt="Headshot of Laura Jones"
37+
height="50"
38+
width="50"
39+
/>
40+
41+
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
42+
43+
<img
44+
src="img/post-img.jpg"
45+
alt="HTML code on a screen"
46+
width="500"
47+
height="200"
48+
/>
49+
</header>
50+
51+
<p>
52+
All modern websites and web applications are built using three
53+
<em>fundamental</em>
54+
technologies: HTML, CSS and JavaScript. These are the languages of the
55+
web.
56+
</p>
57+
58+
<p>
59+
In this post, let's focus on HTML. We will learn what HTML is all about,
60+
and why you too should learn it.
61+
</p>
62+
63+
<h3>What is HTML?</h3>
64+
<p>
65+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
66+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
67+
language that web developers use to structure and describe the content
68+
of a webpage (not a programming language).
69+
</p>
70+
<p>
71+
HTML consists of elements that describe different types of content:
72+
paragraphs, links, headings, images, video, etc. Web browsers understand
73+
HTML and render HTML code as websites.
74+
</p>
75+
<p>In HTML, each element is made up of 3 parts:</p>
76+
77+
<ol>
78+
<li>The opening tag</li>
79+
<li>The closing tag</li>
80+
<li>The actual element</li>
81+
</ol>
82+
83+
<p>
84+
You can learn more at
85+
<a
86+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
87+
target="_blank"
88+
>MDN Web Docs</a
89+
>.
90+
</p>
91+
92+
<h3>Why should you learn HTML?</h3>
93+
94+
<p>
95+
There are countless reasons for learning the fundamental language of the
96+
web. Here are 5 of them:
97+
</p>
98+
99+
<ul>
100+
<li>To be able to use the fundamental web dev language</li>
101+
<li>
102+
To hand-craft beautiful websites instead of relying on tools like
103+
Worpress or Wix
104+
</li>
105+
<li>To build web applications</li>
106+
<li>To impress friends</li>
107+
<li>To have fun 😃</li>
108+
</ul>
109+
110+
<p>Hopefully you learned something new here. See you next time!</p>
111+
</article>
112+
113+
<aside>
114+
<h4>Related posts</h4>
115+
116+
<ul>
117+
<li>
118+
<img
119+
src="img/related-1.jpg"
120+
alt="Person programming"
121+
width="75"
122+
width="75"
123+
/>
124+
<a href="#">How to Learn Web Development</a>
125+
<p>By Jonas Schmedtmann</p>
126+
</li>
127+
<li>
128+
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
129+
<a href="#">The Unknown Powers of CSS</a>
130+
<p>By Jim Dillon</p>
131+
</li>
132+
<li>
133+
<img
134+
src="img/related-3.jpg"
135+
alt="JavaScript code on a screen"
136+
width="75"
137+
height="75"
138+
/>
139+
<a href="#">Why JavaScript is Awesome</a>
140+
<p>By Matilda</p>
141+
</li>
142+
</ul>
143+
</aside>
144+
145+
<footer>
146+
<p>Copyright &copy; 2027 by The Code Magazine.</p>
147+
</footer>
79148
</body>
80149
</html>

‎starter/02-HTML-Fundamentals/style.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
h1,
2+
h2,
3+
h3,
4+
h4,
5+
p,
6+
li {
7+
font-family: sans-serif;
8+
}
9+
h1 {
10+
color: aquamarine;
11+
font-size: 26px;
12+
text-transform: uppercase;
13+
font-style: italic;
14+
}
15+
h2 {
16+
font-size: 40px;
17+
font-family: sans-serif;
18+
}
19+
h3 {
20+
font-size: 30px;
21+
}
22+
h4 {
23+
font-size: 20px;
24+
text-transform: uppercase;
25+
text-align: center;
26+
}
27+
p {
28+
font-size: 22px;
29+
line-height: 1.5;
30+
}
31+
li {
32+
font-size: 20px;
33+
}
34+
footer p {
35+
font-size: 16px;
36+
}
37+
header p {
38+
font-style: italic;
39+
}
40+
body > article > header > p > {
41+
}

0 commit comments

Comments
 (0)