Skip to content

Commit 85f9f16

Browse files
mattmakaimattmakai
committed
adding checklist to css section
1 parent 1c31fbe commit 85f9f16

6 files changed

Lines changed: 85 additions & 43 deletions

File tree

‎api-integration.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,23 @@ <h1>API Integration</h1>
5858
<h2>API Integration Resources</h2>
5959
<ul>
6060
<li>
61+
<p>John Sheehan's
62+
"<a href="https://speakerdeck.com/johnsheehan/zen-and-the-art-of-api-maintenance">Zen and the Art of API Maintenance</a>"
63+
slides are relevant for API integration.</p>
64+
</li>
65+
<li>
66+
<p>This post on
67+
"<a href="https://stormpath.com/blog/api-driven-development/">API Driven Development</a>"
68+
by Randall Degges explains how using APIs in your application cuts down
69+
on the amount of code you have to write and maintain so you can launch your
70+
application faster.</p>
71+
</li>
72+
<li>
73+
<p><a href="http://www.slideshare.net/SmartBear_Software/safe-sex-with-thirdparty-apis">Safe Sex with Third Party APIs</a>
74+
is a funny high level overview of what you should do to protect your
75+
application when relying on third party services.</p>
76+
</li>
77+
<li>
6178
<p>My DjangoCon 2013 talk dove into
6279
"<a href="http://www.youtube.com/watch?v=iGP8DQIqxXs">Making Django Play Nice With Third Party Services</a>."</p>
6380
</li>

‎cascading-style-sheets.html‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,22 @@ <h2>Why is CSS necessary?</h2>
5656
below the main content. The
5757
<a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog example</a>
5858
shows that scenario when you resize the browser width.</p>
59-
<h2>How is CSS retrieved from the web server?</h2>
59+
<h2>CSS learning checklist</h2>
60+
<p><i class="fa fa-check-square-o"></i>
61+
Create a simple HTML file with basic elements in it. Use the
62+
<code>python -m SimpleHTTPServer</code> command to serve it up. Create a <code>&lt;style&gt;</code>
63+
section within the <code>&lt;head&gt;</code> section in the HTML page. Start playing with CSS
64+
to change the look and feel of the page.</p>
65+
<p><i class="fa fa-check-square-o"></i>
66+
Check out front end frameworks such as Bootstrap and Foundation and integrate
67+
one of those into the HTML page.</p>
68+
<p><i class="fa fa-check-square-o"></i>
69+
Work through the framework's grid system, styling options and customization
70+
so you get comfortable with how to use the framework.</p>
71+
<p><i class="fa fa-check-square-o"></i>
72+
Apply the framework to your web application and tweak the design until you
73+
have something that looks much better than generic HTML.</p>
74+
<h2>How is CSS retrieved from a web server?</h2>
6075
<p>The HTML file sent by the web server contains a reference to the CSS file(s)
6176
needed to render the content. The web browser requests the CSS file after the
6277
HTML file as shown below in a screenshot captured of the Chrome Web Developer
@@ -142,32 +157,33 @@ <h2>CSS resources</h2>
142157
</li>
143158
</ul>
144159
<h3>Once your app is styled what do you need to learn next?</h3>
145-
<div class="row">
160+
<div class="row">
146161
<div class="col-md-4">
147162
<div class="well select-next">
148163
<a href="/javascript.html" class="btn btn-success btn-full"><i class="fa fa-html5 fa-inverse fa-2x"></i></a>
149164
<p class="under-btn">
150-
How do I create a better browser experience with JavaScript?
165+
How do I create more dynamic interaction in the browser with JavaScript?
151166
</p>
152167
</div>
153168
</div>
154169
<div class="col-md-4">
155170
<div class="well select-next">
156171
<a href="/static-content.html" class="btn btn-success btn-full"><i class="fa fa-spinner fa-inverse fa-2x"></i></a>
172+
</a>
157173
<p class="under-btn">
158-
How should I host my static content such as my CSS files?
174+
How should I host static content such as my CSS files?
159175
</p>
160176
</div>
161177
</div>
162178
<div class="col-md-4">
163179
<div class="well select-next">
164180
<a href="/source-control.html" class="btn btn-success btn-full"><i class="fa fa-code-fork fa-inverse fa-2x"></i></a>
165181
<p class="under-btn">
166-
How do I save and version my code so it doesn't get lost?
182+
How can I save and version my code so it doesn't get lost?
167183
</p>
168184
</div>
169185
</div>
170-
</div> <style type="text/css">
186+
</div> <style type="text/css">
171187
#mc_embed_signup{background:#fff; clear:left; font:12px "Helvetica Neue",Arial,sans-serif; }
172188
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
173189
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

‎feeds/all.atom.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<feed xmlns="http://www.w3.org/2005/Atom"><title>Matt Makai</title><link href="http://www.fullstackpython.com/" rel="alternate"></link><link href="http://www.fullstackpython.com/feeds/all.atom.xml" rel="self"></link><id>http://www.fullstackpython.com/</id><updated>2014-04-27T13:28:12Z</updated></feed>
2+
<feed xmlns="http://www.w3.org/2005/Atom"><title>Matt Makai</title><link href="http://www.fullstackpython.com/" rel="alternate"></link><link href="http://www.fullstackpython.com/feeds/all.atom.xml" rel="self"></link><id>http://www.fullstackpython.com/</id><updated>2014-04-27T14:40:54Z</updated></feed>

