Skip to content

Commit ccc0334

Browse files
NateWrNateWr
authored
Merge pull request CodeYourFuture#6 from rarmatei/flexbox-exercises
add order and align-self exercises
2 parents d8958b3 + f40732f commit ccc0334

File tree

14 files changed

+192
-1
lines changed

14 files changed

+192
-1
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
node_modules
1+
node_modules
2+
.DS_Store

‎exercise-specific-src/13-order/custom.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
width: 300px;
14+
}

‎exercise-specific-src/13-order/solutions.png

19.5 KB
Loading

‎exercise-specific-src/14-align-self/custom.css

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

‎exercise-specific-src/14-align-self/example1.png

19.2 KB
Loading

‎exercise-specific-src/14-align-self/solutions.png

56.3 KB
Loading

‎images/13-googling-flexbox.png

150 KB
Loading

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
"10": "live-server --open=week-2/10-flexbox",
1818
"11": "live-server --open=week-2/11-justify-content",
1919
"12": "live-server --open=week-2/12-align-items",
20+
"13": "live-server --open=week-2/13-order",
21+
"14": "live-server --open=week-2/14-align-self",
2022
"serve": "live-server"
2123
},
2224
"devDependencies": {

‎week-2/13-order/flexbox.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.countries {
2+
display: flex;
3+
}
4+
5+
/* Add your own CSS code below */

‎week-2/13-order/index.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>13 - Order - 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+
<link rel="stylesheet" href="../../exercise-specific-src/13-order/custom.css">
12+
</head>
13+
14+
<body>
15+
<div class="site-wrapper site-wrapper">
16+
<div class="site-header">
17+
<h1 class="site-header__title">First</h1>
18+
</div>
19+
<ul class="countries countries--first">
20+
<li class="country country--brazil">Brazil</li>
21+
<li class="country country--croatia">Croatia</li>
22+
<li class="country country--ethiopia">Ethiopia</li>
23+
<li class="country country--laos">Laos</li>
24+
<li class="country country--uganda">Uganda</li>
25+
</ul>
26+
<div class="site-header">
27+
<h1 class="site-header__title">Second</h1>
28+
</div>
29+
<ul class="countries countries--second">
30+
<li class="country country--brazil">Brazil</li>
31+
<li class="country country--croatia">Croatia</li>
32+
<li class="country country--ethiopia">Ethiopia</li>
33+
<li class="country country--laos">Laos</li>
34+
<li class="country country--uganda">Uganda</li>
35+
</ul>
36+
<div class="site-header">
37+
<h1 class="site-header__title">Third</h1>
38+
</div>
39+
<ul class="countries countries--third">
40+
<li class="country country--brazil">Brazil</li>
41+
<li class="country country--croatia">Croatia</li>
42+
<li class="country country--ethiopia">Ethiopia</li>
43+
<li class="country country--laos">Laos</li>
44+
<li class="country country--uganda">Uganda</li>
45+
</ul>
46+
<p>Bonus points: there are two solutions to this exercise, using flexbox properties you learned. See if you can find both.</p>
47+
</div>
48+
<div class="site-wrapper site-wrapper">
49+
<img class="solution" src="../../exercise-specific-src/13-order/solutions.png">
50+
</div>
51+
</body>
52+
53+
</html>

‎week-2/13-order/readme.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Item order
2+
3+
The `order` property is used to move a *specific* item to a different position in the list.
4+
5+
In this exercise, you'll use order to move the items in the list. Follow the steps below to complete this exercise:
6+
7+
1. Look at the First list of countries. Then look at the First Result displayed to the side. Find the differences between the two lists.
8+
2. Make the First list of countries look like the First Result list.
9+
3. Do the same thing for the Second and Third list.
10+
---
11+
> **Remember:** if you forgot how to use the `order` property, you can always:
12+
> 1. Google the word "flexbox"
13+
> 2. Click on the link from "CSS-tricks"
14+
> ![Screenshot of how to google flexbox](/images/13-googling-flexbox.png)

‎week-2/14-align-self/flexbox.css

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

‎week-2/14-align-self/index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>14 - Align Self - 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+
<link rel="stylesheet" href="../../exercise-specific-src/14-align-self/custom.css">
12+
</head>
13+
14+
<body>
15+
<div class="site-wrapper site-wrapper">
16+
<div class="site-header">
17+
<h1 class="site-header__title">First</h1>
18+
</div>
19+
<ul class="countries countries--tall countries--first">
20+
<li class="country country--brazil">Brazil</li>
21+
<li class="country country--croatia">Croatia</li>
22+
<li class="country country--ethiopia">Ethiopia</li>
23+
<li class="country country--laos">Laos</li>
24+
<li class="country country--uganda">Uganda</li>
25+
</ul>
26+
<div class="site-header">
27+
<h1 class="site-header__title">Second</h1>
28+
</div>
29+
<ul class="countries countries--tall countries--second">
30+
<li class="country country--brazil">Brazil</li>
31+
<li class="country country--croatia">Croatia</li>
32+
<li class="country country--ethiopia">Ethiopia</li>
33+
<li class="country country--laos">Laos</li>
34+
<li class="country country--uganda">Uganda</li>
35+
</ul>
36+
<div class="site-header">
37+
<h1 class="site-header__title">Third</h1>
38+
</div>
39+
<ul class="countries countries--tall countries--third">
40+
<li class="country country--brazil">Brazil</li>
41+
<li class="country country--croatia">Croatia</li>
42+
<li class="country country--ethiopia">Ethiopia</li>
43+
<li class="country country--laos">Laos</li>
44+
<li class="country country--uganda">Uganda</li>
45+
</ul>
46+
<div class="site-header">
47+
<h1 class="site-header__title">Fourth</h1>
48+
</div>
49+
<ul class="countries countries--tall countries--fourth">
50+
<li class="country country--brazil">Brazil</li>
51+
<li class="country country--croatia">Croatia</li>
52+
<li class="country country--ethiopia">Ethiopia</li>
53+
<li class="country country--laos">Laos</li>
54+
<li class="country country--uganda">Uganda</li>
55+
</ul>
56+
</div>
57+
<div class="site-wrapper site-wrapper">
58+
<img class="solution" src="../../exercise-specific-src/14-align-self/solutions.png">
59+
</div>
60+
</body>
61+
62+
</html>

‎week-2/14-align-self/readme.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Align self
2+
3+
With `align-items` you move all the items at once (on the **non-main axis**).
4+
With `align-self` you move only one of the items.
5+
6+
In this exercise, you will use align-self and align-items to change the position of the items. Follow the steps below to complete this exercise:
7+
8+
1. Look at the First list of countries. Then look at the First Result displayed to the side. Find the differences between the two lists.
9+
2. Make the First list of countries look like the First Result list.
10+
3. Do the same thing for the Second and Third list.
11+
---
12+
13+
![Example of align-items vs. align-self](../../exercise-specific-src/14-align-self/example1.png)
14+
15+
You can use the same values for `align-self` as you used for `align-items`.

0 commit comments

Comments
 (0)