Skip to content

Commit d0c80cb

Browse files
NateWrNateWr
committed
Merge branch 'advanced-flexbox' of https://github.com/rarmatei/html-css-git-exercises into rarmatei-advanced-flexbox
2 parents 1a1eee6 + 98514f7 commit d0c80cb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+422
-77
lines changed

‎exercise-specific-src/10-flexbox/custom.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body {
2+
display: flex;
3+
justify-content: space-evenly;
4+
flex-wrap: wrap;
5+
}
6+
7+
.site-wrapper {
8+
margin-right: 0;
9+
margin-left: 0;
10+
}
11+
12+
.solution {
13+
max-width: 471px;
14+
max-height: 290px;
15+
}

‎exercise-specific-src/10-flexbox/example1.png

30.6 KB
Loading

‎exercise-specific-src/10-flexbox/example2.png

40.7 KB
Loading

‎exercise-specific-src/10-flexbox/solution1.png

16.6 KB
Loading

‎exercise-specific-src/10-flexbox/solution2.png

22.1 KB
Loading

‎exercise-specific-src/10-flexbox/solution3.png

21.8 KB
Loading

‎exercise-specific-src/11-justify-content/custom.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
body {
2+
display: flex;
3+
justify-content: space-evenly;
4+
flex-wrap: wrap;
5+
}
6+
7+
.site-wrapper {
8+
margin-right: 0;
9+
margin-left: 0;
10+
width: 550px;
11+
}
12+
13+
.solution {
14+
max-width: 561px;
15+
}
16+
17+
.countries {
18+
border: black solid;
19+
}

‎exercise-specific-src/11-justify-content/example1.png

63.6 KB
Loading

‎exercise-specific-src/11-justify-content/example2.png

72.5 KB
Loading

‎exercise-specific-src/11-justify-content/solution1.png

20.4 KB
Loading

‎exercise-specific-src/11-justify-content/solution2.png

21.3 KB
Loading

‎exercise-specific-src/11-justify-content/solution3.png

38.2 KB
Loading

‎exercise-specific-src/11-justify-content/solution4.png

38.8 KB
Loading

‎exercise-specific-src/12-align-items/custom.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
display: flex;
3+
justify-content: space-evenly;
4+
flex-wrap: wrap;
5+
}
6+
7+
.site-wrapper {
8+
margin-right: 0;
9+
margin-left: 0;
10+
width: 550px;
11+
}
12+
13+
.solution {
14+
max-width: 561px;
15+
}
16+
17+
.countries {
18+
height: 310px;
19+
border: black solid;
20+
}
21+
22+
.countries--tall {
23+
min-height: 0px;
24+
}

‎exercise-specific-src/12-align-items/example1.png

58.8 KB
Loading

‎exercise-specific-src/12-align-items/example2.png

66.7 KB
Loading

‎exercise-specific-src/12-align-items/solution1.png

35.5 KB
Loading

‎exercise-specific-src/12-align-items/solution2.png

33.5 KB
Loading

‎exercise-specific-src/12-align-items/solution3.png

38.9 KB
Loading

‎exercise-specific-src/12-align-items/solution4.png

40.5 KB
Loading

‎exercise-specific-src/15-more-flexbox/custom.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.site-wrapper {
2+
margin-right: 0;
3+
margin-left: 0;
4+
width: 550px;
5+
}
6+
7+
.solution {
8+
max-width: 561px;
9+
}
10+
11+
.countries {
12+
height: 310px;
13+
border: black solid;
14+
}
15+
16+
.countries--tall {
17+
min-height: 0px;
18+
}

‎exercise-specific-src/15-more-flexbox/example1.gif

476 KB
Loading

‎exercise-specific-src/15-more-flexbox/example2.gif

809 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution1.png

34 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution2.png

33.6 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution3.png

35.5 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution4.png

40.2 KB
Loading

‎exercise-specific-src/15-more-flexbox/solution5.png

39.8 KB
Loading

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"12": "live-server --open=week-2/12-align-items",
2020
"13": "live-server --open=week-2/13-order",
2121
"14": "live-server --open=week-2/14-align-self",
22-
"15": "live-server --open=week-2/15-git-merge",
22+
"15": "live-server --open=week-2/15-more-flexbox",
23+
"15b": "live-server --open=week-2/15-git-merge",
2324
"16": "live-server --open=week-3/16-search",
2425
"17": "live-server --open=week-3/17-labels",
2526
"18": "live-server --open=week-3/18-buttons",

‎week-2/10-flexbox/flexbox.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/* Add your own CSS code below */
1+
/* Add your own CSS code below */

‎week-2/10-flexbox/index.html

