Skip to content

Commit

Permalink
More Exercises
Browse files Browse the repository at this point in the history
  • Loading branch information
@peteorpeter
peteorpeter committed Nov 9, 2014
1 parent 8375e81 commit f33ed4d
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 1 deletion.
118 changes: 118 additions & 0 deletions exercises/exercises/6-completed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=true" name="viewport">
<title></title>
<link rel="stylesheet" href="../base.css">
<style>
main {
/* A quirk of floats is that odd things happen if you don't float the container as well. */
float: left;
width: 100%;
margin-bottom: 40px;
}
.grid {
padding: 20px 0 0 20px;
list-style: none;
font-size: 32px;
}
.grid li {
float: left;
width: 50%;
padding: 0 20px 20px 0;
}
.grid div {
background: rgba(0,0,0,.4);
padding: 40px 20px;
text-align: center;
}

@media screen and (min-width: 600px) {
.grid li {
width: 33.333%;
}
}

@media screen and (min-width: 900px) {
.grid li {
width: 25%;
}
}

@media screen and (min-width: 1200px) {
.grid li {
width: 16.666%;
}
}
</style>
</head>
<body>
<div class="example">
<main>
<ul class="grid">
<li>
<div>
1
</div>
</li>
<li>
<div>
2
</div>
</li>
<li>
<div>
3
</div>
</li>
<li>
<div>
4
</div>
</li>
<li>
<div>
5
</div>
</li>
<li>
<div>
6
</div>
</li>
<li>
<div>
7
</div>
</li>
<li>
<div>
8
</div>
</li>
<li>
<div>
9
</div>
</li>
<li>
<div>
10
</div>
</li>
<li>
<div>
11
</div>
</li>
<li>
<div>
12
</div>
</li>
</ul>
</main>
</div>
</body>
</html>
106 changes: 106 additions & 0 deletions exercises/exercises/6.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=true" name="viewport">
<title></title>
<link rel="stylesheet" href="../base.css">
<style>
main {
/* A quirk of floats is that odd things happen if you don't float the container as well. */
float: left;
width: 100%;
margin-bottom: 40px;
}
.grid {
padding: 20px 0 0 20px;
list-style: none;
font-size: 32px;
}
.grid li {
float: left;
width: 200px;
padding: 0 20px 20px 0;
}
.grid div {
background: rgba(0,0,0,.4);
padding: 40px 20px;
text-align: center;
}

@media screen and (min-width: 900px) {
.grid li {
width: 25%;
}
}
</style>
</head>
<body>
<div class="example">
<main>
<ul class="grid">
<li>
<div>
1
</div>
</li>
<li>
<div>
2
</div>
</li>
<li>
<div>
3
</div>
</li>
<li>
<div>
4
</div>
</li>
<li>
<div>
5
</div>
</li>
<li>
<div>
6
</div>
</li>
<li>
<div>
7
</div>
</li>
<li>
<div>
8
</div>
</li>
<li>
<div>
9
</div>
</li>
<li>
<div>
10
</div>
</li>
<li>
<div>
11
</div>
</li>
<li>
<div>
12
</div>
</li>
</ul>
</main>
</div>
</body>
</html>
20 changes: 19 additions & 1 deletion exercises/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,10 @@ <h3>2: A Basic Layout</h3>
<p>Start by examining a simple fixed layout and then make it fluid using percentage-based widths.</p>
<ol>
<li>First, open up the page in Chrome and examine it with the dev tools, using the Elements pane with the Styles tab to see what is happening. Why is <code>&lt;main&lt;</code> next to <code>&lt;aside</code>?</li>
<li>Turn on Device mode. Pick a few devices and see what happens to the layout. Each time you change the device, you may (If you can't fit the device screen on your laptop's screen, enable the "fit" checkbox below the device model dropdown.)</li>
<li>Turn on Device mode. Pick a few devices and see what happens to the layout. Each time you change the device, you may need to reload the page. (If you can't fit the device screen on your laptop's screen, enable the "fit" checkbox below the device model dropdown.)</li>
<li>Using the dev tools, find where the <code>&lt;main&lt;</code>'s width is set. Edit the width in-place.</li>
<li>Reload the page to obliterate the temporary changes you made in the dev tools and return to viewing the saved CSS.</li>
<li>Note the fat, round cursor - the better to simulate fat fingers!</li>
<li>The simplest way to make a layout more responsive is to set all your widths in percentages. Using the dev tools, change the widths of <code>&lt;main&lt;</code> and <code>&lt;aside&lt;</code> to <code>70%</code> and <code>30%</code>, respectively.</li>
<li>Whoops! Something ain't right. Turns out, in addition to width, we have some margin infecting our layout. Let's go ahead and make the margin fluid as well, and subtract it from the width of <code>&lt;main&lt;</code>. In dev tools, make it's <code>width: 68%</code> and <code>margin-right: 2%</code>.</li>
<li>Now, go through a few devices (or drag the viewport handles) and see how the layout behaves. Turn off device-mode to see how it looks full-width.</li>
Expand Down Expand Up @@ -125,6 +126,23 @@ <h3>4: Mobile First</h3>
</ol>
</section>
</article>
<article>
<h3>5: Source Order Swap</h3>
<section>
<p>Learn a few ways to break the Tyranny of Source Order.</p>
TODO:
</section>
</article>
<article>
<h3>6: Infinite grids</h3>
<section>
<p></p>
<ol>
<li>The starting exercise page is already responsive, but in a kind of crude way. In Chrome's device-mode, check out the page at various widths and note how the spacing on the right side of the grid behaves.</li>
<li>Let's make the grid fluid </li>
</ol>
</section>
</article>
</main>

<script src="jquery.min.js"></script>
Expand Down

0 comments on commit f33ed4d

Please sign in to comment.