In this class, students leave Dreamweaver behind to learn how the Internet really works as we build a strong foundation of HTML and CSS code as it applies to layout design. Emphasis is placed on front-end design, teaching students to translate pre-made designs into code that functions as a webpage. Students learn how to troubleshoot common problems using web development tools and best practices in web design. At the end of the course, students are able to recreate a variety of simple web layouts through code. No previous web experience is necessary but familiarity with graphic design concepts and proficiency in Adobe Photoshop is required.


The class will have three projects, which can be three separate sites, or a continuation of one. Each project will focus on different aspects of HTML and CSS. Students are encouraged to brainstorm sites beforehand in order to have a cohesive model before building for the web.

Project 1
Taking the basic HTML structure and implementing beginning CSS qualities like color and spacing, you will build a standard website. Its simplicity will encourage focus on textual content and the way it is presented on the page. Project 1 is meant to emphasize the basic componenets of HTML/CSS, while also introducing ways of viewing sites and working with HTML generators.

Project 2
Building in continuation from Project 1 site, or beginning a new site, we will focus on more advanced integration of CSS and HTML. Project 2 will implement standard components of web sites, like headers and footers. The site will be designed in Adobe Photoshop or Illustrator with the goal of mirroring the design via writing HTML/CSS.

Final Project
Building off of a pre-existing project, or beginning a new site, we will take everything we've learned in order to generate an amazing final website that is fully functional for presenting and hosting.


Here are some resources that span from well-made websites to things completely unrelated to websites:

CMAP: Using a nice interface for an ugly subject matter and a corresponding article
Mozilla Developer Network for HTML/CSS references
Hex Clock
HTML Color Picker
CSS Shorthand
Tall Pixels Blog
How CSS Triangles Work
Is The Grid going to dismiss the role of humans in web dev?


Review Syllabus / Overview of Course
Lecture: HTML basic syntax and structure
Demo: HTML skeleton webpage, using browsers

Lecture: Elements of Everything–DOM and hierarchy
Demo: CSS basics, spacing and images
Continue adding to Project 1 site

Lecture: Responsive Sites and Navigation
Demo: Build your own responsive site
Present Project 1 site

Lecture: Reverse Engineering and Troubleshooting 101
Demo: Advanced Nav Bars
Brainstorm Project 2 site

Lecture: User experience
Demo: Using Grids and Forms
Work on Project 2 site

Lecture: How the Internet works–dynamic vs. static sites, JavaScript, servers
Demo: Using Photoshop to draft a site and translating it to web, focusing on building shapes using CSS Download Photoshop file
Today's Code
Present Project 2 progress

Lecture: CSS Transitions and Animations
Demo: Implementing transitions and animations on a site
Demo II: Incorporating media into pages (audio, video)
Brainstorm and begin Final Project

Lecture: Using jQuery
Demo: Parallax and smooth scroll sites
Continue working on Final Project

Lecture: Finalizing your site
Demo: How to setup hosting and find a domain name
Class Exercise: Find and implement jQuery script
Continue working on Final Project

Present and critique Final Projects
Lecture: Where to go from here–boilerplates, Google Analytics, content management systems