Skip to content

Commit b37ce33

Browse files
biigbiig
committed
section 4 starter
1 parent 7d49051 commit b37ce33

File tree

12 files changed

+615
-0
lines changed

12 files changed

+615
-0
lines changed

‎my_solution/04-CSS-Layouts/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>

‎my_solution/04-CSS-Layouts/content.txt

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
📘 The Code Magazine
2+
3+
The Basic Language of the Web: HTML
4+
5+
Posted by Laura Jones on Monday, June 21st 2027
6+
7+
All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.
8+
9+
In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.
10+
11+
What is HTML?
12+
13+
HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
14+
15+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites.
16+
17+
In HTML, each element is made up of 3 parts:
18+
19+
The opening tag
20+
The closing tag
21+
The actual element
22+
You can learn more at the MDN Web Docs.
23+
24+
Why should you learn HTML?
25+
26+
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
27+
28+
To be able to use the fundamental web dev language
29+
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
30+
To build web applications
31+
To impress friends
32+
To have fun 😃
33+
34+
Hopefully you learned something new here. See you next time!

‎my_solution/04-CSS-Layouts/css-grid.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
34+
35+
.container--1 {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 40px;
40+
margin: 40px;
41+
42+
/* CSS GRID */
43+
}
44+
45+
.container--2 {
46+
/* STARTER */
47+
font-family: sans-serif;
48+
background-color: black;
49+
font-size: 40px;
50+
margin: 100px;
51+
52+
width: 1000px;
53+
height: 600px;
54+
55+
/* CSS GRID */
56+
}
57+
</style>
58+
</head>
59+
<body>
60+
<div class="container--1">
61+
<div class="el el--1">(1) HTML</div>
62+
<div class="el el--2">(2) and</div>
63+
<div class="el el--3">(3) CSS</div>
64+
<div class="el el--4">(4) are</div>
65+
<div class="el el--5">(5) amazing</div>
66+
<div class="el el--6">(6) languages</div>
67+
<div class="el el--7">(7) to</div>
68+
<div class="el el--8">(8) learn</div>
69+
</div>
70+
71+
<div class="container--2">
72+
<div class="el el--1">(1)</div>
73+
<div class="el el--3">(3)</div>
74+
<div class="el el--4">(4)</div>
75+
<div class="el el--5">(5)</div>
76+
<div class="el el--6">(6)</div>
77+
<div class="el el--7">(7)</div>
78+
</div>
79+
</body>
80+
</html>

‎my_solution/04-CSS-Layouts/flexbox.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
}
28+
.el--7 {
29+
background-color: yellow;
30+
}
31+
.el--8 {
32+
background-color: crimson;
33+
}
34+
35+
.container {
36+
/* STARTER */
37+
font-family: sans-serif;
38+
background-color: #ddd;
39+
font-size: 40px;
40+
margin: 40px;
41+
42+
/* FLEXBOX */
43+
}
44+
</style>
45+
</head>
46+
<body>
47+
<div class="container">
48+
<div class="el el--1">HTML</div>
49+
<div class="el el--2">and</div>
50+
<div class="el el--3">CSS</div>
51+
<div class="el el--4">are</div>
52+
<div class="el el--5">amazing</div>
53+
<div class="el el--6">languages</div>
54+
<div class="el el--7">to</div>
55+
<div class="el el--8">learn</div>
56+
</div>
57+
</body>
58+
</html>

‎my_solution/04-CSS-Layouts/img/challenges.jpg

120 KB
Loading

‎my_solution/04-CSS-Layouts/img/laura-jones.jpg

6.64 KB
Loading

‎my_solution/04-CSS-Layouts/img/post-img.jpg

53.4 KB
Loading

‎my_solution/04-CSS-Layouts/img/related-1.jpg

50.2 KB
Loading

‎my_solution/04-CSS-Layouts/img/related-2.jpg

33 KB
Loading

‎my_solution/04-CSS-Layouts/img/related-3.jpg

43.5 KB
Loading

‎my_solution/04-CSS-Layouts/index.html

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

0 commit comments

Comments
 (0)