Skip to content

Commit 9090900

Browse files
Tyrone-CartwrightTyrone-Cartwright
committed
Finished HTML Fundamentals
1 parent 23f0386 commit 9090900

File tree

9 files changed

+181
-0
lines changed

9 files changed

+181
-0
lines changed

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

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

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

0 commit comments

Comments
 (0)