Skip to content

Commit 8e98388

Browse files
lnnchaulnnchau
committed
add code of css-grid lecture
1 parent 776b5db commit 8e98388

File tree

3 files changed

+195
-148
lines changed

3 files changed

+195
-148
lines changed

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

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,14 @@
4040
margin: 40px;
4141

4242
/* CSS GRID */
43+
display: grid;
44+
/* width is dvidied into 1 + 1 + 1 + 1 = 4 fractions */
45+
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
46+
grid-template-columns: repeat(4, 1fr);
47+
grid-template-rows: 300px 200px; /* will get overwritten */
48+
/* gap: 20px; margin won't work */
49+
column-gap: 10px;
50+
row-gap: 40px;
4351
}
4452

4553
.container--2 {
@@ -49,10 +57,34 @@
4957
font-size: 40px;
5058
margin: 100px;
5159

52-
width: 1000px;
60+
width: 800px;
5361
height: 600px;
5462

5563
/* CSS GRID */
64+
display: grid;
65+
grid-template-columns: 125px 200px 125px;
66+
grid-template-rows: 250px 100px;
67+
/* gap: 30px; */
68+
69+
/* ALIGN TRACKS - DISTRIBUTE SPACE */
70+
justify-content: space-around;
71+
align-content: start;
72+
73+
/* ALIGN ITEMS */
74+
align-items: center;
75+
justify-items: center;
76+
}
77+
78+
.el--8 {
79+
grid-column: 2 / 3;
80+
grid-row: 1 / 2;
81+
}
82+
83+
.el--2 {
84+
grid-row: 2 / 3;
85+
/* grid-column: 2 / -1; */
86+
grid-column: 1 / span 2;
87+
/* grid-column: 1 / 3; */
5688
}
5789
</style>
5890
</head>

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

Lines changed: 132 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -30,145 +30,141 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
</header>
3232

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
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>
33+
<article>
34+
<header class="post-header">
35+
<h2>The Basic Language of the Web: HTML</h2>
5136

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

0 commit comments

Comments
 (0)