Skip to content

Commit 95c4b13

Browse files
andreituicuandreituicu
committed
Section 2 - HTML Fundamentals
1 parent a64c1c2 commit 95c4b13

File tree

9 files changed

+173
-0
lines changed

9 files changed

+173
-0
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Blog</title>
5+
</head>
6+
<body>
7+
<h1>Blog</h1>
8+
<a href="index.html">Home</a>
9+
</body>
10+
</html>

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

‎starter/02-HTML-Fundamentals/product-component.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<article>
2+
<h2>Converse Chuck Taylor All Star Low Top</h2>
3+
<img
4+
src="img/challenges.jpg"
5+
alt="Converse Chuck Taylor All Star Shoe"
6+
width="250"
7+
height="250"
8+
/>
9+
<p><strong>$65.00</strong></p>
10+
<p>Free Shipping</p>
11+
<p>
12+
Ready to dress up or down, these classic canvas Chucks are an everyday
13+
wardrobe staple.
14+
</p>
15+
<a href="#">More information &rarr;</a>
16+
<h3>Product details</h3>
17+
<ul>
18+
<li>Lightweight, durable canvas sneaker</li>
19+
<li>Lightly padded footbed for added comfort</li>
20+
<li>Iconic Chuck Taylor ankle patch.</li>
21+
</ul>
22+
<button>Add to cart</button>
23+
<article />
24+
</article>

0 commit comments

Comments
 (0)