Skip to content

Commit 79cb008

Browse files
haivn-vibhaivn-vib
committed
grid
1 parent 7ae5240 commit 79cb008

File tree

3 files changed

+178
-137
lines changed

3 files changed

+178
-137
lines changed

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,41 @@
4040
margin: 40px;
4141

4242
/* CSS GRID */
43+
display: grid;
44+
grid-template-columns: repeat(4, 1fr);
45+
grid-template-rows: repeat(2, 1fr);
46+
column-gap: 15px;
47+
row-gap: 30px;
48+
49+
display: none;
50+
51+
/* align */
4352
}
4453

4554
.container--2 {
4655
/* STARTER */
56+
/* display: none; */
4757
font-family: sans-serif;
4858
background-color: black;
4959
font-size: 40px;
5060
margin: 100px;
5161

52-
width: 1000px;
62+
width: 700px;
5363
height: 600px;
5464

5565
/* CSS GRID */
66+
display: grid;
67+
grid-template-columns: 125px 200px 125px;
68+
grid-template-rows: 250px 100px;
69+
gap: 20px;
70+
71+
/* align tract */
72+
justify-content: center;
73+
align-content: center;
74+
75+
/* aligh item's content */
76+
justify-items: center;
77+
align-items: center;
5678
}
5779
</style>
5880
</head>

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

Lines changed: 132 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -30,140 +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-
<div class="author-box">
38-
<img
39-
src="img/laura-jones.jpg"
40-
alt="Headshot of Laura Jones"
41-
height="50"
42-
width="50"
43-
/>
44-
45-
<p id="author">
46-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
47-
</p>
48-
</div>
33+
<!-- used in flex only -->
34+
<!-- <div class="row"> -->
35+
<article>
36+
<header class="post-header">
37+
<h2>The Basic Language of the Web: HTML</h2>
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+
/>
45+
46+
<p id="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>
49101

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

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

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ body {
2626
padding-left: 40px;
2727
padding-right: 40px; */
2828
padding: 20px 40px;
29-
margin-bottom: 60px;
29+
/* margin-bottom: 60px; */
3030
/* height: 80px; */
3131
display: flex;
3232
justify-content: space-between;
@@ -39,7 +39,7 @@ nav {
3939
}
4040

4141
article {
42-
margin-bottom: 60px;
42+
/* margin-bottom: 60px; */
4343
}
4444

4545
.post-header {
@@ -54,7 +54,7 @@ aside {
5454
/* padding-top: 50px;
5555
padding-bottom: 50px; */
5656
padding: 50px 0;
57-
width: 500px;
57+
/* width: 500px; */
5858
}
5959

6060
/* SMALLER ELEMENTS */
@@ -283,7 +283,7 @@ nav p {
283283
.related-author {
284284
margin-top: 15px;
285285
}
286-
.row {
286+
/* .row {
287287
display: flex;
288288
gap: 75px;
289289
align-items: flex-start;
@@ -295,7 +295,7 @@ aside {
295295
}
296296
article {
297297
flex: 1;
298-
}
298+
} */
299299

300300
ul,
301301
ol {
@@ -307,3 +307,21 @@ ul,
307307
ol {
308308
list-style-position: inside;
309309
}
310+
311+
.container {
312+
display: grid;
313+
grid-template-columns: 3fr 300px;
314+
column-gap: 50px;
315+
row-gap: 50px;
316+
/* overflow: hidden; */
317+
align-items: start;
318+
}
319+
320+
.main-header {
321+
grid-column: 1/-1;
322+
}
323+
324+
footer {
325+
grid-column: 1/-1;
326+
justify-self: center;
327+
}

0 commit comments

Comments
 (0)