Skip to content

Commit 6e7a452

Browse files
NateWrNateWr
committed
Last major revision before Glasgow Class 3
- Fix CodeYourFuture#17 Review from @LucyMac -- Add hint about attributes to semantic tags exercise -- Add missing <link> in exercise 5 -- Change box model exercise to use pagination component -- Ask students to remember git command in branching exercise - Fix CodeYourFuture#14 Add exercise on child selectors - Fix CodeYourFuture#15 Add a real-life flexbox exercise on header/nav - Resequence exercises - Fix dead link in project readme - Add viewport meta tag so examples work in Chromium's responsive mode - Fix whitespace issues
1 parent 23014b4 commit 6e7a452

File tree

129 files changed

+391
-175
lines changed

Some content is hidden

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

129 files changed

+391
-175
lines changed

‎css/week1-conflicting-styles.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** Conflicting styles that require advanced CSS selectors to override */
2+
p {
3+
color: #000;
4+
}

‎css/week1-pagination.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.countries {
2+
margin: 0;
3+
padding: 1rem;
4+
list-style: none;
5+
border-bottom: 1px solid #bbb;
6+
}
7+
8+
.country {
9+
margin: 1px 0;
10+
padding: 0.5rem;
11+
background: #fff;
12+
border: 1px solid rgba(0,0,0,0.2);
13+
}
14+
15+
.pages {
16+
margin-left: 0.5rem;
17+
}
18+
19+
.pages__page {
20+
text-decoration: none;
21+
}
22+
23+
.pages__showing {
24+
display: inline-block;
25+
padding: 1rem;
26+
float: right;
27+
}