‎source/content/pages/05-client-side/0501-css.markdown‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ title: Cascading Style Sheets
22
category: page
33
slug: cascading-style-sheets
44
sort-order: 051
5-
choice1url:
6-
choice1icon:
7-
choice1text:
8-
choice2url:
9-
choice2icon:
10-
choice2text:
11-
choice3url:
12-
choice3icon:
13-
choice3text:
5+
choice1url: /javascript.html
6+
choice1icon: fa-html5 fa-inverse
7+
choice1text: How do I create more dynamic interaction in the browser with JavaScript?
8+
choice2url: /static-content.html
9+
choice2icon: fa-spinner fa-inverse
10+
choice2text: How should I host static content such as my CSS files?
11+
choice3url: /source-control.html
12+
choice3icon: fa-code-fork fa-inverse
13+
choice3text: How can I save and version my code so it doesn't get lost?
1414
choice4url:
1515
choice4icon:
1616
choice4text:
@@ -20,6 +20,7 @@ choice4text:
2020
Cascading Style Sheet (CSS) files contain rules for how to display and
2121
lay out the HTML content when it is rendered by a web browser.
2222

23+
2324
## Why is CSS necessary?
2425
CSS separates content contained in the HTML file from how the content
2526
should be displayed. That separation between content and how to display it
@@ -31,7 +32,27 @@ below the main content. The
3132
shows that scenario when you resize the browser width.
3233

3334

34-
## How is CSS retrieved from the web server?
35+
## CSS learning checklist
36+
<i class="fa fa-check-square-o"></i>
37+
Create a simple HTML file with basic elements in it. Use the
38+
``python -m SimpleHTTPServer`` command to serve it up. Create a ``<style>``
39+
section within the ``<head>`` section in the HTML page. Start playing with CSS
40+
to change the look and feel of the page.
41+
42+
<i class="fa fa-check-square-o"></i>
43+
Check out front end frameworks such as Bootstrap and Foundation and integrate
44+
one of those into the HTML page.
45+
46+
<i class="fa fa-check-square-o"></i>
47+
Work through the framework's grid system, styling options and customization
48+
so you get comfortable with how to use the framework.
49+
50+
<i class="fa fa-check-square-o"></i>
51+
Apply the framework to your web application and tweak the design until you
52+
have something that looks much better than generic HTML.
53+
54+
55+
## How is CSS retrieved from a web server?
3556
The HTML file sent by the web server contains a reference to the CSS file(s)
3657
needed to render the content. The web browser requests the CSS file after the
3758
HTML file as shown below in a screenshot captured of the Chrome Web Developer

‎source/content/pages/06-apis/0601-api-integration.markdown‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,20 @@ across many implementation areas.
3131

3232

3333
## API Integration Resources
34+
* John Sheehan's
35+
"[Zen and the Art of API Maintenance](https://speakerdeck.com/johnsheehan/zen-and-the-art-of-api-maintenance)"
36+
slides are relevant for API integration.
37+
38+
* This post on
39+
"[API Driven Development](https://stormpath.com/blog/api-driven-development/)"
40+
by Randall Degges explains how using APIs in your application cuts down
41+
on the amount of code you have to write and maintain so you can launch your
42+
application faster.
43+
44+
* [Safe Sex with Third Party APIs](http://www.slideshare.net/SmartBear_Software/safe-sex-with-thirdparty-apis)
45+
is a funny high level overview of what you should do to protect your
46+
application when relying on third party services.
47+
3448
* My DjangoCon 2013 talk dove into
3549
"[Making Django Play Nice With Third Party Services](http://www.youtube.com/watch?v=iGP8DQIqxXs)."
3650

‎source/theme/templates/chapters/cascading-style-sheets.html‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +0,0 @@
1-
<div class="row">
2-
<div class="col-md-4">
3-
<div class="well select-next">
4-
<a href="/javascript.html" class="btn btn-success btn-full"><i class="fa fa-html5 fa-inverse fa-2x"></i></a>
5-
<p class="under-btn">
6-
How do I create a better browser experience with JavaScript?
7-
</p>
8-
</div>
9-
</div>
10-
<div class="col-md-4">
11-
<div class="well select-next">
12-
<a href="/static-content.html" class="btn btn-success btn-full"><i class="fa fa-spinner fa-inverse fa-2x"></i></a>
13-
<p class="under-btn">
14-
How should I host my static content such as my CSS files?
15-
</p>
16-
</div>
17-
</div>
18-
<div class="col-md-4">
19-
<div class="well select-next">
20-
<a href="/source-control.html" class="btn btn-success btn-full"><i class="fa fa-code-fork fa-inverse fa-2x"></i></a>
21-
<p class="under-btn">
22-
How do I save and version my code so it doesn't get lost?
23-
</p>
24-
</div>
25-
</div>
26-
</div>

0 commit comments

Comments
 (0)