Skip to content

Commit e328f73

Browse files
mirmak4mirmak4
committed
Converted my first ever flexbox layout from previous lectures, into my first ever css grid layout from this lecture.
1 parent 2fd33b6 commit e328f73

File tree

2 files changed

+178
-155
lines changed

2 files changed

+178
-155
lines changed

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

Lines changed: 149 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -30,159 +30,158 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
</header>
3232

33-
<div class="post-container">
34-
<article class="post-body">
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-
/>
45-
46-
<p class="author">
47-
Posted by <strong>Laura Jones</strong> on
48-
Monday, June 21st 2027
49-
</p>
50-
</div>
33+
<!-- ONLY NECESSARY FOR FLEXBOX -->
34+
<!-- <div class="post-container"> -->
35+
<article class="post-body">
36+
<header class="post-header">
37+
<h2>The Basic Language of the Web: HTML</h2>
38+
39+
<div class="author-box">
40+
<img
41+
src="img/laura-jones.jpg"
42+
alt="Headshot of Laura Jones"
43+
height="50"
44+
width="50"
45+
/>
46+
47+
<p class="author">
48+
Posted by <strong>Laura Jones</strong> on Monday,
49+
June 21st 2027
50+
</p>
51+
</div>
52+
53+
<img
54+
src="img/post-img.jpg"
55+
alt="HTML code on a screen"
56+
width="500"
57+
height="200"
58+
class="post-img"
59+
/>
60+
<button>❤️ Like</button>
61+
</header>
62+
63+
<p>
64+
All modern websites and web applications are built using
65+
three
66+
<em>fundamental</em>
67+
technologies: HTML, CSS and JavaScript. These are the
68+
languages of the web.
69+
</p>
70+
71+
<p>
72+
In this post, let's focus on HTML. We will learn what HTML
73+
is all about, and why you too should learn it.
74+
</p>
75+
76+
<h3>What is HTML?</h3>
77+
<p>
78+
HTML stands for
79+
<strong>H</strong>yper<strong>T</strong>ext
80+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a
81+
markup language that web developers use to structure and
82+
describe the content of a webpage (not a programming
83+
language).
84+
</p>
85+
<p>
86+
HTML consists of elements that describe different types of
87+
content: paragraphs, links, headings, images, video, etc.
88+
Web browsers understand HTML and render HTML code as
89+
websites.
90+
</p>
91+
<p>In HTML, each element is made up of 3 parts:</p>
92+
93+
<ol>
94+
<li class="first-li">The opening tag</li>
95+
<li>The closing tag</li>
96+
<li>The actual element</li>
97+
</ol>
98+
99+
<p>
100+
You can learn more at
101+
<a
102+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
103+
target="_blank"
104+
>MDN Web Docs</a
105+
>.
106+
</p>
107+
108+
<h3>Why should you learn HTML?</h3>
51109