+63-21
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,67 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>10 - Flexbox - HTML, CSS and Git Exercises</title>
6+
<link rel="stylesheet" href="/css/normalize.css" />
7+
<link rel="stylesheet" href="/css/week2.css" />
8+
<link rel="stylesheet" href="/css/week2-flexbox.css" />
9+
<link rel="stylesheet" href="flexbox.css" />
10+
<link
11+
rel="stylesheet"
12+
href="../../exercise-specific-src/10-flexbox/custom.css"
13+
/>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>10 - Flexbox - HTML, CSS and Git Exercises</title>
7-
<link rel="stylesheet" href="/css/normalize.css">
8-
<link rel="stylesheet" href="/css/week2.css">
9-
<link rel="stylesheet" href="/css/week2-flexbox.css">
10-
<link rel="stylesheet" href="flexbox.css">
11-
</head>
12-
13-
<body>
14-
<div class="site-wrapper site-wrapper">
15-
<ul class="countries">
16-
<li class="country">1. Brazil</li>
17-
<li class="country">2. Croatia</li>
18-
<li class="country">3. Ethiopia</li>
19-
<li class="country">4. Laos</li>
20-
<li class="country">5. Uganda</li>
21-
</ul>
22-
</div>
23-
</body>
24-
16+
<body>
17+
<div class="site-wrapper site-wrapper">
18+
<div class="site-header">
19+
<h1 class="site-header__title">Exercises</h1>
20+
</div>
21+
<h3>First</h3>
22+
<ul class="countries countries--first">
23+
<li class="country">1. Brazil</li>
24+
<li class="country">2. Croatia</li>
25+
<li class="country">3. Ethiopia</li>
26+
<li class="country">4. Laos</li>
27+
<li class="country">5. Uganda</li>
28+
</ul>
29+
<h3>Second</h3>
30+
<ul class="countries countries--second">
31+
<li class="country">1. Brazil</li>
32+
<li class="country">2. Croatia</li>
33+
<li class="country">3. Ethiopia</li>
34+
<li class="country">4. Laos</li>
35+
<li class="country">5. Uganda</li>
36+
</ul>
37+
<h3>Third</h3>
38+
<ul class="countries countries--third">
39+
<li class="country">1. Brazil</li>
40+
<li class="country">2. Croatia</li>
41+
<li class="country">3. Ethiopia</li>
42+
<li class="country">4. Laos</li>
43+
<li class="country">5. Uganda</li>
44+
</ul>
45+
</div>
46+
<div class="site-wrapper site-wrapper">
47+
<div class="site-header">
48+
<h1 class="site-header__title">Solutions</h1>
49+
</div>
50+
<h3>First</h3>
51+
<img
52+
class="solution"
53+
src="../../exercise-specific-src/10-flexbox/solution1.png"
54+
/>
55+
<h3>Second</h3>
56+
<img
57+
class="solution"
58+
src="../../exercise-specific-src/10-flexbox/solution2.png"
59+
/>
60+
<h3>Third</h3>
61+
<img
62+
class="solution"
63+
src="../../exercise-specific-src/10-flexbox/solution3.png"
64+
/>
65+
</div>
66+
</body>
2567
</html>

‎week-2/10-flexbox/readme.md

+9-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22

33
Flexbox is used to change the layout of elements on the HTML page. In this exercise, you'll apply the `flex-direction` property to change how the countries are displayed. Follow the steps below to complete this exercise.
44

5-
1. Open `flexbox.css` and write a CSS rule to apply `display: flex` to the "container" element. _Hint: The "container" element will be the parent element of each country._
6-
2. Use the property `flex-direction` to make the countries start from the right instead of the left.
7-
3. Try out all the properties you know for `flex-direction` and see how they change the layout.
8-
4. When you're done, set the property back so that the countries start from the right instead of the left.
5+
1. Open `flexbox.css` and write a CSS rule to apply `display: flex` to the "container" element. _Hint: The "container" element will be the parent element of each country.
6+
2. Look at the First list of countries. Then look at the First Result displayed to the side. Find the differences between the two lists.
7+
3. Use the property `flex-direction` to make the countries on the left look like the ones on the right
98

109
_Hint: You can review how `flex-direction` works in [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-3)._
1110

12-
When you're finished, it should look like the image below.
11+
Next, study below two images.
1312

14-
![Screenshot of the country list flowing from right to left](/images/10-result.png)
13+
<img alt="Screenshot of flex-direction row" src="../../exercise-specific-src/10-flexbox/example1.png" width="500">
14+
15+
<img alt="Screenshot of flex-direction column" src="../../exercise-specific-src/10-flexbox/example2.png" height="300">
16+
17+
For now, try to imagine `flex-direction` as the red arrow, that is either horizontal (when `flex-direction: row`) or vertical (when `flex-direction: column`):

‎week-2/11-justify-content/flexbox.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.countries {
22
display: flex;
33
}
4-
/* Add your own CSS code below */
4+
/* Add your own CSS code below */

‎week-2/11-justify-content/index.html