‎css/week1.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@ html {
3232
/* Site title and top navigation */
3333
.site-header {
3434
padding: 0.5rem 1rem;
35-
color: rgba(255,255,255,0.9);
3635
background: #4491db;
3736
border-top-left-radius: 3px;
3837
border-top-right-radius: 3px;
3938
}
4039

4140
.site-header__title {
4241
margin: 0;
42+
color: rgba(255,255,255,0.9);
4343
font-size: 18px;
4444
font-weight: 700;
4545
}
@@ -72,3 +72,8 @@ html {
7272
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
7373
background: #fff;
7474
}
75+
76+
/* Site footer area */
77+
.site-footer {
78+
padding: 0.5rem 1rem;
79+
}

‎css/week2-nav-menu.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
body,
2+
html {
3+
background: #25262f;
4+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
5+
font-size: 16px;
6+
line-height: 1.5em;
7+
}
8+
9+
.site-wrapper {
10+
max-width: 1200px;
11+
width: 90%;
12+
margin-top: 2vh;
13+
margin-left: auto;
14+
margin-right: auto;
15+
background: #fff;
16+
border-radius: 3px;
17+
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
18+
}
19+
20+
.site-header {
21+
position: relative;
22+
top: -1px;
23+
padding-top: 1px;
24+
}
25+
26+
.site-header__logo {
27+
display: block;
28+
margin: 1rem;
29+
width: 50px;
30+
height: auto;
31+
}
32+
33+
.site-header__nav {
34+
margin: 1rem 0.5rem;
35+
}
36+
37+
.site-header__navItem {
38+
display: block;
39+
padding: 0.25em 0.5em;
40+
font-weight: bold;
41+
text-decoration: none;
42+
text-transform: uppercase;
43+
color: #007ab2;
44+
border: 1px solid transparent;
45+
border-radius: 3px;
46+
}
47+
48+
.site-header__navItem:focus,
49+
.site-header__navItem:hover {
50+
border: 1px solid #007ab2;
51+
outline: 0;
52+
}
53+
54+
.site-header__navItem--highlighted {
55+
color: #d00a6c;
56+
}
57+
58+
.site-header__navItem--highlighted:hover,
59+
.site-header__navItem--highlighted:focus {
60+
border-color: #d00a6c;
61+
}
62+
63+
.site-header__checkout {
64+
display: inline-block;
65+
margin: 0.5rem;
66+
padding: 0.5em 1em;
67+
border: 1px solid #007ab2;
68+
border-radius: 3px;
69+
background: #007ab2;
70+
color: #fff;
71+
text-decoration: none;
72+
}
73+
74+
.site-header__checkout:focus,
75+
.site-header__checkout:hover {
76+
background: #009cd4;
77+
outline: 0;
78+
}

‎images/10/solution-1.png

-4.09 KB
Binary file not shown.

‎images/10/solution-2.png

-5.97 KB
Binary file not shown.

‎images/10/solution-3.png

-6 KB
Binary file not shown.

‎images/10/example-column.png renamed to ‎images/11/example-column.png

File renamed without changes.

‎images/10/example-row.png renamed to ‎images/11/example-row.png

File renamed without changes.

‎images/11/solution-1.png

99 Bytes

‎images/11/solution-2.png

2.32 KB

‎images/11/solution-3.png

-827 Bytes

‎images/11/solution-4.png

-6.78 KB
Binary file not shown.

‎images/11/example-space-column.png renamed to ‎images/12/example-space-column.png

File renamed without changes.

‎images/11/example-space.png renamed to ‎images/12/example-space.png

File renamed without changes.

‎images/12/solution-1.png

-1.9 KB

‎images/12/solution-2.png

-2.15 KB

‎images/12/solution-3.png

-458 Bytes

‎images/12/solution-4.png

-1.14 KB

‎images/12/example-align-column.png renamed to ‎images/13/example-align-column.png

File renamed without changes.

‎images/12/example-align-row.png renamed to ‎images/13/example-align-row.png

File renamed without changes.

‎images/13/solution-1.png

1.89 KB

‎images/13/solution-2.png

1.78 KB

‎images/13/solution-3.png

3.21 KB

‎images/13/solution-4.png

7.92 KB

‎images/13/googling-flexbox.png renamed to ‎images/14/googling-flexbox.png

File renamed without changes.

‎images/14/solution-1.png

-7 KB

‎images/14/solution-2.png

-2.75 KB

‎images/14/solution-3.png

-2.67 KB

‎images/14/solution-4.png

-7.41 KB
Binary file not shown.

‎images/14/example.png renamed to ‎images/15/example.png

File renamed without changes.

‎images/15/solution-1.png

5.05 KB

‎images/15/solution-2.png

867 Bytes

‎images/15/solution-3.png

357 Bytes

‎images/15/solution-4.png

-190 Bytes

‎images/16/solution-1.png

5.95 KB

‎images/16/solution-2.png

5.92 KB

‎images/16/solution-3.png

6.37 KB

‎images/16/solution-4.png

7.6 KB

‎images/15/solution-5.png renamed to ‎images/16/solution-5.png

File renamed without changes.

‎images/17/solution.gif

2.05 MB

‎images/16/pull-request-0.png renamed to ‎images/18/pull-request-0.png

File renamed without changes.

‎images/16/pull-request-1.png renamed to ‎images/18/pull-request-1.png

File renamed without changes.

‎images/16/pull-request-2.png renamed to ‎images/18/pull-request-2.png

File renamed without changes.

‎images/16/pull-request-3.png renamed to ‎images/18/pull-request-3.png

File renamed without changes.

‎images/20/shirts.jpg renamed to ‎images/22/shirts.jpg

File renamed without changes.

‎images/20/solution.png renamed to ‎images/22/solution.png

File renamed without changes.

‎images/21/solution.png renamed to ‎images/23/solution.png

File renamed without changes.

‎images/22/solution-1.png renamed to ‎images/24/solution-1.png

File renamed without changes.

‎images/22/solution-2.png renamed to ‎images/24/solution-2.png

File renamed without changes.

‎images/23/solution-1.png renamed to ‎images/25/solution-1.png

File renamed without changes.

‎images/23/solution-2.png renamed to ‎images/25/solution-2.png

File renamed without changes.

‎images/24/solution.png renamed to ‎images/26/solution.png

File renamed without changes.

‎images/25/solution-delivery.png renamed to ‎images/27/solution-delivery.png

File renamed without changes.

‎images/25/solution-required.gif renamed to ‎images/27/solution-required.gif

File renamed without changes.

‎images/7-box-model.png

-9.45 KB
Binary file not shown.

‎images/7-position.png

-13.9 KB
Binary file not shown.

‎images/7/countries.png

5.38 KB

‎images/8/solution.png

26.4 KB

‎images/8-github-branches.png renamed to ‎images/9/github-branches.png

File renamed without changes.

‎images/sample-logo.png

3.5 KB

‎package.json

+20-19
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,26 @@
1212
"5": "live-server --open=week-1/5-css-selectors",
1313
"6": "live-server --open=week-1/6-css-properties",
1414
"7": "live-server --open=week-1/7-css-box",
15-
"8": "live-server --open=week-1/8-git-branch",
16-
"9": "live-server --open=week-2/9-media-queries",
17-
"10": "live-server --open=week-2/10-flexbox",
18-
"11": "live-server --open=week-2/11-justify-content",
19-
"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",
22-
"15": "live-server --open=week-2/15-more-flexbox",
23-
"16": "live-server --open=week-2/16-git-merge",
24-
"17": "live-server --open=week-3/17-search",
25-
"18": "live-server --open=week-3/18-labels",
26-
"19": "live-server --open=week-3/19-buttons",
27-
"20": "live-server --open=week-3/20-checkout",
28-
"21": "live-server --open=week-3/21-comments",
29-
"22": "live-server --open=week-3/22-dietary",
30-
"23": "live-server --open=week-3/23-shirt-size",
31-
"24": "live-server --open=week-3/24-checkout-groups",
32-
"25": "live-server --open=week-3/25-attributes",
33-
"27": "live-server --open=week-3/27-user-experience",
15+
"8": "live-server --open=week-1/8-advanced-selectors",
16+
"9": "live-server --open=week-1/9-git-branch",
17+
"10": "live-server --open=week-2/10-media-queries",
18+
"11": "live-server --open=week-2/11-flexbox",
19+
"12": "live-server --open=week-2/12-justify-content",
20+
"13": "live-server --open=week-2/13-align-items",
21+
"14": "live-server --open=week-2/14-order",
22+
"15": "live-server --open=week-2/15-align-self",
23+
"16": "live-server --open=week-2/16-more-flexbox",
24+
"17": "live-server --open=week-2/17-nav-menu",
25+
"18": "live-server --open=week-2/18-git-merge",
26+
"19": "live-server --open=week-3/19-search",
27+
"20": "live-server --open=week-3/20-labels",
28+
"21": "live-server --open=week-3/21-buttons",
29+
"22": "live-server --open=week-3/22-checkout",
30+
"23": "live-server --open=week-3/23-comments",
31+
"24": "live-server --open=week-3/24-dietary",
32+
"25": "live-server --open=week-3/25-shirt-size",
33+
"26": "live-server --open=week-3/26-checkout-groups",
34+
"27": "live-server --open=week-3/27-attributes",
3435
"28": "live-server --open=week-3/28-git-conflict",
3536
"29": "live-server --open=week-3/29-combined-skills",
3637
"serve": "live-server"

‎readme.md

+1-1

‎week-1/1-parent-child/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>1. Parent-Child Relationships - HTML, CSS and Git Exercises</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link rel="stylesheet" href="/css/normalize.css">
89
<link rel="stylesheet" href="/css/week1.css">
910
<link rel="stylesheet" href="/css/message-child-selectors.css">

‎week-1/2-html-attributes/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>2. HTML Attributes - HTML, CSS and Git Exercises</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link rel="stylesheet" href="/css/normalize.css">
89
<link rel="stylesheet" href="/css/week1.css">
910
<link rel="stylesheet" href="/css/message.css">

‎week-1/3-semantic-html/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>3. Semantic HTML - HTML, CSS and Git Exercises</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link rel="stylesheet" href="/css/normalize.css">
89
<link rel="stylesheet" href="/css/week1.css">
910
<link rel="stylesheet" href="/css/message.css">

‎week-1/3-semantic-html/readme.md

+1-1

‎week-1/4-links-scripts/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>4. Adding Links and Scripts - HTML, CSS and Git Exercises</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
</head>
89

910
<body>

‎week-1/5-css-selectors/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
<head>
55
<meta charset="utf-8">
66
<title>5. CSS Selectors - HTML, CSS and Git Exercises</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link rel="stylesheet" href="/css/normalize.css">
89
<link rel="stylesheet" href="/css/week1.css">
910
<link rel="stylesheet" href="/css/message.css">
1011
<link rel="stylesheet" href="/css/message-css-selectors.css">
12+
<link rel="stylesheet" href="message-backgrounds.css">
1113
</head>
1214

1315
<body>

‎week-1/6-css-properties/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>6. CSS Properties - HTML, CSS and Git Exercises</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link rel="stylesheet" href="/css/normalize.css">
89
<link rel="stylesheet" href="/css/week1.css">
910
<link rel="stylesheet" href="/css/message.css">

‎week-1/7-css-box/index.html

+23-41
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,35 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8">
6-
<title>7. CSS Box Model - HTML, CSS and Git Exercises</title>
7-
<link rel="stylesheet" href="/css/normalize.css">
5+
<meta charset="utf-8">
6+
<title>7. CSS Box Model - HTML, CSS and Git Exercises</title>
7+
<link rel="stylesheet" href="/css/normalize.css">
88
<link rel="stylesheet" href="/css/week1.css">
9-
<link rel="stylesheet" href="/css/message.css">
9+
<link rel="stylesheet" href="/css/week1-pagination.css">
1010
<link rel="stylesheet" href="styles.css">
1111
</head>
1212

1313
<body>
14-
<div class="site-wrapper">
15-
<div class="site-header">
16-
<div class="site-header__title">Messages</div>
17-
</div>
18-
<div class="numbers">
19-
<div class="number">1</div>
20-
<div class="number">2</div>
21-
<div class="number">3</div>
22-
<div class="number">4</div>
23-
</div>
24-
<div class="messages">
25-
<div class="message">
26-
<div class="message__author">Won</div>
27-
<p class="message__content">
28-
Where should we meet tomorrrow?
29-
</p>
30-
<time class="message__time message__time--old">Yesterday, 7:25pm</time>
31-
</div>
32-
<div class="message">
33-
<div class="message__author">Luke</div>
34-
<p class="message__content">
35-
Let's meet at the iCafe in Merchant City.
36-
<a href="https://goo.gl/maps/aza4h9nUBhn" class="link link--map">
37-
https://goo.gl/maps/aza4h9nUBhn
38-
</a>
39-
</p>
40-
<time class="message__time">7:35pm</time>
41-
</div>
42-
<div class="message message--unread">
43-
<div class="message__author">Won</div>
44-
<p class="message__content">
45-
Ok!
46-
<a href="https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif" class="link link--gif">https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif</a>
47-
</p>
48-
<time class="message__time">7:38pm</time>
49-
</div>
14+
<div class="site-wrapper">
15+
<div class="site-header">
16+
<div class="site-header__title">Countries</div>
5017
</div>
51-
</div>
18+
<ul class="countries">
19+
<li class="country">Afghanistan</li>
20+
<li class="country">Albania</li>
21+
<li class="country">Algeria</li>
22+
<li class="country">Andorra</li>
23+
<li class="country">Angola</li>
24+
</ul>
25+
<div class="pages">
26+
<a href="#" class="pages__page">1</a>
27+
<a href="#" class="pages__page">2</a>
28+
<a href="#" class="pages__page">3</a>
29+
<span class="pages__separator">...</span>
30+
<a href="#" class="pages__page">38</a>
31+
<span class="pages__showing">Showing 5 of 190</span>
32+
</div>
33+
</divc>
5234
</body>
5335

5436
</html>

‎week-1/7-css-box/readme.md

+5-7

0 commit comments

Comments
 (0)