Web 1 Class Materials
Day 1: Intro to HTML: powerpoint, html cheatsheet, celeb assignment
Day 5: Starbucks part2, Floats ppt, Float Lessons,
Day 8: Project Workday 2, Web Fonts, Putting your website online.
Homework
For Day 2: Oct 13
To start, sign up for an account at the CodeAcademy.com website. Select the "Web Fundamentals" section.
Complete the "HTML Basics" class (13 excersises).
Complete the "Build your own Webpage" course as well.
For Day 3: Oct 20
I would like you to write up the HTML page for the "Simple Site Homework" you will find in Day 2 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 crapload 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 you can find in the Day 2 Materials folder.
For Day 4: Oct 27
1. Take a look at the Dont Fear the Internet website. Watch video no.5 on CSS to refresh what was learned in class
2. Lets review CSS by actually coding some out. Complete the Css and Overview" class on Codecademy.com. Don't forget to sign in! This class has 5 sections to complete.
For Day 5: Nov 3
Your mission is to recreate the layout for the "layout-homework" folder inside of the Day 4 materials folder.
You will find a screenshot for a website. You only have to recreate the layout which means just the Divs in HTML and the CSS to make the layout work. (no content like pictures, links, text etc.) Refer to the handout "Starting a Web Project" from day 2 and then the "Making a layout in CSS" handout from Day 4.
Tip: You will run into a problem when creating the layout. For the BigPic div, set it to float:right instead of float:left.
For Day 6:
For the next class bring in a complete plan for your website project. Your site should be only 4 pages including the homepage.
Before you start sketching, make a list of the content,pages,links etc that you want to include on the site. Then create two sketches, one for the homepage and another for the inside pages.
To practice your CSS skills, complete the "CSS Selectors" course in Codecademy.
For Day 7:
For the next class bring in a completed design for at least one page of your site. You can complete this in either Photoshop, Illustrator or InDesign.
For Day 8:
At this point you should at least have your slicing for the website complete. It would be ideal if you had at least some of the code for your layout complete.(making divs, creating a wrapper, width/heights, floating etc.)
For Day 9:
At this point you should have at least one page of your website almost completely coded in HTML/CSS
Useful Curated Links
Tutorials
Code AcademyCool online teaching tool that shows you the basics of programming. Based around javascript, you learn to code by typing in code straight into the browser. Its a fun and painless way to learn programming.
30 days to learn HTML/CSS30 short videos that teach you web design. Looks good.
Don't Fear The InternetShort, entertaining videos on HTML/CSS by design sweetheart Jessica Hische. Limited selection however.
Method and CraftWeb tutorials that focuses on design software like Photoshop and Illustrator.
Lynda.comAmazing, incredible and super thorough tutorials on almost any software. From the Adobe suite to Microsoft office to programming languages. Its membership based but you have free access to it on campus. You will need to signup for Wifi access through the CRIT department. They will give you a login/pass for your wifi that will also give you access to Lynda.com
Code Reference
CSS BasicsOne of the best CSS resources online. Like an online textbook, everything is categorized neatly by topic. Easy to lookup any specific CSS topic
HTML DogWell organized and easy to understand tutorials in HTML and CSS
Learn CSS positioning in 10 easy stepsUseful, 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.
CSS3 FilesDevoted to being a resource for current CSS3 properties and their correct implementation.
W3 SchoolsVery large tutorial/reference site that many beginners refer to when starting out. Not technically associated with the w3c organization.
Further Reading
Smashing MagazineProminent web design blog that covers a full range of topics from coding to design. Tons of tutorials and current information.
Css TricksAmazing 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 ApartMore academic, blog on web design. More technical. Less entertaining but definitely reputable.
24 WaysWeb design blog that showcases articles from leading thought-leaders
Design / Inspiration
960 Grid SystemTemplates that make designing web grids easier. Click the "big ole download" button to get templates for a whole range of programs.
Design MeltdownFun inspiration site. Huge collection of well-designed websites categorized for easy browsing. Look up websites by color, business or design elements.
CSS Zen GardenCool site that shows you the power of CSS. Click different designs to see the homepage design completely alter just by changing the CSS stylesheet.
Subtle PatternsFree, quality backgrounds for your website. Images are tileable meaning they will repeat without showing any seams. Perfect for backgrounds and putting textures on divs,links,headings etc.
CSS Font StacksExamples of web-safe font stacks to use in your CSS. Gives you stats on availability of certain fonts on PC vs MAC.
Useful Tools
w3 HTML ValidatorDebug (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.
LiveWeavePractice coding HTML/CSS online without needing Dreamweaver. Even allows you to save your work as html/css files.
Code PenSee cool experiments done in HTML/CSS/Javascript and have the ability to edit them live in the browser.
FireFTP FTP pluginPlugin for Firefox that installs an FTP program into Firefox. Use an FTP program like this to transfer your files from your computer to your webhost.
Filezilla FTP programGreat FTP program that you can download for either PC or Mac. Use an FTP program like this to transfer your files from your computer to your webhost.
FireBug pluginPlugin 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.
960 Grid SystemTemplates that make designing web grids easier. Click the "big ole download" button to get templates for a whole range of programs.
Online Color PickerInstead of using Photoshop, select your colors with this easy to use interface.
JotFormOnline Contact Form creator. Drag and drop and one line of code to put in your page.
FUN STUFF
The Atlantis World's FairAn interactive illustration of a man travelling to the bottom of the sea... in a pipe.
Jess and RussJessica Hische's save-the-date. With parallax!
Code PenSee cool experiments done in HTML/CSS/Javascript and have the ability to edit them live in the browser.
Give and GoA collection of Dribble designs recreated completely through code. (Uses Codepen to show the coded versions)
Chrome ExperimentsChrome is arguably the most up-to-date browser. This is a series of experiments to test the new cutting edge features of HTML5 and CSS3.
