Skip to content

Commit ae446ad

Browse files
kfoolablekfoolable
committed
Moving on to layouts: flexbox and css grid
1 parent 21feedc commit ae446ad

File tree

3 files changed

+331
-146
lines changed

3 files changed

+331
-146
lines changed

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 143 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="stylesheet" href="style.css" />
6+
<script defer src="script.js"></script>
67
<title>The Basic Language of the Web: HTML</title>
78
</head>
89

@@ -16,142 +17,153 @@ <h5>The Basic Language of the Web: HTML</h5>
1617
<h6>The Basic Language of the Web: HTML</h6>
1718
-->
1819

19-
<header class="main-header">
20-
<h1>📘 The Code Magazine</h1>
21-
22-
<nav>
23-
<!-- Inheritance example -->
24-
<!-- <strong>This is the navigation</strong> -->
25-
<a href="blog.html">Blog</a>
26-
<a href="#">Challenges</a>
27-
<a href="#">Flexbox</a>
28-
<a href="#">CSS Grid</a>
29-
</nav>
30-
</header>
31-
32-
<article>
33-
<header>
34-
<h2>The Basic Language of the Web: HTML</h2>
35-
36-
<img
37-
src="img/laura-jones.jpg"
38-
alt="Headshot of Laura Jones"
39-
height="50"
40-
width="50"
41-
/>
42-
43-
<p id="author">
44-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
45-
</p>
46-
47-
<img
48-
src="img/post-img.jpg"
49-
alt="HTML code on a screen"
50-
width="500"
51-
height="200"
52-
/>
20+
<div class="container">
21+
<header class="main-header">
22+
<h1>📘 The Code Magazine</h1>
23+
24+
<nav>
25+
<!-- Inheritance example -->
26+
<!-- <strong>This is the navigation</strong> -->
27+
<a href="blog.html">Blog</a>
28+
<a href="#">Challenges</a>
29+
<a href="#">Flexbox</a>
30+
<a href="#">CSS Grid</a>
31+
</nav>
5332
</header>
5433

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

‎starter/03-CSS-Fundamentals/script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
"use strict";

0 commit comments

Comments
 (0)