110+
<p>
111+
There are countless reasons for learning the fundamental
112+
language of the web. Here are 5 of them:
113+
</p>
114+
115+
<ul>
116+
<li class="first-li">
117+
To be able to use the fundamental web dev language
118+
</li>
119+
<li>
120+
To hand-craft beautiful websites instead of relying on
121+
tools like Worpress or Wix
122+
</li>
123+
<li>To build web applications</li>
124+
<li>To impress friends</li>
125+
<li>To have fun 😃</li>
126+
</ul>
127+
128+
<p>
129+
Hopefully you learned something new here. See you next time!
130+
</p>
131+
</article>
132+
133+
<aside class="related-posts">
134+
<h4>Related posts</h4>
135+
136+
<ul class="related-items">
137+
<li class="related-post">
52138
<img
53-
src="img/post-img.jpg"
54-
alt="HTML code on a screen"
55-
width="500"
56-
height="200"
57-
class="post-img"
139+
src="img/related-1.jpg"
140+
alt="Person programming"
141+
width="75"
142+
height="75"
58143
/>
59-
<button>❤️ Like</button>
60-
</header>
61-
62-
<p>
63-
All modern websites and web applications are built using
64-
three
65-
<em>fundamental</em>
66-
technologies: HTML, CSS and JavaScript. These are the
67-
languages of the web.
68-
</p>
69-
70-
<p>
71-
In this post, let's focus on HTML. We will learn what
72-
HTML is all about, and why you too should learn it.
73-
</p>
74-
75-
<h3>What is HTML?</h3>
76-
<p>
77-
HTML stands for
78-
<strong>H</strong>yper<strong>T</strong>ext
79-
<strong>M</strong>arkup <strong>L</strong>anguage. It's
80-
a markup language that web developers use to structure
81-
and describe the content of a webpage (not a programming
82-
language).
83-
</p>
84-
<p>
85-
HTML consists of elements that describe different types
86-
of content: paragraphs, links, headings, images, video,
87-
etc. Web browsers understand HTML and render HTML code
88-
as websites.
89-
</p>
90-
<p>In HTML, each element is made up of 3 parts:</p>
91-
92-
<ol>
93-
<li class="first-li">The opening tag</li>
94-
<li>The closing tag</li>
95-
<li>The actual element</li>
96-
</ol>
97-
98-
<p>
99-
You can learn more at
100-
<a
101-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
102-
target="_blank"
103-
>MDN Web Docs</a
104-
>.
105-
</p>
106-
107-
<h3>Why should you learn HTML?</h3>
108-
109-
<p>
110-
There are countless reasons for learning the fundamental
111-
language of the web. Here are 5 of them:
112-
</p>
113-
114-
<ul>
115-
<li class="first-li">
116-
To be able to use the fundamental web dev language
117-
</li>
118-
<li>
119-
To hand-craft beautiful websites instead of relying
120-
on tools like Worpress or Wix
121-
</li>
122-
<li>To build web applications</li>
123-
<li>To impress friends</li>
124-
<li>To have fun 😃</li>
125-
</ul>
126-
127-
<p>
128-
Hopefully you learned something new here. See you next
129-
time!
130-
</p>
131-
</article>
132-
133-
<aside class="related-posts">
134-
<h4>Related posts</h4>
135-
136-
<ul class="related-items">
137-
<li class="related-post">
138-
<img
139-
src="img/related-1.jpg"
140-
alt="Person programming"
141-
width="75"
142-
height="75"
143-
/>
144-
<div>
145-
<a href="#" class="related-link"
146-
>How to Learn Web Development</a
147-
>
148-
<p class="related-author">
149-
By Jonas Schmedtmann
150-
</p>
151-
</div>
152-
</li>
153-
<li class="related-post">
154-
<img
155-
src="img/related-2.jpg"
156-
alt="Lightning"
157-
width="75"
158-
height="75"
159-
/>
160-
<div>
161-
<a href="#" class="related-link"
162-
>The Unknown Powers of CSS</a
163-
>
164-
<p class="related-author">By Jim Dillon</p>
165-
</div>
166-
</li>
167-
<li class="related-post">
168-
<img
169-
src="img/related-3.jpg"
170-
alt="JavaScript code on a screen"
171-
width="75"
172-
height="75"
173-
/>
174-
<div>
175-
<a href="#" class="related-link"
176-
>Why JavaScript is Awesome</a
177-
>
178-
<p class="related-author">By Matilda</p>
179-
</div>
180-
</li>
181-
</ul>
182-
</aside>
183-
</div>
184-
185-
<footer>
144+
<div>
145+
<a href="#" class="related-link"
146+
>How to Learn Web Development</a
147+
>
148+
<p class="related-author">By Jonas Schmedtmann</p>
149+
</div>
150+
</li>
151+
<li class="related-post">
152+
<img
153+
src="img/related-2.jpg"
154+
alt="Lightning"
155+
width="75"
156+
height="75"
157+
/>
158+
<div>
159+
<a href="#" class="related-link"
160+
>The Unknown Powers of CSS</a
161+
>
162+
<p class="related-author">By Jim Dillon</p>
163+
</div>
164+
</li>
165+
<li class="related-post">
166+
<img
167+
src="img/related-3.jpg"
168+
alt="JavaScript code on a screen"
169+
width="75"
170+
height="75"
171+
/>
172+
<div>
173+
<a href="#" class="related-link"
174+
>Why JavaScript is Awesome</a
175+
>
176+
<p class="related-author">By Matilda</p>
177+
</div>
178+
</li>
179+
</ul>
180+
</aside>
181+
<!-- </div> -->
182+
<!-- ONLY NECESSARY FOR FLEXBOX -->
183+
184+
<footer class="copyright">
186185
<p id="copyright" class="copyright text">
187186
Copyright &copy; 2027 by The Code Magazine.
188187
</p>

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

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -295,10 +295,6 @@ nav p {
295295
margin-top: 40px;
296296
}
297297

298-
.related-posts {
299-
flex: 0 0 300px;
300-
}
301-
302298
.related-author {
303299
/* margin-top: 15px; */
304300
margin-bottom: 0;
@@ -315,6 +311,8 @@ nav p {
315311
display: block;
316312
}
317313

314+
/* FLEXBOX APPROACH */
315+
/*
318316
.post-container {
319317
display: flex;
320318
gap: 75px;
@@ -323,7 +321,33 @@ nav p {
323321
}
324322
325323
.post-body {
326-
/* flex-grow: 5; */
327324
flex: 1;
328325
margin-bottom: 0;
329326
}
327+
328+
.related-posts {
329+
flex: 0 0 300px;
330+
}
331+
*/
332+
333+
/* CSS GRID APPROACH */
334+
.container {
335+
display: grid;
336+
/* grid-template-rows: 1fr 1fr 1fr; */
337+
grid-template-columns: 825fr 300fr;
338+
row-gap: 25px;
339+
column-gap: 75px;
340+
}
341+
342+
.main-header {
343+
grid-column: 1 / -1;
344+
grid-row: 1 / 2;
345+
}
346+
347+
.copyright {
348+
grid-column: 1 / -1;
349+
}
350+
351+
.related-posts {
352+
align-self: start;
353+
}

0 commit comments

Comments
 (0)