Skip to content

Commit 23c9f1b

Browse files
committed
HTML fundamentals
1 parent 10de6bc commit 23c9f1b

File tree

9 files changed

+177
-0
lines changed

9 files changed

+177
-0
lines changed
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+
<h2>BLOG</h2>
8+
<a href="index.html">Back to home</a>
9+
</body>
10+
</html>
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lan="en">
4+
<meta charest="UTF-8" />
5+
<title>Challenge 2</title>
6+
</head>
7+
<body>
8+
<article>
9+
<h2>Converse Chuck Taylor All Star Low Top</h2>
10+
<img
11+
src="img/challenges.jpg"
12+
alt="Converse shooses"
13+
with="250"
14+
height="250"
15+
/>
16+
<p><strong>$65.00</strong></p>
17+
<p>Free shipping</p>
18+
<p>
19+
Ready to dress up or down. these classic canvas Chucks are an everyday
20+
wardrobe staple.
21+
</p>
22+
<a href="#">More infromation &rarr; </a>
23+
<h3>Product details</h3>
24+
<ul>
25+
<li>Lightweight, durable canvas sneaker</li>
26+
<li>Light padded footbed for added confort</li>
27+
<li>Iconic Chuck Taylor anke patch</li>
28+
</ul>
29+
<button>Add to cart</button>
30+
</article>
31+
</body>
32+
</html>
Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charest="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+
31+
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
32+
33+
<img
34+
src="img/post-img.jpg"
35+
alt="HTML code on a screen"
36+
width="500"
37+
height="200"
38+
/>
39+
</header>
40+
41+
<p>
42+
All modern websites and web applications are built using three
43+
<em>fundamental</em>
44+
technologies: HTML, CSS and JavaScript. These are the languages of the
45+
web.
46+
</p>
47+
48+
<p>
49+
In this post, let's focus on HTML. We will learn what HTML is all about,
50+
and why you too should learn it.
51+
</p>
52+
53+
<h3>What is HTML?</h3>
54+
<p>
55+
HTML stands for <strong>H</strong>yper<strong>T</strong>text
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+
<p>
61+
HTML consists of elements that describe different types of content:
62+
paragraphs, links, headings, images, video, etc. Web browsers understand
63+
HTML and render HTML code as websites.
64+
</p>
65+
66+
<p>HTML, each element is made up of 3 parts:</p>
67+
<ol>
68+
<li>The opening tag</li>
69+
<li>The closing tag</li>
70+
<li>The actual element</li>
71+
</ol>
72+
<p>
73+
You can learn more at
74+
<a href="https://developer.mozilla.org/en-US/" target="_blank"
75+
>MDN Web Docs</a
76+
>.
77+
</p>
78+
79+
<h3>Why should you learn HTML?</h3>
80+
<p>
81+
There are countless reasons for learning the fundamental language of the
82+
web. Here are 5 of them:
83+
</p>
84+
<ul>
85+
<li>To be able to use the fundamental web dev language</li>
86+
<li>
87+
To hand-craft beautiful websites instead of relying on tools like
88+
Worpress or Wix
89+
</li>
90+
<li>To build web applications</li>
91+
<li>To impress friends</li>
92+
<li>To have fun 😃</li>
93+
</ul>
94+
<p>Hopefully you learned something new here. See you next time!</p>
95+
</article>
96+
97+
<aside>
98+
<h4>Related pods</h4>
99+
<ul>
100+
<li>
101+
<img
102+
src="img/related-1.jpg"
103+
alt="A person programming"
104+
width="50"
105+
height="50"
106+
/>
107+
<a href="#">How to Learn Web Development</a>
108+
<p>By Jonas Schmedtman</p>
109+
</li>
110+
<li>
111+
<img
112+
src="img/related-2.jpg"
113+
alt="A lightning"
114+
width="50"
115+
height="50"
116+
/>
117+
<a href="#">The Unknown Powers of CSS</a>
118+
<p>By Jim Dillon</p>
119+
</li>
120+
<li>
121+
<img
122+
src="img/related-3.jpg"
123+
alt="Code image"
124+
width="50"
125+
height="50"
126+
/>
127+
<a href="#">Why JavaScript is Awesome</a>
128+
<p>By Matilda</p>
129+
</li>
130+
</ul>
131+
</aside>
132+
133+
<footer>Copyright &copy; 2027 by the Code Magazine.</footer>
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)