Skip to content

Commit 06ef3e5

Browse files
Nadix92Nadix92
committed
Section 4 finished
1 parent 10de6bc commit 06ef3e5

File tree

4 files changed

+249
-86
lines changed

4 files changed

+249
-86
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@
1111
}
1212
.el--2 {
1313
background-color: orangered;
14+
grid-column: 1 / -1;
15+
grid-row: 2;
1416
}
1517
.el--3 {
1618
background-color: green;
1719
height: 150px;
20+
align-self: end;
21+
justify-self: end;
1822
}
1923
.el--4 {
2024
background-color: goldenrod;
@@ -30,6 +34,8 @@
3034
}
3135
.el--8 {
3236
background-color: crimson;
37+
grid-column: 2 / 3;
38+
grid-row: 1 / 2;
3339
}
3440

3541
.container--1 {
@@ -40,6 +46,15 @@
4046
margin: 40px;
4147

4248
/* CSS GRID */
49+
display: grid;
50+
grid-template-columns: repeat(4, 1fr);
51+
grid-template-rows: 1fr 1fr;
52+
53+
/* gap: 30px; */
54+
column-gap: 30px;
55+
row-gap: 60px;
56+
57+
display: none;
4358
}
4459

4560
.container--2 {
@@ -53,6 +68,19 @@
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+
/* Aligningi tracks inside container
77+
distribut emty space */
78+
justify-content: center;
79+
align-content: center;
80+
81+
/* Aligning items INSIDE cells: moving items around inside cells */
82+
align-items: center;
83+
justify-items: center;
5684
}
5785
</style>
5886
</head>

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@
88
<style>
99
.el--1 {
1010
background-color: blueviolet;
11+
align-self: flex-start;
12+
/* flex-grow: 1; */
1113
}
1214
.el--2 {
1315
background-color: orangered;
16+
/* flex-grow: 1; */
1417
}
1518
.el--3 {
1619
background-color: green;
@@ -21,9 +24,12 @@
2124
}
2225
.el--5 {
2326
background-color: palevioletred;
27+
align-self: stretch;
28+
/* order: 1; */
2429
}
2530
.el--6 {
2631
background-color: steelblue;
32+
/* order: -1; */
2733
}
2834
.el--7 {
2935
background-color: yellow;
@@ -32,14 +38,35 @@
3238
background-color: crimson;
3339
}
3440

41+
.el {
42+
/*
43+
Defualts:
44+
flex-grow: 0;
45+
flex-shrink: 1;
46+
flex-basis: auto;
47+
*/
48+
49+
/* flex-basis: 120px; */
50+
/* flex-shrink: 0; */
51+
/* flex-grow: 1; */
52+
53+
/* flex: 0 0 200px; */
54+
55+
flex: 1;
56+
}
57+
3558
.container {
3659
/* STARTER */
3760
font-family: sans-serif;
3861
background-color: #ddd;
39-
font-size: 40px;
62+
font-size: 30px;
4063
margin: 40px;
4164

4265
/* FLEXBOX */
66+
display: flex;
67+
align-items: center;
68+
justify-content: flex-start;
69+
gap: 30px;
4370
}
4471
</style>
4572
</head>

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

Lines changed: 51 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -18,66 +18,61 @@ <h6>The Basic Language of the Web: HTML</h6>
1818
-->
1919

2020
<div class="container">
21-
<header class="main-header">
21+
<header class="main-header clearfix">
2222
<h1>📘 The Code Magazine</h1>
2323

2424
<nav>
2525
<!-- <strong>This is the navigation</strong> -->
2626
<a href="blog.html">Blog</a>
2727
<a href="#">Challenges</a>
28-
<a href="#">Flexbox</a>
29-
<a href="#">CSS Grid</a>
28+
<a href="flexbox.html">Flexbox</a>
29+
<a href="css-grid.html">CSS Grid</a>
3030
</nav>
31+
<!-- <div class="clear"></div> -->
3132
</header>
3233

34+
<!-- Only necessary of flexbox -->
35+
<!-- <div class="row"> -->
3336
<article>
3437
<header class="post-header">
3538
<h2>The Basic Language of the Web: HTML</h2>
3639

37-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Headshot of Laura Jones"
40-
height="50"
41-
width="50"
42-
/>
43-
44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
46-
</p>
47-
48-
<img
49-
src="img/post-img.jpg"
50-
alt="HTML code on a screen"
51-
width="500"
52-
height="200"
53-
class="post-img"
54-
/>
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" class="author">Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
50+
</div>
51+
52+
<img src="img/post-img.jpg" alt="HTML code on a screen" width="500" height="200" class="post-img" />
5553
<button>❤️ Like</button>
5654
</header>
5755

