> Download Syllabus > Contact Dave

Web 1 Class Materials

Day 1: Intro to HTML: powerpoint, html cheatsheet, celeb assignment

Day 2: HTML day 2: Images on the Web Powerpoint, Celeb Assignment,Simple Site Homework. Starting a Website Project handout.

Day 3: finished HW from day 2, Intro to CSS powerpoint, CSS properties cheatsheets, 2 assignments: spiderman,box model

Day 4: Batch Processing in Photoshop, Starbucks assignment, Creating a CSS Layout (doc), Selectors review (ppt)

Day 5: Starbucks part2, Floats ppt, Float Lessons,

Day 6: Starbucks part3:Links, Inline vs Block, Webpage size, Grids Presentation, Grids in Photoshop (doc), 960 Grid System,

Day 7: Project Workday 1, Slicing assignment and doc., Rollover Buttons, Centering methods, Positioning

Day 8: Project Workday 2, Web Fonts, Putting your website online.

Day 9: Project Workday 3, Jquery lightbox

Day 10: Project Workday 4, Using FTP to upload website

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

Extras


That inline vs block image

The chapter from CSS Mastery that taught me about Floats
Photoshop Slicing Tutorial on Vimeo