Skip to content

Commit 5cd2a81

Browse files
diyidundiyidun
committed
October 17
1 parent b07eeb7 commit 5cd2a81

File tree

11 files changed

+391
-183
lines changed

11 files changed

+391
-183
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>BLOG</title>
9+
</head>
10+
11+
<body>
12+
<h2>BLOG</h2>
13+
<a href="index.html">Home</a>
14+
15+
</body>
16+
17+
</html>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<article>
13+
<h2>Converse Chuck Taylor All Star Low Top</h2>
14+
<img src="../img/challenges.jpg" alt="Converse Shoes" width="250" height="250">
15+
16+
<p><strong>$65.00</strong></p>
17+
<p>Free shipping</p>
18+
<p>Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple</p>
19+
20+
<a href="https://www.converse.com.tw/" target="_blank">More information &RightArrow;</a>
21+
22+
<h3>Product details</h3>
23+
<ul>
24+
<li>
25+
Lightweight, durable canvas sneaker
26+
</li>
27+
<li>
28+
Lightly padded footbed for added comfort
29+
</li>
30+
<li>
31+
Iconic Chuck Taylor ankle patch
32+
</li>
33+
</ul>
34+
<button>Add to cart</button>
35+
</article>
36+
37+
</body>
38+
39+
</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: 99 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -16,57 +16,105 @@ <h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
1818

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

71119
</body>
72120

0 commit comments

Comments
 (0)