Skip to content

Commit 883e22b

Browse files
UribouzUribouz
committed
feat: building a simple flexbox layout
1 parent 7dd9eb4 commit 883e22b

File tree

2 files changed

+161
-133
lines changed

2 files changed

+161
-133
lines changed

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

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

‎starter/04-CSS-Layouts/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ body {
2020
/* margin-left: auto;
2121
margin-right: auto; */
2222
margin: 0 auto;
23+
/* Cannot do it here */
24+
/* display: flex; */
2325
}
2426

2527
.main-header {
@@ -359,3 +361,27 @@ footer {
359361
font-weight: normal;
360362
font-style: italic;
361363
}
364+
365+
.row {
366+
align-items: flex-start;
367+
display: flex;
368+
gap: 75px;
369+
margin-bottom: 60px;
370+
}
371+
372+
article {
373+
/* * Dont use this in flex: let this element automatically calculated its size */
374+
/* flex: 0 0 825px; */
375+
376+
/* * Better use of flex: let this element automatically calculated its size */
377+
flex: 1;
378+
margin-bottom: 0px;
379+
}
380+
381+
aside {
382+
/* DEFAULTS:
383+
flex-grow: 0;
384+
flex-shrink: 1;
385+
flex-basis: auto; */
386+
flex: 0 0 300px;
387+
}

0 commit comments

Comments
 (0)