Skip to content

Commit 002a1ff

Browse files
author
Dhruv Mohindru
committed
Working through CSS grid
1 parent 43d3c2a commit 002a1ff

File tree

3 files changed

+166
-81
lines changed

3 files changed

+166
-81
lines changed

‎starter/04-CSS-Layouts/css-grid.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,22 @@
3636
/* STARTER */
3737
font-family: sans-serif;
3838
background-color: #ddd;
39-
font-size: 40px;
39+
font-size: 30px;
4040
margin: 40px;
4141

4242
/* CSS GRID */
43+
display: grid;
44+
grid-template-columns: 200px 200px 100px 100px;
45+
grid-template-rows: 300px 200px;
46+
47+
/* gap: 30px; */
48+
column-gap: 30px;
49+
row-gap: 60px;
4350
}
4451

4552
.container--2 {
53+
display: none;
54+
4655
/* STARTER */
4756
font-family: sans-serif;
4857
background-color: black;

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

Lines changed: 88 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -30,85 +30,94 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
<!-- <div class="clear"></div> -->
3232
</header>
33-
34-
<article>
35-
<header class="post-header">
36-
<h2>The Basic Language of the Web: HTML</h2>
37-
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" />
43-
<button>❤️ Like</button>
44-
</header>
45-
46-
<p>
47-
All modern websites and web applications are built using three
48-
<em>fundamental</em>
49-
technologies: HTML, CSS and JavaScript. These are the languages of the web.
50-
</p>
51-
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>
53-
54-
<h3>What is HTML?</h3>
55-
<p>
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).
58-
</p>
59-
<p>
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.
62-
</p>
63-
<p>In HTML, each element is made up of 3 parts:</p>
64-
65-
<ol>
66-
<li class="first-li">The opening tag</li>
67-
<li>The closing tag</li>
68-
<li>The actual element</li>
69-
</ol>
70-
71-
<p>
72-
You can learn more at
73-
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>.
74-
</p>
75-
76-
<h3>Why should you learn HTML?</h3>
77-
78-
<p>There are countless reasons for learning the fundamental language of the web. Here are 5 of them:</p>
79-
80-
<ul>
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>
83-
<li>To build web applications</li>
84-
<li>To impress friends</li>
85-
<li>To have fun 😃</li>
86-
</ul>
87-
88-
<p>Hopefully you learned something new here. See you next time!</p>
89-
</article>
90-
91-
<aside>
92-
<h4>Related posts</h4>
93-
94-
<ul class="related">
95-
<li>
96-
<img src="img/related-1.jpg" alt="Person programming" width="75" height="75" />
97-
<a href="#">How to Learn Web Development</a>
98-
<p class="related-author">By Jonas Schmedtmann</p>
99-
</li>
100-
<li>
101-
<img src="img/related-2.jpg" alt="Lightning" width="75" height="75" />
102-
<a href="#">The Unknown Powers of CSS</a>
103-
<p class="related-author">By Jim Dillon</p>
104-
</li>
105-
<li>
106-
<img src="img/related-3.jpg" alt="JavaScript code on a screen" width="75" height="75" />
107-
<a href="#">Why JavaScript is Awesome</a>
108-
<p class="related-author">By Matilda</p>
109-
</li>
110-
</ul>
111-
</aside>
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 src="img/laura-jones.jpg" alt="Headshot of Laura Jones" height="50" width="50" class="author-img" />
40+
41+
<p id="author" class="author">Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
42+
</div>
43+
44+
<img src="img/post-img.jpg" alt="HTML code on a screen" width="500" height="200" class="post-img" />
45+
<button>❤️ Like</button>
46+
</header>
47+
48+
<p>
49+
All modern websites and web applications are built using three
50+
<em>fundamental</em>
51+
technologies: HTML, CSS and JavaScript. These are the languages of the web.
52+
</p>
53+
54+
<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>
55+
56+
<h3>What is HTML?</h3>
57+
<p>
58+
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
59+
web developers use to structure and describe the content of a webpage (not a programming language).
60+
</p>
61+
<p>
62+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers
63+
understand HTML and render HTML code as websites.
64+
</p>
65+
<p>In HTML, each element is made up of 3 parts:</p>
66+
67+
<ol>
68+
<li class="first-li">The opening tag</li>
69+
<li>The closing tag</li>
70+
<li>The actual element</li>
71+
</ol>
72+
73+
<p>
74+
You can learn more at
75+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>.
76+
</p>
77+
78+
<h3>Why should you learn HTML?</h3>
79+
80+
<p>There are countless reasons for learning the fundamental language of the web. Here are 5 of them:</p>
81+
82+
<ul>
83+
<li class="first-li">To be able to use the fundamental web dev language</li>
84+
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
85+
<li>To build web applications</li>
86+
<li>To impress friends</li>
87+
<li>To have fun 😃</li>
88+
</ul>
89+
90+
<p>Hopefully you learned something new here. See you next time!</p>
91+
</article>
92+
93+
<aside>
94+
<h4>Related posts</h4>
95+
96+
<ul class="related">
97+
<li class="related-post">
98+
<img src="img/related-1.jpg" alt="Person programming" width="75" height="75" />
99+
<div>
100+
<a href="#" class="related-link">How to Learn Web Development</a>
101+
<p class="related-author">By Jonas Schmedtmann</p>
102+
</div>
103+
</li>
104+
<li class="related-post">
105+
<img src="img/related-2.jpg" alt="Lightning" width="75" height="75" />
106+
<div>
107+
<a href="#" class="related-link">The Unknown Powers of CSS</a>
108+
<p class="related-author">By Jim Dillon</p>
109+
</div>
110+
</li>
111+
<li class="related-post">
112+
<img src="img/related-3.jpg" alt="JavaScript code on a screen" width="75" height="75" />
113+
<div>
114+
<a href="#" class="related-link">Why JavaScript is Awesome</a>
115+
<p class="related-author">By Matilda</p>
116+
</div>
117+
</li>
118+
</ul>
119+
</aside>
120+
</div>
112121

