Skip to content

Commit 42df91c

Browse files
mattmakaimattmakai
committed
moving location of learning checklists for client side pages
1 parent 50471c0 commit 42df91c

5 files changed

Lines changed: 87 additions & 87 deletions

File tree

‎cascading-style-sheets.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,6 @@ <h2>Why is CSS necessary?</h2>
5858
<a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog example</a>
5959
shows that navigation bar relocation scenario when you resize the browser
6060
width.</p>
61-
<h2>CSS learning checklist</h2>
62-
<p><i class="fa fa-check-square-o"></i>
63-
Create a simple HTML file with basic elements in it. Use the
64-
<code>python -m SimpleHTTPServer</code> command to serve it up. Create a
65-
<code>&lt;style&gt;&lt;/style&gt;</code> element within the <code>&lt;head&gt;</code> section in the HTML page.
66-
Start playing with CSS within that style element to change the look and feel
67-
of the page.</p>
68-
<p><i class="fa fa-check-square-o"></i>
69-
Check out front end frameworks such as Bootstrap and Foundation and integrate
70-
one of those into the HTML page.</p>
71-
<p><i class="fa fa-check-square-o"></i>
72-
Work through the framework's grid system, styling options and customization
73-
so you get comfortable with how to use the framework.</p>
74-
<p><i class="fa fa-check-square-o"></i>
75-
Apply the framework to your web application and tweak the design until you
76-
have something that looks much better than generic HTML.</p>
7761
<h2>How is CSS retrieved from a web server?</h2>
7862
<p>The HTML file sent by the web server contains a reference to the CSS file(s)
7963
needed to render the content. The web browser requests the CSS file after the
@@ -197,6 +181,22 @@ <h2>CSS resources</h2>
197181
implications of CSS complexity in browser rendering time.</p>
198182
</li>
199183
</ul>
184+
<h2>CSS learning checklist</h2>
185+
<p><i class="fa fa-check-square-o"></i>
186+
Create a simple HTML file with basic elements in it. Use the
187+
<code>python -m SimpleHTTPServer</code> command to serve it up. Create a
188+
<code>&lt;style&gt;&lt;/style&gt;</code> element within the <code>&lt;head&gt;</code> section in the HTML page.
189+
Start playing with CSS within that style element to change the look and feel
190+
of the page.</p>
191+
<p><i class="fa fa-check-square-o"></i>
192+
Check out front end frameworks such as Bootstrap and Foundation and integrate
193+
one of those into the HTML page.</p>
194+
<p><i class="fa fa-check-square-o"></i>
195+
Work through the framework's grid system, styling options and customization
196+
so you get comfortable with how to use the framework.</p>
197+
<p><i class="fa fa-check-square-o"></i>
198+
Apply the framework to your web application and tweak the design until you
199+
have something that looks much better than generic HTML.</p>
200200
<h3>Once your app is styled what do you need to learn next?</h3>
201201
<div class="row">
202202
<div class="col-md-3">

‎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-05-16T08:08:33Z</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-05-16T08:26:09Z</updated></feed>

‎javascript.html‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -55,28 +55,6 @@ <h2>Why is JavaScript necessary?</h2>
5555
<a href="https://angularjs.org/">Angular.js</a>,
5656
<a href="http://backbonejs.org/">Backbone.js</a>, and
5757
<a href="http://emberjs.com/">Ember.js</a> continue to mature.</p>
58-
<h2>JavaScript learning checklist</h2>
59-
<p><i class="fa fa-check-square-o"></i>
60-
Create a simple HTML file with basic elements in it. Use the
61-
<code>python -m SimpleHTTPServer</code> command to serve it up. Create a
62-
<code>&lt;script type="text/javascript"&gt;&lt;/script&gt;</code>
63-
element at the end of the <code>&lt;body&gt;</code> section in the HTML page. Start playing
64-
with JavaScript within that element to learn the basic syntax.</p>
65-
<p><i class="fa fa-check-square-o"></i>
66-
Download <a href="http://jquery.com/">JQuery</a> and add it to the page above your
67-
JavaScript element. Start working with JQuery and learning how it makes basic
68-
JavaScript easier.</p>
69-
<p><i class="fa fa-check-square-o"></i>
70-
Work with JavaScript on the page. Incorporate examples from open source
71-
projects listed below as well as JQuery plugins. Check out the Unheap link
72-
below to find a large collection of categorized JQuery plugins.</p>
73-
<p><i class="fa fa-check-square-o"></i>
74-
Check out the JavaScript resources below to learn more about advanced concepts
75-
and open source libraries.</p>
76-
<p><i class="fa fa-check-square-o"></i>
77-
Integrate JavaScript into your web application and check the
78-
<a href="/static-content.html">static content</a> section for how to host the JavaScript
79-
files.</p>
8058
<h2>Where did JavaScript originate?</h2>
8159
<p>JavaScript is an implementation of
8260
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview">the ECMAScript specification</a>
@@ -108,6 +86,28 @@ <h2>JavaScript resources</h2>
10886
plugins for everything from navigation to displaying media.</p>
10987
</li>
11088
</ul>
89+
<h2>JavaScript learning checklist</h2>
90+
<p><i class="fa fa-check-square-o"></i>
91+
Create a simple HTML file with basic elements in it. Use the
92+
<code>python -m SimpleHTTPServer</code> command to serve it up. Create a
93+
<code>&lt;script type="text/javascript"&gt;&lt;/script&gt;</code>
94+
element at the end of the <code>&lt;body&gt;</code> section in the HTML page. Start playing
95+
with JavaScript within that element to learn the basic syntax.</p>
96+
<p><i class="fa fa-check-square-o"></i>
97+
Download <a href="http://jquery.com/">JQuery</a> and add it to the page above your
98+
JavaScript element. Start working with JQuery and learning how it makes basic
99+
JavaScript easier.</p>
100+
<p><i class="fa fa-check-square-o"></i>
101+
Work with JavaScript on the page. Incorporate examples from open source
102+
projects listed below as well as JQuery plugins. Check out the Unheap link
103+
below to find a large collection of categorized JQuery plugins.</p>
104+
<p><i class="fa fa-check-square-o"></i>
105+
Check out the JavaScript resources below to learn more about advanced concepts
106+
and open source libraries.</p>
107+
<p><i class="fa fa-check-square-o"></i>
108+
Integrate JavaScript into your web application and check the
109+
<a href="/static-content.html">static content</a> section for how to host the JavaScript
110+
files.</p>
111111
<h3>Do you need to style your app or deploy it next?</h3>
112112
<div class="row">
113113
<div class="col-md-3">

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -35,27 +35,6 @@ shows that navigation bar relocation scenario when you resize the browser
3535
width.
3636

