Skip to content

Commit 3a30c25

Browse files
eva-li8eva-li8
committed
Section 3
1 parent 10de6bc commit 3a30c25

File tree

9 files changed

+359
-121
lines changed

9 files changed

+359
-121
lines changed

‎starter/02-HTML-Fundamentals/challenges.jpg renamed to ‎starter/02-HTML-Fundamentals/img/challenges.jpg

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>The Basic Language of the Web: HTML</title>
6+
</head>
7+
8+
<body>
9+
<aside>
10+
<h4>Related posts</h4>
11+
<ul>
12+
<li>
13+
<img
14+
src="img/related-1.jpg"
15+
alt="Person programming"
16+
width="75"
17+
height="75"
18+
/>
19+
<a href="#">How to Learn Web Development</a>
20+
<p>By Jonas Schmedtmann</p>
21+
</li>
22+
<li>
23+
<img
24+
src="img/related-2.jpg"
25+
alt="Lightning strike"
26+
width="75"
27+
height="75"
28+
/>
29+
<a href="#">The Unknown Powers of CSS</a>
30+
<p>By Jim Dillon</p>
31+
</li>
32+
<li>
33+
<img
34+
src="img/related-3.jpg"
35+
alt="Code editor"
36+
width="75"
37+
height="75"
38+
/>
39+
<a href="#">Why JavaScript is Awesome</a>
40+
<p>By Matilda</p>
41+
</li>
42+
</ul>
43+
</aside>
44+
</body>
45+
</html>

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

Lines changed: 136 additions & 121 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,132 +16,146 @@ <h5>The Basic Language of the Web: HTML</h5>
1516
<h6>The Basic Language of the Web: HTML</h6>
1617
-->
1718

18-
<header>
19-
<h1>📘 The Code Magazine</h1>
20-
21-
<nav>
22-
<a href="blog.html">Blog</a>
23-
<a href="#">Challenges</a>
24-
<a href="#">Flexbox</a>
25-
<a href="#">CSS Grid</a>
26-
</nav>
27-
</header>
28-
29-
<article>
30-
<header>
31-
<h2>The Basic Language of the Web: HTML</h2>
32-
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-
/>
19+
<div class="container">
20+
<header class="main-header">
21+
<h1>📘 The Code Magazine</h1>
22+
23+
<nav>
24+
<a href="blog.html">Blog</a>
25+
<a href="#">Challenges</a>
26+
<a href="#">Flexbox</a>
27+
<a href="#">CSS Grid</a>
28+
</nav>
4829
</header>
4930

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

0 commit comments

Comments
 (0)