Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f74f148

Browse files
bampakoabampakoa
committed
Add examples and slides for Week 2
1 parent 10e49e8 commit f74f148

9 files changed

+182
-0
lines changed

‎teacher-prep/Week 2/Slides.pdf

583 KB
Binary file not shown.

‎teacher-prep/Week 2/examples/breakpoints.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
header {
2+
background-color: graytext;
3+
margin-bottom: 25px;
4+
}
5+
6+
nav a {
7+
font-size: 0.7em
8+
}
9+
10+
@media screen and (max-width: 600px) {
11+
nav {
12+
width: 100px;
13+
}
14+
15+
header {
16+
font-size: 26px;
17+
}
18+
}
19+
20+
@media screen and (min-width: 768px) {
21+
nav {
22+
width: auto;
23+
}
24+
25+
header {
26+
font-size: 20px;
27+
}
28+
}
29+
30+
button {
31+
background-color: cyan;
32+
padding: 12px;
33+
}
34+
35+
@media screen and (orientation: portrait) {
36+
button {
37+
white-space: nowrap;
38+
width: 210px;
39+
}
40+
41+
span {
42+
overflow: hidden;
43+
text-overflow: ellipsis;
44+
width: 85px;
45+
display: inline-block;
46+
}
47+
}

‎teacher-prep/Week 2/examples/breakpoints.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Breakpoints</title>
5+
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="breakpoints.css" />
8+
</head>
9+
<body>
10+
<!-- Menu portrait/landscape -->
11+
<header>
12+
Main menu
13+
<nav>
14+
<a href="">Home</a>
15+
<a href="">Contact us</a>
16+
</nav>
17+
</header>
18+
19+
<!-- Ellipsis button portrait/landscape -->
20+
<button>
21+
<span>Click here to submit your information</span>
22+
</button>
23+
</body>
24+
</html>

‎teacher-prep/Week 2/index-viewport.html renamed to ‎teacher-prep/Week 2/examples/index-viewport.html

File renamed without changes.

‎teacher-prep/Week 2/index.html renamed to ‎teacher-prep/Week 2/examples/index.html

File renamed without changes.

‎teacher-prep/Week 2/examples/media-queries.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@media screen {
2+
section {
3+
width: 600px;
4+
height: 400px;
5+
background-color: green;
6+
margin-bottom: 25px;
7+
}
8+
}
9+
10+
@media (orientation: landscape) {
11+
aside {
12+
width: 50%;
13+
height: 100%;
14+
background-color: lightgray;
15+
}
16+
}
17+
18+
ul {
19+
padding-top: 5px;
20+
}
21+
22+
@media (max-width: 600px) {
23+
h1 {
24+
font-size: 2vw;
25+
}
26+
}

‎teacher-prep/Week 2/examples/media-queries.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Media queries</title>
5+
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="media-queries.css" />
8+
</head>
9+
<body>
10+
<!-- Set media rule from type -->
11+
<section>
12+
<aside>
13+
<ul>
14+
<li><a href="">Home</a></li>
15+
<li><a href="">Contact us</a></li>
16+
</ul>
17+
</aside>
18+
</section>
19+
20+
<!-- Set media rule from feature -->
21+
<h1>My homepage</h1>
22+
</body>
23+
</html>

‎teacher-prep/Week 2/examples/relative-lengths.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
section {
2+
width: 600px;
3+
height: 400px;
4+
background-color: green;
5+
margin-bottom: 25px;
6+
}
7+
8+
aside {
9+
width: 50%;
10+
height: 100%;
11+
background-color: lightgray;
12+
}
13+
14+
ul {
15+
padding-top: 5px;
16+
}
17+
18+
header {
19+
background-color: graytext;
20+
font-size: 20px;
21+
}
22+
23+
nav a {
24+
font-size: 0.7em
25+
}
26+
27+
h1 {
28+
font-size: 2vw;
29+
}

‎teacher-prep/Week 2/examples/relative-lengths.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Relative lengths</title>
5+
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="relative-lengths.css" />
8+
</head>
9+
<body>
10+
<!-- Set width as percentage (%) -->
11+
<section>
12+
<aside>
13+
<ul>
14+
<li><a href="">Home</a></li>
15+
<li><a href="">Contact us</a></li>
16+
</ul>
17+
</aside>
18+
</section>
19+
20+
21+
<!-- Set font size as em -->
22+
<header>
23+
Main menu
24+
<nav>
25+
<a href="">Home</a>
26+
<a href="">Contact us</a>
27+
</nav>
28+
</header>
29+
30+
<!-- Set font size as vw -->
31+
<h1>My homepage</h1>
32+
</body>
33+
</html>

0 commit comments

Comments
 (0)