Skip to content

Commit d0ed7b1

Browse files
UribouzUribouz
committed
feat: building a simple CSS grid layout.
1 parent c0b9e54 commit d0ed7b1

File tree

2 files changed

+168
-148
lines changed

2 files changed

+168
-148
lines changed

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

Lines changed: 135 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h6>The Basic Language of the Web: HTML</h6>
1818
-->
1919

2020
<div class="container">
21-
<header class="main-header clearfix">
21+
<header class="main-header">
2222
<h1>📘 The Code Magazine</h1>
2323

2424
<nav>
@@ -31,144 +31,143 @@ <h1>📘 The Code Magazine</h1>
3131
<!-- * Old way to clearing float problem -->
3232
<!-- <div class="clear"></div> -->
3333
</header>
34-
<div class="row">
35-
<article>
36-
<header class="post-header">
37-
<h2>The Basic Language of the Web: HTML</h2>
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>
34+
<!-- Only necessary for flex-box -->
35+
<!-- <div class="row"> -->
36+
<article>
37+
<header class="post-header">
38+
<h2>The Basic Language of the Web: HTML</h2>
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+
class="author-img"
46+
/>
47+
48+
<p id="author" class="author">
49+
Posted by <strong>Laura Jones</strong> on Monday, 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 three
65+
<em>fundamental</em>
66+
technologies: HTML, CSS and JavaScript. These are the languages of the
67+
web.
68+
</p>
69+
70+
<p>
71+
In this post, let's focus on HTML. We will learn what HTML is all
72+
about, and why you too should learn it.
73+
</p>
74+
75+
<h3>What is HTML?</h3>
76+
<p>
77+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
78+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
79+
language that web developers use to structure and describe the content
80+
of a webpage (not a programming language).
81+
</p>
82+
<p>
83+
HTML consists of elements that describe different types of content:
84+
paragraphs, links, headings, images, video, etc. Web browsers
85+
understand HTML and render HTML code as websites.
86+
</p>
87+
<p>In HTML, each element is made up of 3 parts:</p>
88+
89+
<ol>
90+
<li class="first-li">The opening tag</li>
91+
<li>The closing tag</li>
92+
<li>The actual element</li>
93+
</ol>
94+
95+
<p>
96+
You can learn more at
97+
<a
98+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
99+
target="_blank"
100+
>MDN Web Docs</a
101+
>.
102+
</p>
51103

104+
<h3>Why should you learn HTML?</h3>
105+
106+
<p>
107+
There are countless reasons for learning the fundamental language of
108+
the web. Here are 5 of them:
109+
</p>
110+
111+
<ul>
112+
<li class="first-li">
113+
To be able to use the fundamental web dev language
114+
</li>
115+
<li>
116+
To hand-craft beautiful websites instead of relying on tools like
117+
Worpress or Wix
118+
</li>
119+
<li>To build web applications</li>
120+
<li>To impress friends</li>
121+
<li>To have fun 😃</li>
122+
</ul>
123+
124+
<p>Hopefully you learned something new here. See you next time!</p>
125+
</article>
126+
127+
<aside>
128+
<h4>Related posts</h4>
129+
130+
<ul class="related">
131+
<li class="related-post">
52132
<img
53-
src="img/post-img.jpg"
54-
alt="HTML code on a screen"
55-
width="500"
56-
height="200"
57-
class="post-img"
133+
src="img/related-1.jpg"
134+
alt="Person programming"
135+
width="75"
136+
height="75"
58137
/>
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.
67-
</p>
68-
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>
73-
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>
102-
103-
<h3>Why should you learn HTML?</h3>
104-
105-
<p>
106-
There are countless reasons for learning the fundamental language of
107-
the web. Here are 5 of them:
108-
</p>
109-
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-
<div>
138-
<a href="#" class="related-link"
139-
>How to Learn Web Development</a
140-
>
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 href="#" class="related-link">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 href="#" class="related-link">Why JavaScript is Awesome</a>
166-
<p class="related-author">By Matilda</p>
167-
</div>
168-
</li>
169-
</ul>
170-
</aside>
171-
</div>
138+
<div>
139+
<a href="#" class="related-link">How to Learn Web Development</a>
140+
141+
<p class="related-author">By Jonas Schmedtmann</p>
142+
</div>
143+
</li>
144+
<li class="related-post">
145+
<img
146+
src="img/related-2.jpg"
147+
alt="Lightning"
148+
width="75"
149+
height="75"
150+
/>
151+
<div>
152+
<a href="#" class="related-link">The Unknown Powers of CSS</a>
153+
<p class="related-author">By Jim Dillon</p>
154+
</div>
155+
</li>
156+
<li class="related-post">
157+
<img
158+
src="img/related-3.jpg"
159+
alt="JavaScript code on a screen"
160+
width="75"
161+
height="75"
162+
/>
163+
<div>
164+
<a href="#" class="related-link">Why JavaScript is Awesome</a>
165+
<p class="related-author">By Matilda</p>
166+
</div>
167+
</li>
168+
</ul>
169+
</aside>
170+
<!-- </div> -->
172171
<footer>
173172
<p id="copyright" class="copyright text">
174173
Copyright &copy; 2027 by The Code Magazine.

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

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ body {
3030
padding-left: 40px;
3131
padding-right: 40px; */
3232
padding: 20px 40px;
33-
margin-bottom: 60px;
33+
/* margin-bottom: 60px; */
3434
/* height: 80px; */
3535
}
3636

@@ -40,7 +40,7 @@ nav {
4040
}
4141

4242
article {
43-
margin-bottom: 60px;
43+
/* margin-bottom: 60px; */
4444
}
4545

4646
.post-header {
@@ -361,27 +361,48 @@ footer {
361361
font-weight: normal;
362362
font-style: italic;
363363
}
364-
364+
/*
365365
.row {
366366
align-items: flex-start;
367367
display: flex;
368368
gap: 75px;
369369
margin-bottom: 60px;
370-
}
370+
} */
371371

372-
article {
373-
/* * Dont use this in flex: let this element automatically calculated its size */
374-
/* flex: 0 0 825px; */
372+
/* article {
373+
Dont use this in flex: let this element automatically calculated its size
374+
flex: 0 0 825px;
375375
376-
/* * Better use of flex: let this element automatically calculated its size */
376+
Better use of flex: let this element automatically calculated its size
377377
flex: 1;
378378
margin-bottom: 0px;
379-
}
380-
379+
} */
380+
/*
381381
aside {
382-
/* DEFAULTS:
382+
DEFAULTS:
383383
flex-grow: 0;
384384
flex-shrink: 1;
385-
flex-basis: auto; */
385+
flex-basis: auto;
386386
flex: 0 0 300px;
387+
} */
388+
389+
/* CSS Grid Layout */
390+
.container {
391+
display: grid;
392+
grid-template-columns: 1fr 300px;
393+
column-gap: 25px;
394+
row-gap: 60px;
395+
align-items: start;
396+
}
397+
398+
.main-header {
399+
grid-column: 1/-1;
400+
}
401+
402+
aside {
403+
/* align-self: start; */
404+
}
405+
406+
footer {
407+
grid-column: 1/-1;
387408
}

0 commit comments

Comments
 (0)