Skip to content

Commit e5bacdf

Browse files
TomashiwaTomashiwa
committed
Finish section 4
1 parent 64ef628 commit e5bacdf

File tree

8 files changed

+395
-26
lines changed

8 files changed

+395
-26
lines changed

‎notes.docx‎

626 KB
Binary file not shown.

‎starter/02-HTML-Fundamentals/css-grid.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Grid</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
15+
/* grid-row: 2 / 3; */
16+
17+
/* Spanning a grid item across the row */
18+
/* Each row and column has a line number and a negative line number */
19+
/* grid-column: 1 / 3; */
20+
/* grid-column: 1 / span 3; */
21+
/* grid-column: 1 / -1; */
22+
}
23+
.el--3 {
24+
background-color: green;
25+
height: 150px;
26+
}
27+
.el--4 {
28+
background-color: goldenrod;
29+
}
30+
.el--5 {
31+
background-color: palevioletred;
32+
}
33+
.el--6 {
34+
background-color: steelblue;
35+
36+
/* grid-row: 3 / span 2; */
37+
}
38+
.el--7 {
39+
background-color: yellow;
40+
41+
/* grid-row/grid-column: Set the start & end grid lines to place the grid item between */
42+
/* grid-row: 1 / 2; */
43+
/*grid-column: 2 / 3; */
44+
}
45+
.el--8 {
46+
background-color: crimson;
47+
}
48+
49+
.container--1 {
50+
/* STARTER */
51+
font-family: sans-serif;
52+
background-color: #ddd;
53+
font-size: 40px;
54+
margin: 40px;
55+
56+
/* CSS GRID */
57+
display: grid;
58+
/* # of arguments is equivalent to the number of rows/columns of the stated size */
59+
/* grid-template-columns: 280px 280px 280px; */
60+
/* grid-template-rows: 120px 120px 120px; */
61+
62+
/* fr is a proportion value we can give to distribute the free space across rows/columns */
63+
/* auto makes the row/column take the exact amount of space needed for its content*/
64+
/*grid-template-columns: 1fr 1fr auto;*/
65+
66+
/* Without any explictly stated height, the grid item's height will just be the exact space it needs */
67+
/* grid-template-rows: 1fr 1fr auto; */
68+
/* height: 500px; */
69+
70+
grid-template-columns: repeat(3, 1fr);
71+
grid-template-rows: repeat(3, 1fr);
72+
73+
/* same gap property as flex is usable here */
74+
gap: 20px;
75+
/* row-gap: 20px; */
76+
/* column-gap: 20px; */
77+
78+
display: none;
79+
}
80+
81+
.container--2 {
82+
/* STARTER */
83+
font-family: sans-serif;
84+
background-color: black;
85+
font-size: 40px;
86+
margin: 40px;
87+
88+
width: 800px;
89+
height: 600px;
90+
91+
/* CSS GRID */
92+
display: grid;
93+
grid-template-columns: 125px 200px 125px;
94+
grid-template-rows: 250px 100px;
95+
gap: 50px;
96+
97+
/* Aligning tracks in grid container (ONLY IF CONTAINER is larger then grid) */
98+
justify-content: center;
99+
align-content: center;
100+
101+
/* Aligning items in grid track */
102+
justify-items: center;
103+
align-items: center;
104+
}
105+
106+
.el--3 {
107+
/* Overwrite justify-items and align-items for 1 grid item */
108+
align-self: end;
109+
justify-self: end;
110+
}
111+
</style>
112+
</head>
113+
<body>
114+
<div class="container--1">
115+
<div class="el el--1">(1) HTML</div>
116+
<div class="el el--2">(2) and</div>
117+
<div class="el el--3">(3) CSS</div>
118+
<div class="el el--4">(4) are</div>
119+
<div class="el el--5">(5) amazing</div>
120+
<div class="el el--6">(6) languages</div>
121+
<div class="el el--7">(7) to</div>
122+
<div class="el el--8">(8) learn</div>
123+
</div>
124+
125+
<div class="container--2">
126+
<div class="el el--1">(1)</div>
127+
<div class="el el--3">(3)</div>
128+
<div class="el el--4">(4)</div>
129+
<div class="el el--5">(5)</div>
130+
<div class="el el--6">(6)</div>
131+
<div class="el el--7">(7)</div>
132+
</div>
133+
</body>
134+
</html>

