Skip to content

Commit 32a73f7

Browse files
quechauquechau
committed
Build a simple Flexbox Layout.
1 parent f4c8885 commit 32a73f7

File tree

2 files changed

+153
-131
lines changed

2 files changed

+153
-131
lines changed

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

Lines changed: 134 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -30,140 +30,143 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
<!-- <div class="clear"></div> -->
3232
</header>
33-
34-
<article>
35-
<header class="post-header">
36-
<h2>The Basic Language of the Web: HTML</h2>
37-
<div class="author-box">
38-
<img
39-
src="img/laura-jones.jpg"
40-
alt="Headshot of Laura Jones"
41-
height="50"
42-
width="50"
43-
class="author-img"
44-
/>
45-
46-
<p id="author" class="author">
47-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
48-
</p>
49-
</div>
50-
51-
<img
52-
src="img/post-img.jpg"
53-
alt="HTML code on a screen"
54-
width="500"
55-
height="200"
56-
class="post-img"
57-
/>
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 class="related-post">
130-
<img
131-
src="img/related-1.jpg"
132-
alt="Person programming"
133-
width="75"
134-
height="75"
135-
/>
136-
<div>
137-
<a href="#" class="related-link">How to Learn Web Development</a>
138-
<p class="related-author">By Jonas Schmedtmann</p>
33+
<div class="row">
34+
<article>
35+
<header class="post-header">
36+
<h2>The Basic Language of the Web: HTML</h2>
37+
<div class="author-box">
38+
<img
39+
src="img/laura-jones.jpg"
40+
alt="Headshot of Laura Jones"
41+
height="50"
42+
width="50"
43+
class="author-img"
44+
/>
45+
46+
<p id="author" class="author">
47+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
48+
</p>
13949
</div>
140-
</li>
141-
<li class="related-post">
142-
<img
143-
src="img/related-2.jpg"
144-
alt="Lightning"
145-
width="75"
146-
height="75"
147-
/>
148-
<div>
149-
<a href="#" class="related-link">The Unknown Powers of CSS</a>
150-
<p class="related-author">By Jim Dillon</p>
151-
</div>
152-
</li>
153-
<li class="related-post">
50+
15451
<img
155-
src="img/related-3.jpg"
156-
alt="JavaScript code on a screen"
157-
width="75"
158-
height="75"
52+
src="img/post-img.jpg"
53+
alt="HTML code on a screen"
54+
width="500"
55+
height="200"
56+
class="post-img"
15957
/>
160-
<div>
161-
<a href="#" class="related-link">Why JavaScript is Awesome</a>
162-
<p class="related-author">By Matilda</p>
163-
</div>
164-
</li>
165-
</ul>
166-
</aside>
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
65+
the 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
78+
content 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 class="related-post">
130+
<img
131+
src="img/related-1.jpg"
132+
alt="Person programming"
133+
width="75"
134+
height="75"
135+
/>
136+
<div>
137+
<a href="#" class="related-link"
138+
>How to Learn Web Development</a
139+
>
140+
<p class="related-author">By Jonas Schmedtmann</p>
141+
</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">
156+
<img
157+
src="img/related-3.jpg"
158+
alt="JavaScript code on a screen"
159+
width="75"
160+
height="75"
161+
/>
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+
</div>
167170

168171
<footer>
169172
<p id="copyright" class="copyright text">

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,3 +349,22 @@ footer {
349349
font-weight: normal;
350350
font-style: italic;
351351
}
352+
353+
.row {
354+
display: flex;
355+
align-items: flex-start;
356+
gap: 75px;
357+
margin-bottom: 60px;
358+
}
359+
360+
article {
361+
flex: 0 0 825px;
362+
margin-bottom: 0;
363+
}
364+
aside {
365+
/* DEFAULT
366+
flex-grow: 0;
367+
flex-shrink: 1;
368+
flex-basis: auto; */
369+
flex: 0 0 300px;
370+
}

0 commit comments

Comments
 (0)