3737

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

164143

144+
## CSS learning checklist
145+
<i class="fa fa-check-square-o"></i>
146+
Create a simple HTML file with basic elements in it. Use the
147+
``python -m SimpleHTTPServer`` command to serve it up. Create a
148+
``<style></style>`` element within the ``<head>`` section in the HTML page.
149+
Start playing with CSS within that style element to change the look and feel
150+
of the page.
151+
152+
<i class="fa fa-check-square-o"></i>
153+
Check out front end frameworks such as Bootstrap and Foundation and integrate
154+
one of those into the HTML page.
155+
156+
<i class="fa fa-check-square-o"></i>
157+
Work through the framework's grid system, styling options and customization
158+
so you get comfortable with how to use the framework.
159+
160+
<i class="fa fa-check-square-o"></i>
161+
Apply the framework to your web application and tweak the design until you
162+
have something that looks much better than generic HTML.
163+
164+
165165
### Once your app is styled what do you need to learn next?

‎source/content/pages/05-client-side/0503-javascript.markdown‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,33 @@ experiences will increase as projects such as
3131
[Ember.js](http://emberjs.com/) continue to mature.
3232

3333

34+
## Where did JavaScript originate?
35+
JavaScript is an implementation of
36+
[the ECMAScript specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview)
37+
which is defined by the
38+
[Ecma International Standards Body](http://www.ecma-international.org/default.htm).
39+
40+
41+
## JavaScript resources
42+
* [How Browsers Work](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
43+
is a great overview of both JavaScript and CSS as well as how pages are
44+
rendered in a browser.
45+
46+
* [A re-introduction to JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
47+
by Mozilla walks through the basic syntax and operators.
48+
49+
* [Coding tools and JavaScript libraries](http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/)
50+
is a huge list by Smashing Magazine with explanations for each tool and
51+
library for working with JavaScript.
52+
53+
* [Superhero.js](http://superherojs.com/) is an incredibly well designed list
54+
of resources for how to test, organize, understand and generally work with
55+
JavaScript.
56+
57+
* [Unheap](http://www.unheap.com/) is an amazing collection of reusable JQuery
58+
plugins for everything from navigation to displaying media.
59+
60+
3461
## JavaScript learning checklist
3562
<i class="fa fa-check-square-o"></i>
3663
Create a simple HTML file with basic elements in it. Use the
@@ -59,31 +86,4 @@ Integrate JavaScript into your web application and check the
5986
files.
6087

6188

62-
## Where did JavaScript originate?
63-
JavaScript is an implementation of
64-
[the ECMAScript specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview)
65-
which is defined by the
66-
[Ecma International Standards Body](http://www.ecma-international.org/default.htm).
67-
68-
69-
## JavaScript resources
70-
* [How Browsers Work](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
71-
is a great overview of both JavaScript and CSS as well as how pages are
72-
rendered in a browser.
73-
74-
* [A re-introduction to JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
75-
by Mozilla walks through the basic syntax and operators.
76-
77-
* [Coding tools and JavaScript libraries](http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/)
78-
is a huge list by Smashing Magazine with explanations for each tool and
79-
library for working with JavaScript.
80-
81-
* [Superhero.js](http://superherojs.com/) is an incredibly well designed list
82-
of resources for how to test, organize, understand and generally work with
83-
JavaScript.
84-
85-
* [Unheap](http://www.unheap.com/) is an amazing collection of reusable JQuery
86-
plugins for everything from navigation to displaying media.
87-
88-
8989
### Do you need to style your app or deploy it next?

0 commit comments

Comments
 (0)