Skip to content

Commit 9dc71f1

Browse files
mattmakaimattmakai
committed
adding new web design page
1 parent b1737cb commit 9dc71f1

Some content is hidden

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

45 files changed

+685
-52
lines changed

‎about-author.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,7 @@ <h3 class="panel-head">Table of Contents</h3>
343343
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
344344
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
345345
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
346+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
346347
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
347348
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
348349
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎all.html‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1955,29 +1955,51 @@ <h2>NoSQL data stores learning checklist</h2>
19551955
Evaluate other use cases such as storing transient logs in document-oriented
19561956
data stores such as MongoDB.</p>
19571957
<h3>What's next?</h3>
1958-
<h1>Cascading Style Sheets (CSS)</h1>
1959-
<p>Cascading Style Sheet (CSS) files contain rules for how to display and
1960-
lay out the HTML content when it is rendered by a web browser.</p>
1961-
<h2>Why is CSS necessary?</h2>
1962-
<p>CSS separates the content contained in HTML files from how the content
1963-
should be displayed. It is important to separate the content from the rules
1964-
for how it should be rendered primarily because it is easier to reuse those
1965-
rules across many pages. CSS files are also much easier to maintain on large
1966-
projects than styles embedded within the HTML files.</p>
1958+
<h1>Web Design</h1>
1959+
<p>Web design is the creation of a web application's style and user interaction
1960+
using CSS and JavaScript.</p>
1961+
<h2>Why is web design important?</h2>
1962+
<p>You don't really expect users to use your 2014 web application if it looks
1963+
like this, do you?</p>
1964+
<p><img src="theme/img/no-style-webpage.png" width="100%" alt="HTML with no CSS or JavaScript." class="technical-diagram" /> </p>
1965+
<p>Creating web pages with their own style and interactivity so users can easily
1966+
accomplish their tasks is a major part of building modern web applications.</p>
19671967
<h2>Responsive design</h2>
19681968
<p>Separating the content from the rules for how to display the content allows
19691969
devices to render the output differently based on factors such as screen size
19701970
and device type. Displaying content differently based on varying screen
19711971
attributes is often called <em>responsive design</em>. The responsiveness is
19721972
accomplished by implementing
19731973
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>
1974-
in the CSS. </p>
1974+
in the <a href="/cascading-style-sheets.html">CSS</a>. </p>
19751975
<p>For example, a mobile device does not have as much space to display a
19761976
navigation bar on the side of a page so it is often pushed down
19771977
below the main content. The
19781978
<a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog example</a>
19791979
shows that navigation bar relocation scenario when you resize the browser
19801980
width.</p>
1981+
<h2>Design resources</h2>
1982+
<ul>
1983+
<li>
1984+
<p>The <a href="http://bootstrappingdesign.com/">Bootstrapping Design</a> book is one of
1985+
the clearest and concise resources for learning design that I've ever read.
1986+
Highly recommended especially if you feel you have no design skills but
1987+
need to learn them.</p>
1988+
</li>
1989+
<li>
1990+
<p><a href="https://kuler.adobe.com/create/color-wheel/">Kuler</a> is a complementary
1991+
color picker by Adobe that helps choose colors for your designs.</p>
1992+
</li>
1993+
</ul>
1994+
<h1>Cascading Style Sheets (CSS)</h1>
1995+
<p>Cascading Style Sheet (CSS) files contain rules for how to display and
1996+
lay out the HTML content when it is rendered by a web browser.</p>
1997+
<h2>Why is CSS necessary?</h2>
1998+
<p>CSS separates the content contained in HTML files from how the content
1999+
should be displayed. It is important to separate the content from the rules
2000+
for how it should be rendered primarily because it is easier to reuse those
2001+
rules across many pages. CSS files are also much easier to maintain on large
2002+
projects than styles embedded within the HTML files.</p>
19812003
<h2>How is CSS retrieved from a web server?</h2>
19822004
<p>The HTML file sent by the web server contains a reference to the CSS file(s)
19832005
needed to render the content. The web browser requests the CSS file after the
@@ -2057,19 +2079,6 @@ <h2>CSS frameworks</h2>
20572079
<p><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></p>
20582080
</li>
20592081
</ul>
2060-
<h2>Design resources</h2>
2061-
<ul>
2062-
<li>
2063-
<p>The <a href="http://bootstrappingdesign.com/">Bootstrapping Design</a> book is one of
2064-
the clearest and concise resources for learning design that I've ever read.
2065-
Highly recommended especially if you feel you have no design skills but
2066-
need to learn them.</p>
2067-
</li>
2068-
<li>
2069-
<p><a href="https://kuler.adobe.com/create/color-wheel/">Kuler</a> is a complementary
2070-
color picker by Adobe that helps choose colors for your designs.</p>
2071-
</li>
2072-
</ul>
20732082
<h2>CSS resources</h2>
20742083
<ul>
20752084
<li>

