Skip to content

Commit 76873e9

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
building css grid to our layout
1 parent 2840945 commit 76873e9

File tree

3 files changed

+176
-143
lines changed

3 files changed

+176
-143
lines changed

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
.el--3 {
1818
background-color: green;
1919
height: 150px;
20+
align-self: end;
2021
}
2122
.el--4 {
2223
background-color: goldenrod;
@@ -37,14 +38,15 @@
3738
}
3839

3940
.container--1 {
41+
display: none;
4042
/* STARTER */
4143
font-family: sans-serif;
4244
background-color: #ddd;
4345
font-size: 20px;
4446
margin: 40px;
4547

4648
/* CSS GRID */
47-
display: grid;
49+
/* display: grid; */
4850
grid-template-columns: 1fr 1fr 1fr 1fr;
4951
grid-template-rows: repeat(2, 1fr);
5052

@@ -53,17 +55,29 @@
5355
}
5456

5557
.container--2 {
56-
display: none;
58+
/* display: none; */
5759
/* STARTER */
5860
font-family: sans-serif;
5961
background-color: black;
6062
font-size: 40px;
6163
margin: 100px;
6264

63-
width: 1000px;
65+
width: 700px;
6466
height: 600px;
6567

68+
gap: 50px;
69+
6670
/* CSS GRID */
71+
display: grid;
72+
grid-template-columns: 125px 200px 125px;
73+
grid-template-rows: 250px 100px;
74+
75+
justify-content: center;
76+
77+
align-content: center;
78+
79+
align-items: center;
80+
justify-items: center;
6781
}
6882
</style>
6983
</head>

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

Lines changed: 132 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -32,144 +32,141 @@ <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-
height="50"
45-
width="50"
46-
class="author-img"
47-
/>
48-
49-
<p id="author">
50-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
51-
</p>
52-
</div>
35+
<article>
36+
<header class="post-header">
37+
<h2>The Basic Language of the Web: HTML</h2>
5338

39+
<div class="author-box">
5440
<img
55-
src="img/post-img.jpg"
56-
alt="HTML code on a screen"
57-
width="500"
58-
height="200"
59-
class="post-img"
41+
src="img/laura-jones.jpg"
42+
alt="Headshot of Laura Jones"
43+
height="50"
44+
width="50"
45+
class="author-img"
6046
/>
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
68-
the 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
81-
content 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 class="related-link" href="#"
141-
>How to Learn Web Development</a
142-
>
143-
<p class="related-author">By Jonas Schmedtmann</p>
144-
</div>
145-
</li>
146-
<li class="related-post">
147-
<img
148-
src="img/related-2.jpg"
149-
alt="Lightning"
150-
width="75"
151-
height="75"
152-
/>
153-
<div>
154-
<a class="related-link" href="#">The Unknown Powers of CSS</a>
155-
<p class="related-author">By Jim Dillon</p>
156-
</div>
157-
</li>
158-
<li class="related-post">
159-
<img
160-
src="img/related-3.jpg"
161-
alt="JavaScript code on a screen"
162-
width="75"
163-
height="75"
164-
/>
165-
<div>
166-
<a class="related-link" href="#">Why JavaScript is Awesome</a>
167-
<p class="related-author">By Matilda</p>
168-
</div>
169-
</li>
170-
</ul>
171-
</aside>
172-
</div>
47+
48+
<p id="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>
103+
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">
132+
<img
133+
src="img/related-1.jpg"
134+
alt="Person programming"
135+
width="75"
136+
height="75"
137+
/>
138+
<div>
139+
<a class="related-link" href="#">How to Learn Web Development</a>
140+
<p class="related-author">By Jonas Schmedtmann</p>
141+
</div>
142+
</li>
143+
<li class="related-post">
144+
<img
145+
src="img/related-2.jpg"
146+
alt="Lightning"
147+
width="75"
148+
height="75"
149+
/>
150+
<div>
151+
<a class="related-link" href="#">The Unknown Powers of CSS</a>
152+
<p class="related-author">By Jim Dillon</p>
153+
</div>
154+
</li>
155+
<li class="related-post">
156+
<img
157+
src="img/related-3.jpg"
158+
alt="JavaScript code on a screen"
159+
width="75"
160+
height="75"
161+
/>
162+
<div>
163+
<a class="related-link" href="#">Why JavaScript is Awesome</a>
164+
<p class="related-author">By Matilda</p>
165+
</div>
166+
</li>
167+
</ul>
168+
</aside>
169+
173170
<footer>
174171
<p id="copyright" class="copyright text">
175172
Copyright &copy; 2027 by The Code Magazine.

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

Lines changed: 27 additions & 5 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: auto;
3232
}
3333

@@ -52,7 +52,7 @@ aside {
5252
/* padding-top: 50px;
5353
padding-bottom: 50px; */
5454
padding: 50px 0;
55-
width: 500px;
55+
width: 300px;
5656
}
5757

5858
/* SMALLER ELEMENTS */
@@ -358,10 +358,32 @@ footer {
358358
font-style: italic;
359359
}
360360

361-
.row {
361+
/* .row {
362362
display: flex;
363363
align-items: flex-start;
364364
/* justify-content: space-between; */
365-
gap: 75px;
366-
margin-bottom: 60px;
365+
366+
/* css grid layout */
367+
368+
.container {
369+
display: grid;
370+
grid-template-columns: 1fr 300px;
371+
/* grid-template-rows: 1fr 1fr 1fr; */
372+
column-gap: 75px;
373+
row-gap: 60px;
374+
align-items: start;
375+
}
376+
377+
.main-header {
378+
grid-column: 1 / -1;
379+
}
380+
381+
article {
382+
}
383+
384+
aside {
385+
}
386+
387+
footer {
388+
grid-column: 1 / -1;
367389
}

0 commit comments

Comments
 (0)