Web Design, NJCU

 

Page of Useful Links

 
 

Refer to the text book, HTML & CSS Design and Build Websites, by Jon Duckett, for help with the following:

Padding: p. 313; Margins: p. 314; Font stacks, p. 269-270; CSS style tag <style> in the head element: p. 236; Webfonts, @fontface: p. 277; Class attribute: p. 184 & 238; ID attribute: p. 183 & 238; Navagation as unordered list: p. 79-80; Page layout structure: chapter 17, p. 428; The div element: p. 440.

 
 

Reference Lists of HTML elements and CSS:

Practice Code site:
http://jsbin.com/

Reference site to find HTML Code:
http://reference.sitepoint.com/html
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

CSS Reference site:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/CSS

Color Links:

Copy to paste any of the hexadecimal numbers to use in your web site:
http://www.w3schools.com/tags/ref_colornames.asp

Click on name or hex number, on the page below, to see that color as background, with other colors as a text color:
http://www.w3schools.com/tags/ref_colorpicker.asp

Choose a color and then see tints and tones of that color, and combinations of colors:
http://www.w3schools.com/tags/ref_colormixer.asp

Generate gradients through CSS:
http://css3gen.com/gradient-generator/

Tutorials and Help:

http://www.htmlandcssbook.com/code-samples/
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://www.w3schools.com
http://www.webmonkey.com/

960 Grid Tutorial:
http://www.sitepoint.com/design-organized-websites-rapidly-with-960-grid/

Navigation Analysis:
http://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites

Web site analized:
http://www.jlern.com/archived/

Bread crumbs for SEO usability
http://usabilitygeek.com/12-effective-guidelines-for-breadcrumb-usability-and-seo/

Teenagers, a statistical Study on what they like, how they use web sites:
http://www.nngroup.com/articles/usability-of-websites-for-teenagers/

Tips for making Photoshop Comps, for designers to make better comps:
http://mattgemmell.com/how-designers-can-help-developers/

Useful Articles:

http://alistapart.com/article/responsive-web-design

http://alistapart.com/article/fluidgrids

About CSS:

http://www.blueprintcss.org

http://csswizardry.com

Links on Typography:

TYPE Classifications:
http://www.oert.org/en/typographic-classification/

Web Safe Fonts and Font stacks::
http://www.w3schools.com/cssref/css_websafe_fonts.asp

Typographical properties of CSS
http://reference.sitepoint.com/css/typography

Free Web Fonts from Google:
http://www.google.com/fonts

The best of Google web fonts
http://hellohappy.org/beautiful-web-type/

A practical guide to web typography:
http://webtypography.net

Adobe's site for resource links on Typography:
http://nicewebtype.com

Reviews of best web fonts:
http://www.goodwebfonts.com

A tool for comparing web fonts with color, leading, tracking, etc.!
http://www.typetester.org

CSS Typography article:
http://sixrevisions.com/css/css-typography-03/

Video of Jonathan Hoefler on typography for the web:
http://www.aiga.org/event.aspx?Pageid=187&id=10418

Jonathan Hoefler is a type nerd, and is talking to other prof. designers, so he is assuming the audience knows a lot already, so somethings may go over your heads. But good just to see how much really good professionals care about type.

 
 

DIAGRAM of an ATTRIBUTE

The structure of the Attribute (which is added to some HTML elements; it tells us more about those elements)
Diagram of an attribute


 

Parts of a CSS Rule:

parts of a css rule


 

The structure of the box of an HTML element:

diagram of margin, border, padding

 

 

 

Chart of screen sizes/web page sizes

chart of screen sizes