> Download Syllabus > Contact Dave

Intermediate HTML/CSS Materials

Day 1: HTML/ CSS Review: Recreation of Basecamp Site

Day 2: 37signals basecamp day 2, Floating and Clears ppt, Using CSS for layout. Finished Homework assignment.

Day 3: Block vs Inline (doc), Links in CSS (doc), Anchor Links (doc) Finished 37 signals layout homework

Day 4: 37signals:finished hw, Overflow assignment, CSS Positioning, Tooltips, Anchor Tags

Day 5: Dropdown Menus, Webpage size, Photoshop Workflow, Slicing, Grids presentation

Day 6:Advanced CSS Layouts: Infinite Width site, Vertical Centered Site, Horizontal Scrolling site. Contact Forms: Presentation, assignment, docs

Day 7:Intro to Jquery, Jquery Slideshow Plugin, Lightbox Plugin

Day 8:Intro to Responsive Design, Web Fonts!

Day 9:Putting your site online (domain names and hosting), Css for Multiple Pages, Image Gallery Assignment

Day 10:Final Lecture: CSS3, Uploading through FTP, HTML5 Boilerplate

Homework

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.

Extras


That inline vs block image

The chapter from CSS Mastery that taught me about Floats

Completed infinite width page example. (like 37 signals... site extends to browser width)

Completed horizontal scrolling examples with 3 scrollable areas. (photography site)