Skip to content

Commit 5778a5c

Browse files
owen-webbowen-webb
committed
section-4: Style blog with CSS grid.
1 parent 2a41f02 commit 5778a5c

File tree

2 files changed

+163
-137
lines changed

2 files changed

+163
-137
lines changed

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

Lines changed: 133 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -32,142 +32,142 @@ <h1>📘 The Code Magazine</h1>
3232
<!-- <div class="clear"></div> -->
3333
</header>
3434

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

112+
<ul>
113+
<li class="first-li">
114+
To be able to use the fundamental web dev language
115+
</li>
116+
<li>
117+
To hand-craft beautiful websites instead of relying on tools like
118+
Worpress or Wix
119+
</li>
120+
<li>To build web applications</li>
121+
<li>To impress friends</li>
122+
<li>To have fun 😃</li>
123+
</ul>
124+
125+
<p>Hopefully you learned something new here. See you next time!</p>
126+
</article>
127+
128+
<aside>
129+
<h4>Related posts</h4>
130+
131+
<ul class="related">
132+
<li class="related-post">
54133
<img
55-
src="img/post-img.jpg"
56-
alt="HTML code on a screen"
57-
width="500"
58-
height="200"
59-
class="post-img"
134+
src="img/related-1.jpg"
135+
alt="Person programming"
136+
width="75"
137+
height="75"
60138
/>
61-
<button>❤️ Like</button>
62-
</header>
63-
64-
<p>
65-
All modern websites and web applications are built using three
66-
<em>fundamental</em>
67-
technologies: HTML, CSS and JavaScript. These are the languages of the
68-
web.
69-
</p>
70-
71-
<p>
72-
In this post, let's focus on HTML. We will learn what HTML is all
73-
about, and why you too should learn it.
74-
</p>
75-
76-
<h3>What is HTML?</h3>
77-
<p>
78-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
79-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
80-
language that web developers use to structure and describe the content
81-
of a webpage (not a programming language).
82-
</p>
83-
<p>
84-
HTML consists of elements that describe different types of content:
85-
paragraphs, links, headings, images, video, etc. Web browsers
86-
understand HTML and render HTML code as websites.
87-
</p>
88-
<p>In HTML, each element is made up of 3 parts:</p>
89-
90-
<ol>
91-
<li class="first-li">The opening tag</li>
92-
<li>The closing tag</li>
93-
<li>The actual element</li>
94-
</ol>
95-
96-
<p>
97-
You can learn more at
98-
<a
99-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
100-
target="_blank"
101-
>MDN Web Docs</a
102-
>.
103-
</p>
104-
105-
<h3>Why should you learn HTML?</h3>
106-
107-
<p>
108-
There are countless reasons for learning the fundamental language of
109-
the web. Here are 5 of them:
110-
</p>
111-
112-
<ul>
113-
<li class="first-li">
114-
To be able to use the fundamental web dev language
115-
</li>
116-
<li>
117-
To hand-craft beautiful websites instead of relying on tools like
118-
Worpress or Wix
119-
</li>
120-
<li>To build web applications</li>
121-
<li>To impress friends</li>
122-
<li>To have fun 😃</li>
123-
</ul>
124-
125-
<p>Hopefully you learned something new here. See you next time!</p>
126-
</article>
127-
128-
<aside>
129-
<h4>Related posts</h4>
130-
131-
<ul class="related">
132-
<li class="related-post">
133-
<img
134-
src="img/related-1.jpg"
135-
alt="Person programming"
136-
width="75"
137-
height="75"
138-
/>
139-
<div>
140-
<a href="#" class="related-link">How to Learn Web Development</a>
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>
139+
<div>
140+
<a href="#" class="related-link">How to Learn Web Development</a>
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> -->
171171

172172
<footer>
173173
<p id="copyright" class="copyright text">

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

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ body {
2727
padding-left: 40px;
2828
padding-right: 40px; */
2929
padding: 20px 40px;
30-
margin-bottom: 60px;
30+
/* margin-bottom: 60px; */
3131
/* height: 80px; */
3232
}
3333

@@ -36,9 +36,9 @@ nav {
3636
/* text-align: center; */
3737
}
3838

39-
article {
39+
/* article {
4040
margin-bottom: 60px;
41-
}
41+
} */
4242

4343
.post-header {
4444
margin-bottom: 40px;
@@ -351,7 +351,8 @@ footer {
351351
margin-bottom: 30px;
352352
}
353353

354-
.row {
354+
/* FLEXBOX LAYOUT */
355+
/* .row {
355356
align-items: flex-start;
356357
display: flex;
357358
gap: 75px;
@@ -364,4 +365,29 @@ article {
364365
365366
aside {
366367
flex: 0 0 300px;
368+
} */
369+
370+
/* CSS GRID */
371+
.container {
372+
column-gap: 75px;
373+
row-gap: 60px;
374+
display: grid;
375+
grid-template-columns: 1fr 300px;
376+
align-items: start;
377+
}
378+
379+
.main-header {
380+
grid-column: 1 / span 2;
381+
}
382+
383+
article {
384+
385+
}
386+
387+
aside {
388+
389+
}
390+
391+
footer {
392+
grid-column: 1 / -1;
367393
}

0 commit comments

Comments
 (0)