Skip to content

Commit 43d3c2a

Browse files
author
Dhruv Mohindru
committed
Watching video 55
1 parent b89e210 commit 43d3c2a

File tree

3 files changed

+110
-81
lines changed

3 files changed

+110
-81
lines changed

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

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,43 @@
3636
/* STARTER */
3737
font-family: sans-serif;
3838
background-color: #ddd;
39-
font-size: 40px;
39+
font-size: 32px;
4040
margin: 40px;
4141

4242
/* FLEXBOX */
43+
display: flex;
44+
align-items: center;
45+
justify-content: flex-start;
46+
gap: 10px;
47+
}
48+
49+
.el {
50+
/*
51+
DEFAULTS
52+
flex-grow: 0;
53+
flex-shrink: 1;
54+
flex-basis: auto;
55+
*/
56+
/* flex-basis: 200px;
57+
flex-shrink: 0; */
58+
/* flex: 0 0 200px; */
59+
/* flex-grow: 1; */
60+
flex: 1;
61+
}
62+
63+
.el--1 {
64+
align-self: flex-start;
65+
/* order: 2; */
66+
/* flex-grow: 3; */
67+
}
68+
69+
.el--5 {
70+
align-self: stretch;
71+
order: 1;
72+
}
73+
74+
.el--6 {
75+
order: -1;
4376
}
4477
</style>
4578
</head>
@@ -50,9 +83,9 @@
5083
<div class="el el--3">CSS</div>
5184
<div class="el el--4">are</div>
5285
<div class="el el--5">amazing</div>
53-
<div class="el el--6">languages</div>
54-
<div class="el el--7">to</div>
55-
<div class="el el--8">learn</div>
86+
<!-- <div class="el el--6">languages</div> -->
87+
<!-- <div class="el el--7">to</div>
88+
<div class="el el--8">learn</div> -->
5689
</div>
5790
</body>
5891
</html>

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

Lines changed: 23 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -18,66 +18,47 @@ <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 clearfix">
2222
<h1>📘 The Code Magazine</h1>
2323

2424
<nav>
2525
<!-- <strong>This is the navigation</strong> -->
2626
<a href="blog.html">Blog</a>
2727
<a href="#">Challenges</a>
28-
<a href="#">Flexbox</a>
29-
<a href="#">CSS Grid</a>
28+
<a href="flexbox.html">Flexbox</a>
29+
<a href="css-grid.html">CSS Grid</a>
3030
</nav>
31+
<!-- <div class="clear"></div> -->
3132
</header>
3233

3334
<article>
3435
<header class="post-header">
3536
<h2>The Basic Language of the Web: HTML</h2>
3637

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
46-
</p>
47-
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-
/>
38+
<img src="img/laura-jones.jpg" alt="Headshot of Laura Jones" height="50" width="50" class="author-img" />
39+
40+
<p id="author" class="author">Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
41+
42+
<img src="img/post-img.jpg" alt="HTML code on a screen" width="500" height="200" class="post-img" />
5543
<button>❤️ Like</button>
5644
</header>
5745

5846
<p>
5947
All modern websites and web applications are built using three
6048
<em>fundamental</em>
61-
technologies: HTML, CSS and JavaScript. These are the languages of the
62-
web.
49+
technologies: HTML, CSS and JavaScript. These are the languages of the web.
6350
</p>
6451

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>
52+
<p>In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.</p>
6953

7054
<h3>What is HTML?</h3>
7155
<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).
56+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage. It's a markup language that
57+
web developers use to structure and describe the content of a webpage (not a programming language).
7658
</p>
7759
<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.
60+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand
61+
HTML and render HTML code as websites.
8162
</p>
8263
<p>In HTML, each element is made up of 3 parts:</p>
8364

@@ -89,28 +70,16 @@ <h3>What is HTML?</h3>
8970

9071
<p>
9172
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-
>.
73+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>.
9774
</p>
9875

9976
<h3>Why should you learn HTML?</h3>
10077

101-
<p>
102-
There are countless reasons for learning the fundamental language of
103-
the web. Here are 5 of them:
104-
</p>
78+
<p>There are countless reasons for learning the fundamental language of the web. Here are 5 of them:</p>
10579