5856
<p>
5957
All modern websites and web applications are built using three
6058
<em>fundamental</em>
61-
technologies: HTML, CSS and JavaScript. These are the languages of the
62-
web.
59+
technologies: HTML, CSS and JavaScript. These are the languages of the web.
6360
</p>
6461

6562
<p>
66-
In this post, let's focus on HTML. We will learn what HTML is all
67-
about, and why you too should learn it.
63+
In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should
64+
learn it.
6865
</p>
6966

7067
<h3>What is HTML?</h3>
7168
<p>
72-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
73-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
74-
language that web developers use to structure and describe the content
75-
of a webpage (not a programming language).
69+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
70+
<strong>L</strong>anguage. It's a markup language that web developers use to structure and describe
71+
the content of a webpage (not a programming language).
7672
</p>
7773
<p>
78-
HTML consists of elements that describe different types of content:
79-
paragraphs, links, headings, images, video, etc. Web browsers
80-
understand HTML and render HTML code as websites.
74+
HTML consists of elements that describe different types of content: paragraphs, links, headings,
75+
images, video, etc. Web browsers understand HTML and render HTML code as websites.
8176
</p>
8277
<p>In HTML, each element is made up of 3 parts:</p>
8378

@@ -89,28 +84,18 @@ <h3>What is HTML?</h3>
8984

9085
<p>
9186
You can learn more at
92-
<a
93-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
94-
target="_blank"
95-
>MDN Web Docs</a
96-
>.
87+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>.
9788
</p>
9889

9990
<h3>Why should you learn HTML?</h3>
10091

10192
<p>
102-
There are countless reasons for learning the fundamental language of
103-
the web. Here are 5 of them:
93+
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
10494
</p>
10595

10696
<ul>
107-
<li class="first-li">
108-
To be able to use the fundamental web dev language
109-
</li>
110-
<li>
111-
To hand-craft beautiful websites instead of relying on tools like
112-
Worpress or Wix
113-
</li>
97+
<li class="first-li">To be able to use the fundamental web dev language</li>
98+
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
11499
<li>To build web applications</li>
115100
<li>To impress friends</li>
116101
<li>To have fun 😃</li>
@@ -123,43 +108,33 @@ <h3>Why should you learn HTML?</h3>
123108
<h4>Related posts</h4>
124109

125110
<ul class="related">
126-
<li>
127-
<img
128-
src="img/related-1.jpg"
129-
alt="Person programming"
130-
width="75"
131-
height="75"
132-
/>
133-
<a href="#">How to Learn Web Development</a>
134-
<p class="related-author">By Jonas Schmedtmann</p>
111+
<li class="related-post">
112+
<img src="img/related-1.jpg" alt="Person programming" width="75" height="75" />
113+
<div>
114+
<a href="#" class="related-link">How to Learn Web Development</a>
115+
<p class="related-author">By Jonas Schmedtmann</p>
116+
</div>
135117
</li>
136-
<li>
137-
<img
138-
src="img/related-2.jpg"
139-
alt="Lightning"
140-
width="75"
141-
height="75"
142-
/>
143-
<a href="#">The Unknown Powers of CSS</a>
144-
<p class="related-author">By Jim Dillon</p>
118+
<li class="related-post">
119+
<img src="img/related-2.jpg" alt="Lightning" width="75" height="75" />
120+
<div>
121+
<a href="#" class="related-link">The Unknown Powers of CSS</a>
122+
<p class="related-author">By Jim Dillon</p>
123+
</div>
145124
</li>
146-
<li>
147-
<img
148-
src="img/related-3.jpg"
149-
alt="JavaScript code on a screen"
150-
width="75"
151-
height="75"
152-
/>
153-
<a href="#">Why JavaScript is Awesome</a>
154-
<p class="related-author">By Matilda</p>
125+
<li class="related-post">
126+
<img src="img/related-3.jpg" alt="JavaScript code on a screen" width="75" height="75" />
127+
<div>
128+
<a href="#" class="related-link">Why JavaScript is Awesome</a>
129+
<p class="related-author">By Matilda</p>
130+
</div>
155131
</li>
156132
</ul>
157133
</aside>
134+
<!-- </div> -->
158135

159136
<footer>
160-
<p id="copyright" class="copyright text">
161-
Copyright &copy; 2027 by The Code Magazine.
162-
</p>
137+
<p id="copyright" class="copyright text">Copyright &copy; 2027 by The Code Magazine.</p>
163138
</footer>
164139
</div>
165140
</body>

0 commit comments

Comments
 (0)