Skip to content

Commit 6c9c8df

Browse files
author
Dhruv Mohindru
committed
Finished section 4
1 parent af19352 commit 6c9c8df

File tree

3 files changed

+143
-93
lines changed

3 files changed

+143
-93
lines changed

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@
5151
/* gap: 30px; */
5252
column-gap: 20px;
5353
row-gap: 40px;
54+
/*TEMP */
55+
display: none;
5456
}
5557

5658
.el--8 {
@@ -72,18 +74,37 @@
7274
}
7375

7476
.container--2 {
75-
display: none;
76-
7777
/* STARTER */
7878
font-family: sans-serif;
7979
background-color: black;
8080
font-size: 40px;
8181
margin: 100px;
8282

83-
width: 1000px;
83+
width: 700px;
8484
height: 600px;
8585

8686
/* CSS GRID */
87+
display: grid;
88+
grid-template-columns: 125px 200px 125px;
89+
grid-template-rows: 250px 100px;
90+
gap: 50px;
91+
92+
/* Aligning tracks inside container:border:
93+
distribute empty space */
94+
justify-content: center;
95+
/* justify-content: space-between; */
96+
align-content: center;
97+
/* align-content: end; */
98+
99+
/* Aligning items INSIDE cells: moving items
100+
around inside cells */
101+
align-items: end;
102+
justify-items: end;
103+
}
104+
105+
.el--3 {
106+
align-self: center;
107+
justify-self: center;
87108
}
88109
</style>
89110
</head>

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

Lines changed: 88 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -30,94 +30,96 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
<!-- <div class="clear"></div> -->
3232
</header>
33-
<div class="row">
34-
<article>
35-
<header class="post-header">
36-
<h2>The Basic Language of the Web: HTML</h2>
3733

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

122124
<footer>
123125
<p id="copyright" class="copyright text">Copyright &copy; 2027 by The Code Magazine.</p>

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

Lines changed: 31 additions & 4 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: 80px; */
3232
}
3333

@@ -37,7 +37,7 @@ nav {
3737
}
3838

3939
article {
40-
margin-bottom: 60px;
40+
/* margin-bottom: 60px; */
4141
}
4242

4343
.post-header {
@@ -355,6 +355,8 @@ footer {
355355
font-style: italic;
356356
}
357357

358+
/* FLEX box layout */
359+
/*
358360
.row {
359361
display: flex;
360362
align-items: flex-start;
@@ -368,11 +370,36 @@ article {
368370
}
369371
370372
aside {
371-
/*
373+
372374
DEFAULTS
373375
flex-grow: 0;
374376
flex-shrink: 1;
375377
flex-basis: auto;
376-
*/
378+
377379
flex: 0 0 300px;
378380
}
381+
*/
382+
383+
/* CSS GRID Layout */
384+
.container {
385+
display: grid;
386+
grid-template-columns: 1fr 300px;
387+
column-gap: 75px;
388+
row-gap: 60px;
389+
align-items: start;
390+
}
391+
392+
.main-header {
393+
/* grid-column: 1 / span 2; */
394+
grid-column: 1 / -1;
395+
}
396+
397+
article {
398+
}
399+
400+
aside {
401+
}
402+
403+
footer {
404+
grid-column: 1 / -1;
405+
}

0 commit comments

Comments
 (0)