Introduction to website design

Mondays from 6:00 pm–9:00 pm @ Maine College of Art

In this introductory course, you will learn the basics of web design and development. In order to understand good web design you have to have knowledge of how to develop for the web. You will be writing your own code, from scratch. Please come with a basic understanding of how to use the Mac platform and basic knowledge of some design software (such as Photoshop, Illustrator…)

If you’re interested, we recommend learning at home with this book: Head First HTML

For this course, you will learn:

• how the web works
• the tools you will need to create a website (we will not be teaching how to use the tools, but will introduce you to the options)
• HTML
• CSS—for styling and structure
• Best practices for web design

Each class is broken up into 3 parts: lecture/presentation of new concepts, exercises and personal project time.

This class will be focused on web design and not on instruction on how to use certain programs. We will mention Dreamweaver as a tool for web development, but we want you to understand how to write code yourself. Having the ability to write and truly understand HTML will allow you to more easily use a website editor such as Dreamweaver.

We only have 24 total hours to teach you a solid web design foundation so expect to spend some time outside of class working on your personal projects and practicing the concepts you’ve been taught.

Course Curriculum

Week 1

Topic: The language of the web; planning your website

Project: Collect a list of websites you like. Begin on homepage designs.

Week 1 files and resources →

Week 2

Show & Tell: Collection of websites

Topic: The web is not print; setting up your design; building blocks with HTML

Homework: Setup your index.html file, structure your directory

Week 2 files and resources →

Week 3

Show & Tell: Index.html markup & Directory

Topic: Intro to CSS

Homework: Styling your content with CSS; Homepage design

Week 3 files and resources →

Week 4

Show & Tell: Homepage design & html

Topic: CSS

Homework:  Begin on your homepage html/css, internal page design

Week 4 files and resources →

Week 5

Show & Tell: Internal page designs

Topic:  Typography; slicing designs; Advanced positioning with CSS

Homework: Internal page html markup; homepage layout with CSS

Week 5 files and resources →

Week 6

Show & Tell:  Review of your homepage and internal page html markup

Topic:  Advanced positioning with CSS, box model differences

Homework: Build html/css layouts for all pages

Week 6 files and resources →

Week 7

Show & Tell: Review your html/css pages

Topic:  Validating; browser checking; Working with development tools

Homework: Finalize your website

Week 7 files and resources →

class goodies teaching web design