‎starter/02-HTML-Fundamentals/flexbox.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Flexbox</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
12+
/*
13+
DEFAULT VALUES of flex
14+
flex-grow: 0; // How many units of free space a flex item will take from the flexbox
15+
flex-shrink: 1; // How many units of space a flex item will give to fix all items into the flexbox
16+
flex-basis: auto; // Set a minimum width the flex-item will TRY to achieve
17+
18+
flex: [GROW] [SHRINK] [BASIS]
19+
*/
20+
flex: 1 0 auto;
21+
}
22+
.el--2 {
23+
background-color: orangered;
24+
}
25+
.el--3 {
26+
background-color: green;
27+
height: 150px;
28+
}
29+
.el--4 {
30+
background-color: goldenrod;
31+
}
32+
.el--5 {
33+
background-color: palevioletred;
34+
align-self: stretch;
35+
}
36+
.el--6 {
37+
background-color: steelblue;
38+
align-self: flex-start;
39+
}
40+
.el--7 {
41+
background-color: yellow;
42+
}
43+
.el--8 {
44+
background-color: crimson;
45+
/* Align an individual flex-item */
46+
align-self: flex-end;
47+
/* Set a custom ordering for a flex-item */
48+
/* All flex-item starts with ordering 0, arrange in ascending ordering */
49+
order: -1;
50+
}
51+
52+
.container {
53+
/* STARTER */
54+
font-family: sans-serif;
55+
background-color: #ddd;
56+
font-size: 40px;
57+
margin: 40px;
58+
59+
/* FLEXBOX */
60+
display: flex;
61+
/* Vertically align the flex items */
62+
align-items: center;
63+
/* Horizontally align the flex items (Remember it by like how .doc file content are justified) */
64+
/* justify-content: space-between; */
65+
66+
/* Incidate the gap between rows and the gap between columns */
67+
/* gap: [row-gap] [column gap] */
68+
/* gap: 20px; */
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<div class="container">
74+
<div class="el el--1">HTML</div>
75+
<div class="el el--2">and</div>
76+
<div class="el el--3">CSS</div>
77+
<div class="el el--4">are</div>
78+
<div class="el el--5">amazing</div>
79+
<div class="el el--6">languages</div>
80+
<div class="el el--7">to</div>
81+
<div class="el el--8">learn</div>
82+
</div>
83+
</body>
84+
</html>

‎starter/02-HTML-Fundamentals/index.html‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,24 +33,33 @@ <h1>📘 The Code Magazine</h1>
3333
<!-- href can be "#" to go back to the top of page -->
3434
<a href="blog.html">Blog</a>
3535
<a href="#">Challenges</a>
36-
<a href="#">Flexbox</a>
37-
<a href="#">CSS Grid</a>
36+
<a href="flexbox.html">Flexbox</a>
37+
<a href="css-grid.html">CSS Grid</a>
3838
</nav>
3939
</header>
4040

41+
<!-- <div class="content"> -->
4142
<!-- article: a container element that represent a self-contained composition -->
4243
<article>
4344
<header class="post-header">
4445
<h2>The Basic Language of the Web: HTML</h2>
4546

46-
<img src="img/laura-jones.jpg" alt="Photo of author" width="50" height="50" />
47+
<div class="author-box">
48+
<img
49+
class="author-img"
50+
src="img/laura-jones.jpg"
51+
alt="Photo of author"
52+
width="50"
53+
height="50"
54+
/>
4755

48-
<!-- p: Paragraph of text -->
49-
<!-- b: bolding text content (OLD WAY OF BOLDING) -->
50-
<!-- strong: same as b (NEW WAY, makes more sementic sense) -->
51-
<p id="author">
52-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
53-
</p>
56+
<!-- p: Paragraph of text -->
57+
<!-- b: bolding text content (OLD WAY OF BOLDING) -->
58+
<!-- strong: same as b (NEW WAY, makes more sementic sense) -->
59+
<p id="author" class="author">
60+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
61+
</p>
62+
</div>
5463

5564
<!-- img: image -->
5665
<!-- Attributes => Piece of data that describes the element -->
@@ -129,28 +138,35 @@ <h3>Why should you learn HTML?</h3>
129138
<aside>
130139
<h4>Related posts</h4>
131140
<ul class="related-posts">
132-
<li>
141+
<li class="related-post">
133142
<img
134143
src="img/related-1.jpg"
135144
alt="A guy typing on keyboard"
136145
width="75"
137146
height="75"
138147
/>
139-
<a href="#">How to Learn Web Development</a>
140-
<p class="related-author">By Lewis Hamilton</p>
148+
<div>
149+
<a href="#" class="related-link">How to Learn Web Development</a>
150+
<p class="related-author">By Lewis Hamilton</p>
151+
</div>
141152
</li>
142-
<li>
153+
<li class="related-post">
143154
<img src="img/related-2.jpg" alt="Lightning" width="75" height="75" />
144-
<a href="#">The Unknown Powers of CSS</a>
145-
<p class="related-author">By George Russel</p>
155+
<div>
156+
<a href="#" class="related-link">The Unknown Powers of CSS</a>
157+
<p class="related-author">By George Russel</p>
158+
</div>
146159
</li>
147-
<li>
160+
<li class="related-post">
148161
<img src="img/related-3.jpg" alt="Code on screen" width="75" height="75" />
149-
<a href="#">Why JavaScript is Awesome</a>
150-
<p class="related-author">By Sebestian Vettel</p>
162+
<div>
163+
<a href="#" class="related-link">Why JavaScript is Awesome</a>
164+
<p class="related-author">By Sebestian Vettel</p>
165+
</div>
151166
</li>
152167
</ul>
153168
</aside>
169+
<!-- </div> -->
154170

155171
<!-- footer: footer of the container -->
156172
<!-- HTML entity: A string starting with & and ends with ;, used to display reserved characters -->

0 commit comments

Comments
 (0)