Skip to content

Commit ac32d19

Browse files
owen-webbowen-webb
committed
section-4: Use flexbox to style major components.
1 parent 67a5f15 commit ac32d19

File tree

2 files changed

+148
-131
lines changed

2 files changed

+148
-131
lines changed

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

Lines changed: 133 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -32,140 +32,142 @@ <h1>📘 The Code Magazine</h1>
3232
<!-- <div class="clear"></div> -->
3333
</header>
3434

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

170172
<footer>
171173
<p id="copyright" class="copyright text">

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,3 +350,18 @@ footer {
350350
gap: 20px;
351351
margin-bottom: 30px;
352352
}
353+
354+
.row {
355+
align-items: flex-start;
356+
display: flex;
357+
gap: 75px;
358+
}
359+
360+
article {
361+
flex: 1;
362+
margin-bottom: 0;
363+
}
364+
365+
aside {
366+
flex: 0 0 300px;
367+
}

0 commit comments

Comments
 (0)