+74-32
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,80 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>11 - Justify Content - HTML, CSS and Git Exercises</title>
6+
<link rel="stylesheet" href="/css/normalize.css" />
7+
<link rel="stylesheet" href="/css/week2.css" />
8+
<link rel="stylesheet" href="/css/week2-flexbox.css" />
9+
<link rel="stylesheet" href="flexbox.css" />
10+
<link
11+
rel="stylesheet"
12+
href="../../exercise-specific-src/11-justify-content/custom.css"
13+
/>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>11 - Justify Content - HTML, CSS and Git Exercises</title>
7-
<link rel="stylesheet" href="/css/normalize.css">
8-
<link rel="stylesheet" href="/css/week2.css">
9-
<link rel="stylesheet" href="/css/week2-flexbox.css">
10-
<link rel="stylesheet" href="flexbox.css">
11-
</head>
12-
13-
<body>
14-
<div class="site-wrapper site-wrapper">
15-
<div class="site-header">
16-
<h1 class="site-header__title">First</h1>
16+
<body>
17+
<div class="site-wrapper site-wrapper">
18+
<div class="site-header">
19+
<h1 class="site-header__title">Exercises</h1>
20+
</div>
21+
<h3>First</h3>
22+
<ul class="countries countries--first">
23+
<li class="country">1. Brazil</li>
24+
<li class="country">2. Croatia</li>
25+
<li class="country">3. Ethiopia</li>
26+
<li class="country">4. Laos</li>
27+
<li class="country">5. Uganda</li>
28+
</ul>
29+
<h3>Second</h3>
30+
<ul class="countries countries--second">
31+
<li class="country">1. Brazil</li>
32+
<li class="country">2. Croatia</li>
33+
<li class="country">3. Ethiopia</li>
34+
<li class="country">4. Laos</li>
35+
<li class="country">5. Uganda</li>
36+
</ul>
37+
<h3>Third</h3>
38+
<ul class="countries countries--third">
39+
<li class="country">1. Brazil</li>
40+
<li class="country">2. Croatia</li>
41+
<li class="country">3. Ethiopia</li>
42+
<li class="country">4. Laos</li>
43+
<li class="country">5. Uganda</li>
44+
</ul>
45+
<h3>Fourth</h3>
46+
<ul class="countries countries--fourth">
47+
<li class="country">1. Brazil</li>
48+
<li class="country">2. Croatia</li>
49+
<li class="country">3. Ethiopia</li>
50+
<li class="country">4. Laos</li>
51+
<li class="country">5. Uganda</li>
52+
</ul>
1753
</div>
18-
<ul class="countries countries--first">
19-
<li class="country">1. Brazil</li>
20-
<li class="country">2. Croatia</li>
21-
<li class="country">3. Ethiopia</li>
22-
<li class="country">4. Laos</li>
23-
<li class="country">5. Uganda</li>
24-
</ul>
25-
<div class="site-header">
26-
<h1 class="site-header__title">Second</h1>
54+
<div class="site-wrapper site-wrapper">
55+
<div class="site-header">
56+
<h1 class="site-header__title">Solutions</h1>
57+
</div>
58+
<h3>First</h3>
59+
<img
60+
class="solution"
61+
src="../../exercise-specific-src/11-justify-content/solution1.png"
62+
/>
63+
<h3>Second</h3>
64+
<img
65+
class="solution"
66+
src="../../exercise-specific-src/11-justify-content/solution2.png"
67+
/>
68+
<h3>Third</h3>
69+
<img
70+
class="solution"
71+
src="../../exercise-specific-src/11-justify-content/solution3.png"
72+
/>
73+
<h3>Fourth</h3>
74+
<img
75+
class="solution"
76+
src="../../exercise-specific-src/11-justify-content/solution4.png"
77+
/>
2778
</div>
28-
<ul class="countries countries--second">
29-
<li class="country">1. Brazil</li>
30-
<li class="country">2. Croatia</li>
31-
<li class="country">3. Ethiopia</li>
32-
<li class="country">4. Laos</li>
33-
<li class="country">5. Uganda</li>
34-
</ul>
35-
</div>
36-
</body>
37-
79+
</body>
3880
</html>

‎week-2/11-justify-content/readme.md

+11-4
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@
22

33
With flexbox, the `justify-content` property can be used to control how extra space is used. In this exercise, you'll apply a different `justify-content` property to each list. Follow the steps below to complete this exercise.
44

5-
1. Apply the `justify-content` property to the _first_ list of countries, so that all the countries are shown in the middle with no space between them.
6-
2. Apply the `justify-content` property to the _second_ list of countries, so that all the countries are shown with equal space around them.
5+
1. Look at the First list of countries. Then look at the First Result displayed in the "Solutions" panel. Find the differences between the two lists.
6+
2. Use `justify-content` and `flex-direction` to make the list of countries on the left look like "Solutions" one.
77

88
_Hint: You can review how `justify-content` works in [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-6)._
99

10-
When you're finished, it should look like the image below.
10+
Now, also study below two images.
1111

12-
![Screenshot of the country lists with the correct spacing](/images/11-result.png)
12+
<img alt="Screenshot of flex-direction row" src="../../exercise-specific-src/11-justify-content/example1.png" width="500">
13+
14+
<img alt="Screenshot of flex-direction column" src="../../exercise-specific-src/11-justify-content/example2.png" height="300">
15+
16+
In both of them, `justify-content` has the value `space-between`.
17+
However, in the first picture, `justify-content` arranges them horizontally. And in the second one, vertically.
18+
19+
So, `justify-content` works in the same direction as the **red arrow** (`flex-direction`).

0 commit comments

Comments
 (0)