10680
<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>
81+
<li class="first-li">To be able to use the fundamental web dev language</li>
82+
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
11483
<li>To build web applications</li>
11584
<li>To impress friends</li>
11685
<li>To have fun 😃</li>
@@ -124,42 +93,25 @@ <h4>Related posts</h4>
12493

12594
<ul class="related">
12695
<li>
127-
<img
128-
src="img/related-1.jpg"
129-
alt="Person programming"
130-
width="75"
131-
height="75"
132-
/>
96+
<img src="img/related-1.jpg" alt="Person programming" width="75" height="75" />
13397
<a href="#">How to Learn Web Development</a>
13498
<p class="related-author">By Jonas Schmedtmann</p>
13599
</li>
136100
<li>
137-
<img
138-
src="img/related-2.jpg"
139-
alt="Lightning"
140-
width="75"
141-
height="75"
142-
/>
101+
<img src="img/related-2.jpg" alt="Lightning" width="75" height="75" />
143102
<a href="#">The Unknown Powers of CSS</a>
144103
<p class="related-author">By Jim Dillon</p>
145104
</li>
146105
<li>
147-
<img
148-
src="img/related-3.jpg"
149-
alt="JavaScript code on a screen"
150-
width="75"
151-
height="75"
152-
/>
106+
<img src="img/related-3.jpg" alt="JavaScript code on a screen" width="75" height="75" />
153107
<a href="#">Why JavaScript is Awesome</a>
154108
<p class="related-author">By Matilda</p>
155109
</li>
156110
</ul>
157111
</aside>
158112

159113
<footer>
160-
<p id="copyright" class="copyright text">
161-
Copyright &copy; 2027 by The Code Magazine.
162-
</p>
114+
<p id="copyright" class="copyright text">Copyright &copy; 2027 by The Code Magazine.</p>
163115
</footer>
164116
</div>
165117
</body>

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

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/* border-top: 10px solid #1098ad; */
33
margin: 0;
44
padding: 0;
5+
box-sizing: border-box;
56
}
67

78
/* PAGE SECTIONS */
@@ -14,7 +15,7 @@ body {
1415
}
1516

1617
.container {
17-
width: 800px;
18+
width: 1200px;
1819
/* margin-left: auto;
1920
margin-right: auto; */
2021
margin: 0 auto;
@@ -48,10 +49,7 @@ aside {
4849
background-color: #f7f7f7;
4950
border-top: 5px solid #1098ad;
5051
border-bottom: 5px solid #1098ad;
51-
/* padding-top: 50px;
52-
padding-bottom: 50px; */
53-
padding: 50px 0;
54-
width: 500px;
52+
padding: 50px 40px;
5553
}
5654

5755
/* SMALLER ELEMENTS */
@@ -82,6 +80,7 @@ h4 {
8280
font-size: 20px;
8381
text-transform: uppercase;
8482
text-align: center;
83+
margin-bottom: 30px;
8584
}
8685

8786
p {
@@ -134,6 +133,7 @@ li:last-child {
134133

135134
.related {
136135
list-style: none;
136+
margin-left: 0;
137137
}
138138

139139
body {
@@ -232,7 +232,7 @@ h2 {
232232
}
233233

234234
h2::before {
235-
content: "TOP";
235+
content: 'TOP';
236236
background-color: #ffe70e;
237237
color: #444;
238238
font-size: 16px;
@@ -265,3 +265,47 @@ footer p {
265265
nav p {
266266
font-size: 18px;
267267
} */
268+
269+
/* FLOATS */
270+
.author-img {
271+
float: left;
272+
margin-bottom: 20px;
273+
}
274+
275+
.author {
276+
float: left;
277+
margin-top: 10px;
278+
margin-left: 20px;
279+
}
280+
281+
h1 {
282+
float: left;
283+
}
284+
285+
nav {
286+
float: right;
287+
}
288+
289+
.clear {
290+
clear: both;
291+
}
292+
293+
.clearfix::after {
294+
clear: both;
295+
content: '';
296+
display: block;
297+
}
298+
299+
article {
300+
width: 825px;
301+
float: left;
302+
}
303+
304+
aside {
305+
width: 300px;
306+
float: right;
307+
}
308+
309+
footer {
310+
clear: both;
311+
}

0 commit comments

Comments
 (0)