About

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.

Assignments

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 1Taking 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 2Building 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 ProjectBuilding 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.

Resources

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