Skip to content

Commit f907831

Browse files
jamesacox53jamesacox53
committed
Completed Building a Simple CSS Grid Layout
1 parent 7130cd3 commit f907831

File tree

2 files changed

+171
-165
lines changed

2 files changed

+171
-165
lines changed

‎myWork/04-CSS-Layouts/CSSGrid/index.html

Lines changed: 148 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -19,162 +19,155 @@ <h1 class="title-text">📘The Code Magazine</h1>
1919
</nav>
2020
</header>
2121

22-
<div class="article-content">
23-
<div class="row">
24-
<article class="product-article">
25-
<header>
26-
<h2 class="article-header">
27-
The Basic Language of the Web: HTML
28-
</h2>
29-
30-
<div class="author-box">
31-
<img
32-
class="author-image"
33-
src="images/laura-jones.jpg"
34-
alt="Photo of Laura Jones"
35-
width="50"
36-
/>
37-
38-
<p class="author">
39-
Posted by <strong>Laura Jones</strong> on Monday, June 21st
40-
2027
41-
</p>
42-
</div>
43-
44-
<img
45-
class="article-image"
46-
src="images/post-img.jpg"
47-
alt="HTML code on a screen"
48-
/>
49-
</header>
50-
51-
<p>
52-
All modern websites and web applications are built using three
53-
<em>fundamental</em>
54-
technologies: HTML, CSS and JavaScript. These are the languages of
55-
the web.
22+
<article class="product-article">
23+
<header>
24+
<h2 class="article-header">The Basic Language of the Web: HTML</h2>
25+
26+
<div class="author-box">
27+
<img
28+
class="author-image"
29+
src="images/laura-jones.jpg"
30+
alt="Photo of Laura Jones"
31+
width="50"
32+
/>
33+
34+
<p class="author">
35+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
5636
</p>
57-
58-
<p>
59-
In this post, let's focus on HTML. We will learn what HTML is all
60-
about, and why you too should learn it.
61-
</p>
62-
63-
<h3 class="article-content-heading">What is HTML?</h3>
64-
65-
<p>
66-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
67-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
68-
language that web developers use to structure and describe the
69-
content of a webpage (not a programming language).
70-
</p>
71-
72-
<p>
73-
HTML consists of elements that describe different types of
74-
content: paragraphs, links, headings, images, video, etc. Web
75-
browsers understand HTML and render HTML code as websites.
76-
</p>
77-
78-
<p>In HTML, each element is made up of 3 parts:</p>
79-
80-
<ol class="article-list">
81-
<li>The opening tag</li>
82-
<li>The closing tag</li>
83-
<li>The actual element</li>
84-
</ol>
85-
86-
<p>
87-
You can learn more at the
88-
<a
89-
class="learn-more-at"
90-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
91-
target="_blank"
92-
>MDN Web Docs</a
93-
>.
94-
</p>
95-
96-
<h3 class="article-content-heading">Why should you learn HTML?</h3>
97-
98-
<p>
99-
There are countless reasons for learning the fundamental language
100-
of the web. Here are 5 of them:
101-
</p>
102-
103-
<ul class="article-list">
104-
<li>To be able to use the fundamental web dev language</li>
105-
<li>
106-
To hand-craft beautiful websites instead of relying on tools
107-
like Worpress or Wix
108-
</li>
109-
<li>To build web applications</li>
110-
<li>To impress friends</li>
111-
<li>To have fun 😃</li>
112-
</ul>
113-
114-
<p>Hopefully you learned something new here. See you next time!</p>
115-
116-
<button class="like-button">❤Like</button>
117-
</article>
118-
119-
<aside class="related-aside">
120-
<h4 class="related-posts-title">Related posts</h4>
121-
<ul class="related">
122-
<li class="related-item">
123-
<img
124-
class="related-article-image"
125-
src="images/related-1.jpg"
126-
alt="Learn Web Development"
127-
width="75"
128-
height="75"
129-
/>
130-
131-
<div>
132-
<a href="#" class="related-article-title"
133-
>How to Learn Web Development</a
134-
>
135-
<p class="related-author">By Jonas Schmedtmann</p>
136-
</div>
137-
</li>
138-
<li class="related-item">
139-
<img
140-
class="related-article-image"
141-
src="images/related-2.jpg"
142-
alt="Lightning Strike"
143-
width="75"
144-
height="75"
145-
/>
146-
147-
<div>
148-
<a href="#" class="related-article-title"
149-
>The Unknown Powers of CSS</a
150-
>
151-
<p class="related-author">By Jim Dillon</p>
152-
</div>
153-
</li>
154-
<li class="related-item">
155-
<img
156-
class="related-article-image"
157-
src="images/related-3.jpg"
158-
alt="Code on Screen"
159-
width="75"
160-
height="75"
161-
/>
162-
163-
<div>
164-
<a href="#" class="related-article-title"
165-
>Why JavaScript is Awesome</a
166-
>
167-
<p class="related-author">By Matilda</p>
168-
</div>
169-
</li>
170-
</ul>
171-
</aside>
172-
</div>
173-
174-
<footer class="article-footer">
175-
<p class="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
176-
</footer>
177-
</div>
37+
</div>
38+
39+
<img
40+
class="article-image"
41+
src="images/post-img.jpg"
42+
alt="HTML code on a screen"
43+
/>
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
50+
web.
51+
</p>
52+
53+
<p>
54+
In this post, let's focus on HTML. We will learn what HTML is all
55+
about, and why you too should learn it.
56+
</p>
57+
58+
<h3 class="article-content-heading">What is HTML?</h3>
59+
60+
<p>
61+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
62+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
63+
language that web developers use to structure and describe the content
64+
of a webpage (not a programming language).
65+
</p>
66+
67+
<p>
68+
HTML consists of elements that describe different types of content:
69+
paragraphs, links, headings, images, video, etc. Web browsers
70+
understand HTML and render HTML code as websites.
71+
</p>
72+
73+
<p>In HTML, each element is made up of 3 parts:</p>
74+
75+
<ol class="article-list">
76+
<li>The opening tag</li>
77+
<li>The closing tag</li>
78+
<li>The actual element</li>
79+
</ol>
80+
81+
<p>
82+
You can learn more at the
83+
<a
84+
class="learn-more-at"
85+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
86+
target="_blank"
87+
>MDN Web Docs</a
88+
>.
89+
</p>
90+
91+
<h3 class="article-content-heading">Why should you learn HTML?</h3>
92+
93+
<p>
94+
There are countless reasons for learning the fundamental language of
95+
the web. Here are 5 of them:
96+
</p>
97+
98+
<ul class="article-list">
99+
<li>To be able to use the fundamental web dev language</li>
100+
<li>
101+
To hand-craft beautiful websites instead of relying on tools like
102+
Worpress or Wix
103+
</li>
104+
<li>To build web applications</li>
105+
<li>To impress friends</li>
106+
<li>To have fun 😃</li>
107+
</ul>
108+
109+
<p>Hopefully you learned something new here. See you next time!</p>
110+
111+
<button class="like-button">❤Like</button>
112+
</article>
113+
114+
<aside class="related-aside">
115+
<h4 class="related-posts-title">Related posts</h4>
116+
<ul class="related">
117+
<li class="related-item">
118+
<img
119+
class="related-article-image"
120+
src="images/related-1.jpg"
121+
alt="Learn Web Development"
122+
width="75"
123+
height="75"
124+
/>
125+
126+
<div>
127+
<a href="#" class="related-article-title"
128+
>How to Learn Web Development</a
129+
>
130+
<p class="related-author">By Jonas Schmedtmann</p>
131+
</div>
132+
</li>
133+
<li class="related-item">
134+
<img
135+
class="related-article-image"
136+
src="images/related-2.jpg"
137+
alt="Lightning Strike"
138+
width="75"
139+
height="75"
140+
/>
141+
142+
<div>
143+
<a href="#" class="related-article-title"
144+
>The Unknown Powers of CSS</a
145+
>
146+
<p class="related-author">By Jim Dillon</p>
147+
</div>
148+
</li>
149+
<li class="related-item">
150+
<img
151+
class="related-article-image"
152+
src="images/related-3.jpg"
153+
alt="Code on Screen"
154+
width="75"
155+
height="75"
156+
/>
157+
158+
<div>
159+
<a href="#" class="related-article-title"
160+
>Why JavaScript is Awesome</a
161+
>
162+
<p class="related-author">By Matilda</p>
163+
</div>
164+
</li>
165+
</ul>
166+
</aside>
167+
168+
<footer class="article-footer">
169+
<p class="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
170+
</footer>
178171
</div>
179172
</body>
180173
</html>