‎api-creation.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -461,6 +461,7 @@ <h3 class="panel-head">Table of Contents</h3>
461461
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
462462
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
463463
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
464+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
464465
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
465466
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
466467
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎api-integration.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,7 @@ <h3 class="panel-head">Table of Contents</h3>
402402
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
403403
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
404404
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
405+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
405406
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
406407
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
407408
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎application-dependencies.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -479,6 +479,7 @@ <h3 class="panel-head">Table of Contents</h3>
479479
<a href="/application-dependencies.html" class="list-group-item smaller-item active">Application Dependencies</a>
480480
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
481481
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
482+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
482483
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
483484
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
484485
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎application-programming-interfaces.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -403,6 +403,7 @@ <h3 class="panel-head">Table of Contents</h3>
403403
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
404404
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
405405
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
406+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
406407
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
407408
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
408409
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎best-python-resources.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -489,6 +489,7 @@ <h3 class="panel-head">Table of Contents</h3>
489489
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
490490
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
491491
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
492+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
492493
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
493494
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
494495
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎bottle.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,7 @@ <h3 class="panel-head">Table of Contents</h3>
383383
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
384384
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
385385
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
386+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
386387
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
387388
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
388389
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎caching.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -382,6 +382,7 @@ <h3 class="panel-head">Table of Contents</h3>
382382
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
383383
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
384384
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
385+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
385386
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
386387
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
387388
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

‎cascading-style-sheets.html‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,6 @@ <h2>Why is CSS necessary?</h2>
4747
for how it should be rendered primarily because it is easier to reuse those
4848
rules across many pages. CSS files are also much easier to maintain on large
4949
projects than styles embedded within the HTML files.</p>
50-
<h2>Responsive design</h2>
51-
<p>Separating the content from the rules for how to display the content allows
52-
devices to render the output differently based on factors such as screen size
53-
and device type. Displaying content differently based on varying screen
54-
attributes is often called <em>responsive design</em>. The responsiveness is
55-
accomplished by implementing
56-
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>
57-
in the CSS. </p>
58-
<p>For example, a mobile device does not have as much space to display a
59-
navigation bar on the side of a page so it is often pushed down
60-
below the main content. The
61-
<a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog example</a>
62-
shows that navigation bar relocation scenario when you resize the browser
63-
width.</p>
6450
<h2>How is CSS retrieved from a web server?</h2>
6551
<p>The HTML file sent by the web server contains a reference to the CSS file(s)
6652
needed to render the content. The web browser requests the CSS file after the
@@ -140,19 +126,6 @@ <h2>CSS frameworks</h2>
140126
<p><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></p>
141127
</li>
142128
</ul>
143-
<h2>Design resources</h2>
144-
<ul>
145-
<li>
146-
<p>The <a href="http://bootstrappingdesign.com/">Bootstrapping Design</a> book is one of
147-
the clearest and concise resources for learning design that I've ever read.
148-
Highly recommended especially if you feel you have no design skills but
149-
need to learn them.</p>
150-
</li>
151-
<li>
152-
<p><a href="https://kuler.adobe.com/create/color-wheel/">Kuler</a> is a complementary
153-
color picker by Adobe that helps choose colors for your designs.</p>
154-
</li>
155-
</ul>
156129
<h2>CSS resources</h2>
157130
<ul>
158131
<li>
@@ -504,6 +477,7 @@ <h3 class="panel-head">Table of Contents</h3>
504477
<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
505478
<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
506479
<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
480+
<a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
507481
<a href="/cascading-style-sheets.html" class="list-group-item smaller-item active">Cascading Style Sheets</a>
508482
<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
509483
<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

0 commit comments

Comments
 (0)