Skip to content

Commit 738b1c6

Browse files
larry-xuelarry-xue
committed
css layouts end
1 parent 04a0d43 commit 738b1c6

File tree

3 files changed

+161
-106
lines changed

3 files changed

+161
-106
lines changed

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@
1111
}
1212
.el--2 {
1313
background-color: orangered;
14+
/* grid-column: 1 / 3; */
15+
grid-column: 1 / -1;
16+
grid-row: 2 / span 3;
1417
}
1518
.el--3 {
1619
background-color: green;
1720
height: 150px;
1821
}
1922
.el--4 {
2023
background-color: goldenrod;
24+
grid-column: 2;
25+
grid-row: 2;
2126
}
2227
.el--5 {
2328
background-color: palevioletred;
@@ -27,9 +32,13 @@
2732
}
2833
.el--7 {
2934
background-color: yellow;
35+
grid-column: 2;
36+
grid-row: 2;
3037
}
3138
.el--8 {
3239
background-color: crimson;
40+
grid-column: 2 / 3;
41+
grid-row: 1 / 2;
3342
}
3443

3544
.container--1 {
@@ -40,6 +49,12 @@
4049
margin: 40px;
4150

4251
/* CSS GRID */
52+
display: grid;
53+
/* grid-template-columns: 1fr 1fr 1fr auto; */
54+
/* grid-template-rows: 200px 200px 200px; */
55+
grid-template-columns: repeat(4, 1fr);
56+
grid-template-rows: repeat(3, 1fr);
57+
gap: 10px
4358
}
4459

4560
.container--2 {
@@ -53,6 +68,25 @@
5368
height: 600px;
5469

5570
/* CSS GRID */
71+
display: grid;
72+
grid-template-columns: 125px 200px 125px;
73+
grid-template-rows: 250px 100px;
74+
gap: 50px;
75+
76+
/* aligning tracks inside container:
77+
distribute empty space;
78+
*/
79+
justify-content: center;
80+
align-content: center;
81+
82+
/* Aligning items inside cells: moving items around iside cells */
83+
align-items: center;
84+
justify-items: center;
85+
}
86+
87+
.el--3 {
88+
align-self: end;
89+
justify-self: end;
5690
}
5791
</style>
5892
</head>

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

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

138136
<footer>
139137
<p id="copyright" class="copyright text">

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -348,18 +348,41 @@ footer {
348348
display: block;
349349
}
350350

351-
.row {
351+
/* .row {
352352
display: flex;
353353
gap: 75px;
354354
}
355355
356356
aside {
357-
/* grow, shrink, basic */
358357
flex: 0 0 300px;
359358
align-self: flex-start;
360359
}
361360
362361
article {
363362
flex: 0 0 825px;
364363
margin-bottom: 0;
364+
} */
365+
366+
.container {
367+
display: grid;
368+
grid-template-columns: 3fr 1fr;
369+
/* grid-template-rows: auto 1fr auto; */
370+
column-gap: 75px;
371+
row-gap: 60px;
372+
}
373+
374+
header {
375+
grid-column: 1 / -1;
376+
}
377+
378+
article {
379+
margin-bottom: 0;
380+
}
381+
382+
aside {
383+
align-self: start;
384+
}
385+
386+
footer {
387+
grid-column: 1 / -1;
365388
}

0 commit comments

Comments
 (0)