113122
<footer>
114123
<p id="copyright" class="copyright text">Copyright &copy; 2027 by The Code Magazine.</p>

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

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,6 @@ nav a:link {
197197
display: block; */
198198

199199
margin-right: 30px;
200-
margin-top: 10px;
201200
display: inline-block;
202201
}
203202

@@ -267,6 +266,8 @@ nav p {
267266
} */
268267

269268
/* FLOATS */
269+
270+
/*
270271
.author-img {
271272
float: left;
272273
margin-bottom: 20px;
@@ -278,6 +279,8 @@ nav p {
278279
margin-left: 20px;
279280
}
280281
282+
283+
281284
h1 {
282285
float: left;
283286
}
@@ -309,3 +312,67 @@ aside {
309312
footer {
310313
clear: both;
311314
}
315+
*/
316+
317+
/* FLEXBOX */
318+
319+
.main-header {
320+
display: flex;
321+
align-items: center;
322+
justify-content: space-between;
323+
}
324+
325+
.author-box {
326+
display: flex;
327+
align-items: center;
328+
margin-bottom: 15px;
329+
}
330+
331+
.author {
332+
margin-bottom: 0;
333+
margin-left: 15px;
334+
}
335+
336+
.related-post {
337+
display: flex;
338+
align-items: center;
339+
gap: 20px;
340+
margin-bottom: 30px;
341+
}
342+
343+
.related-link:link {
344+
font-size: 17px;
345+
font-weight: bold;
346+
font-style: normal;
347+
margin-bottom: 5px;
348+
display: block;
349+
}
350+
351+
.related-author {
352+
margin-bottom: 0;
353+
font-size: 14px;
354+
font-weight: normal;
355+
font-style: italic;
356+
}
357+
358+
.row {
359+
display: flex;
360+
align-items: flex-start;
361+
gap: 75px;
362+
margin-bottom: 60px;
363+
}
364+
365+
article {
366+
flex: 1;
367+
margin-bottom: 0;
368+
}
369+
370+
aside {
371+
/*
372+
DEFAULTS
373+
flex-grow: 0;
374+
flex-shrink: 1;
375+
flex-basis: auto;
376+
*/
377+
flex: 0 0 300px;
378+
}

0 commit comments

Comments
 (0)