Skip to content

Commit dbeec61

Browse files
marcumamarcuma
committed
after challenge 2
1 parent c545dc9 commit dbeec61

File tree

12 files changed

+226
-35
lines changed

12 files changed

+226
-35
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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>Blog</title>
8+
</head>
9+
<body>
10+
<h1>Blog</h1>
11+
</body>
12+
</html>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>Challenges</title>
8+
</head>
9+
<body>
10+
<nav>
11+
<a href="../index.html">Home</a>
12+
</nav>
13+
<h1>Challenges</h1>
14+
<article>
15+
<ol>
16+
<li><a href="shoes.html">Chuck Tayloer Ecommerce Item Page</a></li>
17+
</ol>
18+
</article>
19+
</body>
20+
</html>

‎starter/02-HTML-Fundamentals/challenges/shoes.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Chucks</title>
6+
</head>
7+
<body>
8+
<nav>
9+
<a href="../index.html">Home</a>
10+
<a href="index.html">Challenges</a>
11+
</nav>
12+
13+
<article>
14+
<h1>Converse Chuck Taylor All Start Low Top</h1>
15+
<img
16+
src="../images/challenges.jpg"
17+
height="250"
18+
width="250"
19+
alt="an image of black canvas shoes"
20+
/>
21+
<h3>$65.00</h3>
22+
<p>Free Shipping</p>
23+
<p>
24+
Ready to dress up or down, these classic canvas Chucks are an everyday
25+
wardrobe staple.
26+
</p>
27+
<a href="#">More information &rarr;</a>
28+
<h2>Production Details</h2>
29+
<ul>
30+
<li>Lightweight, durable canvas sneaker</li>
31+
<li>Lightly padded footbed for added comfort</li>
32+
<li>Iconic Chuck Taylor ankle patch</li>
33+
</ul>
34+
35+
<button>Add to cart</button>
36+
</article>
37+
</body>
38+
</html>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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>CSS Grid</title>
8+
</head>
9+
<body>
10+
<h1>CSS Grid</h1>
11+
</body>
12+
</html>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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>Flexbox</title>
8+
</head>
9+
<body>
10+
<h1>Flexbox</h1>
11+
</body>
12+
</html>

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

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

0 commit comments

Comments
 (0)