Skip to content

Commit a17a206

Browse files
lnnchaulnnchau
committed
add code for flexbox
1 parent e283a3c commit a17a206

File tree

3 files changed

+234
-126
lines changed

3 files changed

+234
-126
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,17 @@
4040
margin: 40px;
4141

4242
/* FLEXBOX */
43+
display: flex;
44+
gap: 5px;
45+
}
46+
47+
.el {
48+
/* DEFAULT */
49+
/* flex-grow: 0; /* allow grow to fill up empty space in container */
50+
/* flex-shrink: 1;
51+
flex-basis: auto; */
52+
53+
flex-basis: 100px;
4354
}
4455
</style>
4556
</head>

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

Lines changed: 135 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -24,138 +24,151 @@ <h1>📘 The Code Magazine</h1>
2424
<nav>
2525
<!-- <strong>This is the navigation</strong> -->
2626
<a href="blog.html">Blog</a>
27-
<a href="#">Challenges</a>
28-
<a href="#">Flexbox</a>
29-
<a href="#">CSS Grid</a>
27+
<a href="challenge.html">Challenges</a>
28+
<a href="flexbox.html">Flexbox</a>
29+
<a href="css-grid.html">CSS Grid</a>
3030
</nav>
3131
</header>
3232

33-
<article>
34-
<header class="post-header">
35-
<h2>The Basic Language of the Web: HTML</h2>
33+
<div class="row">
34+
<article>
35+
<header class="post-header">
36+
<h2>The Basic Language of the Web: HTML</h2>
37+
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>
3651

37-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Headshot of Laura Jones"
40-
height="50"
41-
width="50"
42-
/>
43-
44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
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
66+
the web.
4667
</p>
4768

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>
64-
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>
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>
9873

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

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

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

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+
138+
<div>
139+
<a class="related-link" href="#"
140+
>How to Learn Web Development</a
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 class="related-link" href="#">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 class="related-link" href="#">Why JavaScript is Awesome</a>
166+
<p class="related-author">By Matilda</p>
167+
</div>
168+
</li>
169+
</ul>
170+
</aside>
171+
</div>
159172
<footer>
160173
<p id="copyright" class="copyright text">
161174
Copyright &copy; 2027 by The Code Magazine.

0 commit comments

Comments
 (0)