‎myWork/04-CSS-Layouts/CSSGrid/style.css

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ body {
1818
background-color: #f7f7f7;
1919
border-top: 5px solid #1098ad;
2020
padding: 10px 20px;
21-
margin-bottom: 15px;
2221
}
2322

2423
.related-aside {
@@ -133,8 +132,6 @@ strong {
133132
}
134133

135134
.product-article {
136-
margin-bottom: 20px;
137-
138135
position: relative;
139136
}
140137

@@ -214,16 +211,32 @@ strong {
214211
font-style: normal;
215212
}
216213

217-
.row {
218-
display: flex;
219-
gap: 55px;
220-
align-items: flex-start;
214+
/* CSS Grid Layout */
215+
216+
.container {
217+
display: grid;
218+
grid-template-columns: 1fr 300px;
219+
column-gap: 50px;
220+
row-gap: 20px;
221+
align-items: start;
221222
}
222223

223-
.related-aside {
224-
flex: 0 0 300px;
224+
.main-header {
225+
grid-row: 1;
226+
grid-column: 1 / -1;
225227
}
226228

227229
.product-article {
228-
flex: 1;
230+
grid-row: 2;
231+
grid-column: 1;
232+
}
233+
234+
.related-aside {
235+
grid-row: 2;
236+
grid-column: 2;
237+
}
238+
239+
.article-footer {
240+
grid-row: 3;
241+
grid-column: 1 / -1;
229242
}

0 commit comments

Comments
 (0)