Skip to content

Commit 8797c77

Browse files
dboyliaodboyliao
committed
vid 56 done
1 parent ff92f04 commit 8797c77

File tree

3 files changed

+202
-125
lines changed

3 files changed

+202
-125
lines changed

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Flexbox</title>
88
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
914
.el--1 {
1015
background-color: blueviolet;
1116
}
@@ -14,7 +19,7 @@
1419
}
1520
.el--3 {
1621
background-color: green;
17-
height: 150px;
22+
height: 250px;
1823
}
1924
.el--4 {
2025
background-color: goldenrod;
@@ -36,10 +41,28 @@
3641
/* STARTER */
3742
font-family: sans-serif;
3843
background-color: #ddd;
39-
font-size: 40px;
44+
font-size: 34px;
4045
margin: 40px;
4146

4247
/* FLEXBOX */
48+
display: flex;
49+
align-items: flex-start;
50+
justify-content: center;
51+
gap: 10px;
52+
}
53+
54+
.el {
55+
/*
56+
flex-grow: control if the flex item can grow, it's also the weight of the width the item can occupy in the container
57+
flex-shrink: control if the flex item can shrink, it's also the weight of the shrinkage of the item
58+
flex-basis: control the size of the flex item
59+
flex: shorthand for flex-grow, flex-shrink, and flex-basis
60+
*/
61+
/* flex: <flex-grow> <flex-shrink> <flex-basis> */
62+
/* flex-grow: 0;
63+
flex-shrink: 2;
64+
flex-basis: 100px; */
65+
flex: 1;
4366
}
4467
</style>
4568
</head>

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

Lines changed: 132 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h6>The Basic Language of the Web: HTML</h6>
1818
-->
1919

2020
<div class="container">
21-
<header class="main-header">
21+
<header class="main-header flex-box">
2222
<h1>📘 The Code Magazine</h1>
2323

2424
<nav>
@@ -30,132 +30,143 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
</header>
3232

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-
class="author-img"
43-
/>
44-
45-
<p id="author" class="author">
46-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
33+
<div class="row flex-box">
34+
<article>
35+
<header class="post-header">
36+
<h2>The Basic Language of the Web: HTML</h2>
37+
38+
<div class="author-box flex-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+
<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
65+
the web.
4766
</p>
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>
6467

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>
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>
9872

99-
<h3>Why should you learn HTML?</h3>
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>
100101

101-
<p>
102-
There are countless reasons for learning the fundamental language of
103-
the web. Here are 5 of them:
104-
</p>
102+
<h3>Why should you learn HTML?</h3>
105103

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>
104+
<p>
105+
There are countless reasons for learning the fundamental language of
106+
the web. Here are 5 of them:
107+
</p>
158108

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 flex-box">
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 flex-box">
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 flex-box">
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>
159170
<footer>
160171
<p id="copyright" class="copyright text">
161172
Copyright &copy; 2027 by The Code Magazine.

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

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ nav a:link {
199199
display: block; */
200200

201201
margin-right: 30px;
202-
margin-top: 10px;
202+
/* margin-top: 10px; */
203203
display: inline-block;
204204
}
205205

@@ -269,7 +269,7 @@ nav p {
269269
} */
270270

271271
/* FLOATS */
272-
.author {
272+
/* .author {
273273
padding: 10px;
274274
}
275275
@@ -307,4 +307,47 @@ footer {
307307
308308
.related img {
309309
display: block;
310+
} */
311+
312+
/* flex */
313+
.flex-box {
314+
display: flex;
315+
}
316+
317+
.main-header {
318+
align-items: center;
319+
justify-content: space-between;
320+
}
321+
322+
.author-box {
323+
align-items: center;
324+
margin-bottom: 15px;
325+
}
326+
327+
.author {
328+
margin-bottom: 0;
329+
margin-left: 15px;
330+
}
331+
332+
.related-post {
333+
align-items: center;
334+
gap: 20px;
335+
}
336+
337+
.related-author {
338+
margin-bottom: 0;
339+
}
340+
341+
.row {
342+
gap: 75px;
343+
align-items: flex-start;
344+
}
345+
346+
article {
347+
flex: 1;
348+
margin-bottom: 0;
349+
}
350+
351+
aside {
352+
flex: 0 0 300px;
310353
}

0 commit comments

Comments
 (0)