_design_for_the_WWW

_weeks: 1 . 2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 10 . 11. 12 . 13 . 14 .

Week #14

Project #3 was due last week.
Please have it uploaded to a server.
Add a link to your personal class webpage, if you haven't already.

Let's talk about your Final Project


Talk about Quiz (next week)

*Give Back Grades

* This is happening today


Talk about resumés

HTML : Special Characters
"resumés"


What's responsive web design?

If there's time, we can talk more about Typography


Things to study for the quiz :

File management:
What should you save the first page of your website as?
What's a server?
What's a directory?
What's an IP Address?
What's a DNS?
What's FTP?
In the following URL, what's the domain name, and what's the file name?
http://ryansmithart.com/photos/other/Philly.html

What's the difference between a web browser & a search engine?

HTML:
<html>
<head>
<title> my title </title>
</head>
<body>
stuff
</body>
</html>

Paragraph tags

Line Breaks
Emphasis tags
Strong tags


What's "z-index" ? 

Inserting an image
<img src="images/flower.jpg" />

How to create a link
<a href="http://www.npr.org"> NPR News </a>

CSS:
CSS Syntax
p {color:red; font-family: Arial, Helvetica; }

How to Change the color of your links
a:link {text-decoration: underline; color: #000;}
a:visited {text-decoration: underline; color: #000;}
a:hover {text-decoration: none; color: #FFF; background-color:#0F0}
a:active {text-decoration: none; color: #000;}

CSS styles can be applied to
general page elements, CSS Classes, and specific items (ID values).

How do you code them?
p{color:red; }
.title{font-family:Arial Black; background-color:#CCC; }
#footy{height:20px; position:fixed; bottom:0px; width:100%;}

<span class="title"> This is the title </span>
<p>Red Text</p>
<div id="footy"> Footer </div>

What's the difference?
position:fixed;
&
position:relative;


other web design stuff:

What's a favicon?

What's the hexadecimal code for: 
red, green, blue, yellow, magenta, cyan, white, black, light & dark grey



David Carson:

ted.com/talks/david_carson_on_design

davidCarsonDesign.com

what are Graphic Design websites supposed to look like, and why?



What is "Responsive Web Design"?


https://www.youtube.com/watch?v=iSY38POjLYc

Examples:

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

My example w/ MEDIA QUERIES

article: "Responsive Web Design: What It Is and How To Use It"

book:
https://abookapart.com/products/responsive-web-design

Example #1
source:
tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

Bootstrap.html




Homework :


for next week:

----- QUIZ -----
*CSS, and 1 HTML page (for your Final Project), should be completed.
we might take a class photo

Note:
Printed copies of your business card, and resume will be due during the 16th week of class, when you submit your "Final Project".