We'll be collecting resources throughout the quarter: please share the ones you come across.
For our lecture on Forms, please open form-start.html and download the Forms Handout.
To complete Assignment 7, you will also need the Formhandler Handout and formhandler file.
Recommended additional reading on HTML5 form elements:
Want to make your forms more cool? Of course you do! Here's a page that demonstrates how to use JavaScript to clear a textarea's default text on focus. It also shows how to style the textarea's default text.
Now that you know how to add JavaScript to your page, here is some sweet jQuery image rollover code:
http://kaidez.com/tutorial-simple-effective-jquery-image-rollover/
On Monday we'll be covering Faux Columns, Backgrounds, and Rounded Corners.
Please download faux-columns.zip and view the source code on rounded-corners.html.
(There's no handout, just the annotated HTML files.)
Required reading for this week:
For Monday's class, please download the Image Gallery handout and the image gallery starter files: image-gallery-lightbox.zip.
The image gallery we'll be using is http://lokeshdhakar.com/projects/lightbox2/.
Here's the study guide for our third quiz, which is scheduled for Monday March 3rd at 10:00 AM.
Open your basic-template.html file and download the Styling Vertical Lists handout. We'll be using it to walk through Exercise 4 (due Wednesday, February 26th).
The You Are Here handout shows how to create current-page styles in your nav. In other words, this method allows you to have unique nav styles for the page you are currently on: the About page nav item is lit up on the About page, the Contact page nav item is lit up on the Contact page, etc.
This is not required, but is worth 15 points extra credit on your final project.
This video of Natalie MacLees' presentation at WordCamp 2013 is a terrific resource on responsive typography.
You may also be interested in Justin Briggs' WordCamp 2013 presentation on SEO (search engine optimization).
Both talks are pitched toward people building sites in WordPress, but most of the info is applicable to non-WordPress sites as well.
The material in these videos is NOT required for this course ... I just thought you might be interested.
For Exercise 3 (due Friday February 14th), please download navbar.zip. You'll also want a copy of our Horizontal Navbar handout, which shows how to create an elegant navigation bar from a simple list and two gradient images.
Detailed requirements for Exercise 3 are on the homework page.
Negative space:
Color:
Typography:
Contrast:
Accessibility:
Legibility:
Here's a good article on how to use @font-face to bring non-web-safe fonts to your pages.
And here's a simplified "how-to" without all the explanations, just a nice code example: http://boldperspective.com/2011/how-to-use-css-font-face/
fontsquirrel.com also offers a great @font-face generator that produces code with good cross-browser support.
Note: As with images and other media, check the license of the font you wish to use before implementing it. Many fonts are not yet licensed for this kind of use on the web.
Adding subtle background patterns to one or two design elements can really add depth to a web page. (Don't overdo it.) subtlepatterns.com offers a wide variety of free background pattern images, and the option to preview each one before downloading it.
The Styling Links Handout walks you through the info you'll need to complete Exercise 2.
ColorZilla is a very useful FREE Firefox add-on that lets you pick colors from web sites.
On Wednesday you'll need the handout on how to make php includes.
As you write the CSS for each page or site you build, remember to write global styles (styles that select only the HTML tag) first, and then write location-specific selectors to create exceptions to the global rules.
Here's a handy tool for checking to see how each HTML tag will be displayed by your CSS:
If you view the HTML page and you see browser-default styles (or none, because you used CSS resets) for a particular HTML element, it's time to add global styles for that element to your CSS style sheet.
Our Dreamweaver tutorials provide the info you'll need to manage your sites with Dreamweaver.
If you are using Dreamweaver CS3 or CS4 at home, you may find Mike Sinkula's Dreamweaver tutorial helpful:
http://www.sccc.premiumdw.com/web200/managing-your-websites-with-dreamweaver/
The Firebug extension for Firefox is an awesome tool. We'll be using it a lot in this class. Here's a basic firebug tutorial, and here are a couple of firebug videos to get you started:
When we use a clickable logo image in our header, we also want to include machine-readable headline text within our h1 tag for SEO. But we'll want the logo, not the text, to display on the screen. Here's how to do it:
<h1>
<a href="index.php">
<span>My Headline Text</span> <!-- for SEO -->
<img src="images/logo.jpg" id="logo"
alt="My Headline Text" <!-- for screen readers -->
width="XXX" height="YYY" />
</a>
</h1>
h1 span {
display:none;
}
/* h1 text inside the span tag does not visually display,
but search engines can read it in the HTML code */
Note that the <a> tag wraps both the text and the image, and the <h1> tag wraps everything.
This text file is a template for the sort of client documentation I provide each time I build a site. The site owner should always have access to their domain name registrar, their hosting account, FTP access to their server files, and (if applicable) their database, WordPress dashboard, email accounts etc. etc.
Please note: don't ever, ever upload your clients' private account credentials to the internet, where anyone can see it. Part of our job is helping our clients learn good security practices.
The Site Map Handout explains the process I recommend for completing Assignment 3.
This week you'll also want the CSS Positioning Handout.
Here's the study guide for our second quiz, which will be held on Wednesday January 29th at 10:00 AM.
For Monday's lecture (and Assignment 2) you'll need the handout on how to create an AIA document.
Understanding how floats work is key to creating layouts with CSS. Here's a floats tutorial that explains it step by step. Be sure to view the source code on the page to see my HTML, CSS, and comments.
It's very useful to set your layout on grid. Remember that you can make any grid you want, with columns and gutters of any size you want. Your page width and grid should be based on the number of columns you need and the gutter width you want, not the other way around!
Here's a 12 column grid with 20px gutters between columns. We'll use it to design our basic template for Exercise 1.Here's a diagram of a 3-column floated layout using HTML5 blocking elements. We'll use this to build a basic template to use as a starting place for our sites.
Converting your basic template into a 2-column template is easy: just remove the extra sidebar and the #main div, and reduce your wrapper width to give your page an appropriate line length for each of your two columns. Here's a diagram of a 2-column floated layout.
An important part of web authoring is properly attributing each element of your web page to its respective owner. Every page you create for this course should have a copyright notice in the footer. While the details of international copyright law are beyond the scope of this class, here's some basic information about how to write a copyright notice.
Lipsum.com is a great Lorem Ipsum generator, but it tends to create paragraphs and lists that are a bit long for use on the web. So I've created my own Lorem Ipsum document, with shorter paragraphs and lists. Feel free to use it.
Here are recordings of our Week One classes.
Please help me remember to turn the recorder on at the beginning of class, and when we return from our breaks.
Here's the study guide for our first quiz. The quiz questions are from the course syllabus. We'll have the quiz next Monday at 10:00 AM.
While school server space is available to everyone who is currently registered, I'd like to strongly encourage you to get your own (non-school) hosting account.
I recommend that you do a little research and read online reviews of web hosting services before making a decision.
Please don't use a free hosting service: having professional, reliable service and access to support when you need it is well worth a few dollars a month.
Please do not use a hosting account that won't give you FTP access to your files (i.e. don't use one that has you upload files through a browser interface), and don't use one that places pop-up ads on your pages.
http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/
Here are some good places to find well-designed web sites as inspiration.
http://webdesignledger.com/inspiration/21-examples-of-black-white-grey-in-web-design
http://www.webdesignerwall.com/trends/50-minimal-sites/
http://www.webdesignerwall.com/trends/30-untypical-wordpress-sites/
http://www.webdesignerwall.com/trends/best-of-css-design-2009/
http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
Have other good resources to recommend? Email me and I'll add them to the list.