0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Heading with description, part 2</h2>
5
</ul><h2>Heading with description, part 2</h2>
6
<p>Now let’s check how our layout works if we add a bit more text.</p>
6
<p>Now let’s check how our layout works if we add a bit more text.</p>
7
<p>If the content overflows, configure the container to overflow the flex items onto a new line.</p>
7
<p>If the content overflows, configure the container to overflow the flex items onto a new line.</p>
8
<h2>Comments</h2>
8
<h2>Comments</h2>
9
<ul><li>index.html</li>
9
<ul><li>index.html</li>
10
<li>style.css</li>
10
<li>style.css</li>
11
</ul><p>HTML</p>
11
</ul><p>HTML</p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Heading with description, part 2</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Muffin against flexboxes</span> <span class="card-title-note">A coming-of-age story</span> </h1> <p>Over the course of his long career as a front-end web developer, Muffin has seen a lot of confusing solutions…</p> </section> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Muffin loves flexboxes</span> <span class="card-title-note">A success story</span> </h1> <p>It has been hard-going learning all of the ins and outs of flexboxes, but look at the new capabilities that Muffin has access to thanks to this “flexible” layout…</p> </section> </body> </html></p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Heading with description, part 2</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Muffin against flexboxes</span> <span class="card-title-note">A coming-of-age story</span> </h1> <p>Over the course of his long career as a front-end web developer, Muffin has seen a lot of confusing solutions…</p> </section> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Muffin loves flexboxes</span> <span class="card-title-note">A success story</span> </h1> <p>It has been hard-going learning all of the ins and outs of flexboxes, but look at the new capabilities that Muffin has access to thanks to this “flexible” layout…</p> </section> </body> </html></p>
13
<p>CSS</p>
13
<p>CSS</p>
14
<p>.card { margin-bottom: 20px; line-height: 1.3; } .card-title { display: flex; align-items: flex-end; margin-top: 0; } .card-title span { border: 1px solid #999999; background-color: #c8dcff; } .card-title-main { flex-grow: 1; }</p>
14
<p>.card { margin-bottom: 20px; line-height: 1.3; } .card-title { display: flex; align-items: flex-end; margin-top: 0; } .card-title span { border: 1px solid #999999; background-color: #c8dcff; } .card-title-main { flex-grow: 1; }</p>
15
<p>Thanks! We’ll fix everything at once!</p>
15
<p>Thanks! We’ll fix everything at once!</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
17
<p>You’ve gone to a different page</p>
17
<p>You’ve gone to a different page</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
19
<p>100%</p>
19
<p>100%</p>
20
<ol><li>Replace the text Muffin loves flexboxes with Instructor Muffin and the amazing flexbox,</li>
20
<ol><li>Replace the text Muffin loves flexboxes with Instructor Muffin and the amazing flexbox,</li>
21
<li>and then configure flex items to overflow onto a new line for the .card-title block.</li>
21
<li>and then configure flex items to overflow onto a new line for the .card-title block.</li>
22
<li>Remove the frame and background color from the .card-title child spans.</li>
22
<li>Remove the frame and background color from the .card-title child spans.</li>
23
</ol>
23
</ol>