Skip to content

Commit aa9397c

Browse files
NateWrNateWr
authored
Merge pull request CodeYourFuture#3 from NateWr/week2
Add a few exercises for week 2
2 parents b5e75df + 706ae31 commit aa9397c

18 files changed

+463
-1
lines changed

‎css/week2-flexbox.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.site-wrapper {
2+
max-width: 800px;
3+
margin-left: auto;
4+
margin-right: auto;
5+
}
6+
7+
.countries + .site-header {
8+
margin-top: 2rem;
9+
}
10+
11+
.country {
12+
margin-top: 0;
13+
}
14+
15+
.countries--tall {
16+
min-height: 400px;
17+
border-radius: 2px;
18+
background: #25262f;
19+
padding: 0.5rem;
20+
}
21+
22+
@media (min-width: 800px) {
23+
.site-wrapper {
24+
max-width: 800px;
25+
margin: 2rem auto;
26+
border-radius: 3px;
27+
}
28+
}

‎css/week2.css

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
body {
2+
background: #25262f;
3+
}
4+
5+
.site-wrapper {
6+
padding: 2rem;
7+
max-width: 1200px;
8+
background: rgba(255,255,255,0.9);
9+
}
10+
11+
.site-header__title {
12+
margin: 0 0 2rem;
13+
padding-bottom: 1rem;
14+
border-bottom: 1px solid rgba(0,0,0,.5);
15+
font-weight: 300;
16+
font-size: 2rem;
17+
}
18+
19+
.countries {
20+
margin: 0;
21+
padding: 0;
22+
list-style: none;
23+
}
24+
25+
.country {
26+
display: block;
27+
margin-top: 0.5rem;
28+
padding: 1rem;
29+
background: #fff;
30+
border: 1px solid rgba(0,0,0,0.2);
31+
border-radius: 2px;
32+
}
33+
34+
@media (min-width: 1200px) {
35+
.site-wrapper {
36+
margin: 2rem auto;
37+
border-radius: 3px;
38+
}
39+
}

‎images/10-result.png

5.41 KB
Loading

‎images/11-result.png

14.7 KB
Loading

‎images/12-result.png

22.6 KB
Loading

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"5": "live-server --open=week-1/5-css-selectors",
1414
"6": "live-server --open=week-1/6-css-properties",
1515
"7": "live-server --open=week-1/7-css-box",
16-
"8": "live-server --open=week-1/8-git-branch"
16+
"8": "live-server --open=week-1/8-git-branch",
17+
"9": "live-server --open=week-2/9-media-queries",
18+
"10": "live-server --open=week-2/10-flexbox",
19+
"11": "live-server --open=week-2/11-justify-content",
20+
"12": "live-server --open=week-2/12-align-items"
1721
}
1822
}

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

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

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
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+
25+
</html>

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Flexbox
2+
3+
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.
4+
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.
9+
10+
_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)._
11+
12+
When you're finished, it should look like the image below.
13+
14+
![Screenshot of the country list flowing from right to left](/images/10-result.png)

‎week-2/11-justify-content/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/11-justify-content/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
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>
17+
</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>
27+
</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+
38+
</html>

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Justify Content
2+
3+
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.
4+
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.
7+
8+
_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)._
9+
10+
When you're finished, it should look like the image below.
11+
12+
![Screenshot of the country lists with the correct spacing](/images/11-result.png)

‎week-2/12-align-items/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/12-align-items/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>12 - Align Items - 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>
17+
</div>
18+
<ul class="countries countries--tall 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>
27+
</div>
28+
<ul class="countries countries--tall 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+
38+
</html>

‎week-2/12-align-items/readme.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Align Items
2+
3+
With flexbox, the `align-items` property can be used to control how the items are positioned inside of the container. In this exercise, you'll apply a different `align-items` property to each list. Follow the steps below to complete this exercise.
4+
5+
1. Apply the `align-items` property to the _first_ list of countries, so that all the countries are shown in the middle and left of their container.
6+
2. Apply the `align-items` property to the _second_ list of countries, so that all the countries are shown at the bottom left of their container.
7+
8+
_Hint: You can review how `align-items` works in [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7)._
9+
10+
When you're finished, it should look like the image below.
11+
12+
![Screenshot of the country lists with the correct alignment](/images/12-result.png)

‎week-2/9-media-queries/columns.css

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

0 commit comments

Comments
 (0)