If you need a refresher on HTML...
Go to the CodeAcademy.com website. And sign up for an account. Under the "learn" tab, select the "Web Fundamentals" section.
Click the "HTML Basics" class by Leng Lee.
Complete all three parts of the course
I also reccomend taking the "Project: Build your first Webpage" course. This is great practice to see if you retained everything from the class
Due Day 2: Feb 18
HTML practice assignment
I would like you to write up the HTML page for the "Simple Site Homework" you will find in Day 1 materials.
If you look inside the "screenshots" folder you will see the website which you have to recreate.
Inside you will also find a screenshot of what the site looks like without CSS, which is what you will
end up with when you are finished. Lastly, you will find a text doc with the necessary copy, so that you
don't have to type a ton of stuff.
To start, create a new folder on your desktop for this project, and place the "images" folder inside. From here,
you can follow my instructions on the handout entitled "starting a website project" which is also in the Day 1 materials folder.
Due Day 3: Feb 25
Practice using CSS for layout
I would like you to complete the Layout of the 37 signals site which you can find inside of the Day 2 materials folder.
For reference, follow the steps on my "Creating a Layout with CSS" document. You are only doing the CSS for layout... Don't worry about styling the text or any other content... just the Divs.
Due Day 4: March 4
Practice your CSS skills
... On the 37signals site. I would like you to complete the design from where we left on in class. Complete the design for the midfooter section (programs, projects and links)
Tip: to get things on separate lines... remember to switch Inline elements like links into Block level elements using display:block;
Due Day 6: March 18
Bring in a completed design for one page of your website class project.
It can be done in Photoshop, Illustrator or InDesign.
Due Day 7: April 1
Because we have a week off from class, this should give you more time to complete the design mockups in photoshop/illustrator/indesign for your websites. I reccomend having the homepage and one of the inner pages complety designed.
Due Day 8: April 8
Complete the layout code for at least one page in your website
Due Day 9: April 15
Complete the entire code... HTML/CSS for one page of your entire site.
Useful Curated Links
Lynda.com Free Access
Amazing, incredible and free access to Lynda.com. The best place for online tutorials on almost ANY software. Only free if you use at school.
Method and Craft
Web tutorials that focuses on design software like Photoshop and Illustrator.
30 days to learn HTML/CSS
30 short videos that teach you web design. Looks good.
Don't Fear The Internet
Short, entertaining videos on HTML/CSS by design sweetheart Jessica Hische. Limited selection however.
One of the best CSS resources online. Like an online textbook, everything is categorized neatly by topic. Easy to lookup any specific CSS topic
Well organized and easy to understand tutorials in HTML and CSS
Well organized online web tutorials and code reference.
Learn CSS positioning in 10 easy steps
Useful, although not too pretty site on positioning in CSS. Popular reference on the web. Teaches you the difference between Relative, Absolute and some stuff on floats.
Devoted to being a resource for current CSS3 properties and their correct implementation.
Prominent web design blog that covers a full range of topics from coding to design. Tons of tutorials and current information.
Amazing blog of Chris Coylier. Contains tons of written tutorials and articles but more importantly Video! Beautiful site, well organized, fun and easy to read. Good resource for learning Wordpress/CMS.
A List Apart
More academic, blog on web design. More technical. Less entertaining but definitely reputable.
Design / Inspiration
960 Grid System
Templates that make designing web grids easier. Click the "big ole download" button to get templates for a whole range of programs.
Fun inspiration site. Huge collection of well-designed websites categorized for easy browsing. Look up websites by color, business or design elements.
CSS Zen Garden
Cool site that shows you the power of CSS. Click different designs to see the homepage design completely alter just by changing the CSS stylesheet.
Practice coding HTML/CSS online without needing Dreamweaver. Even allows you to save your work as html/css files.
w3 HTML Validator
Debug (find problems) with your HTML code. Great tool for beginners who make alot of simple spelling/syntax mistakes.
CSS Lint (css validator)
Debug your CSS code. Great tool to find out syntax problems. Note: will not help with all problems in CSS, mostly just syntax errors which is HOW you write your code.
Plugin for Firefox that installs an FTP program into Firefox. Use this to upload your web fles to a webhost.
Plugin for Firefox that gives you fantasic web development tools in your browser. Look at all the code behind a website. Select an item on a website and see the HTML/CSS code behind that element. Very very useful.
Google Web Fonts
Free Webfonts through Google! Google has its own method for implementing @fontface so be aware.
Great list of free webfonts. And more importantly, the @Font-Face generator used to make webfont versions of any font (almost)
If you want to buy webfonts
If you absolutely need "famous" fonts like Helvetica, Bodoni. Paid service starts around $25 a year.
Not web fonts at all. Just free fonts online for you to download. Be careful as there are alot of ugly fonts here too.
Not web fonts at all either. Pay-what-you-wish model pretty much makes this a great list of free fonts.
The latest/correct way to write CSS3. Live editable code for CSS3. Change code and see it update live.
Don't type out all of those prefixes! Let this create the code for you.
Can I Use?
Look up CSS3 properties and which browsers support them.
Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
Css3 gradient Generator
Pretty self explanatory. Don't have to code these gradients yourself.
The Atlantis World's Fair
An interactive illustration of a man travelling to the bottom of the sea... in a pipe.
I Love Dust