HTML and CSS Curriculum

Module 1: Introduction to Web Development

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapter 1 of Web Development and Design Foundations

Lab: HTML Resume

Topics

Module 2: Introduction to HTML

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapter 2 of Web Development and Design Foundations

Lab: Lab is Pacific Trails (Chp 2) from the textbook

Topics

Module 3: Introduction to CSS

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapter 3 of Web Development and Design Foundations

Lab: Pacific Trails Chp 3 from the textbook

Topics

Module 4: Website Images

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapter 4 of Web Development and Design Foundations

Lab: Lab is Pacific Trails (Chapter 4) from the textbook

Topics

Module 5: Positioning and Navigation

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapters 5 and 6 of Web Development and Design Foundations

Lab: Lab is Pacific Trails (Chapter 6) from the textbook

Topics

Module 6: Responsive Website Development

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapter 7 of Web Development and Design Foundations

Lab: Lab is Pacific Trails (Chapter 6) from the textbook

Topics

Module 7: HTML Tables and Forms

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapters 8 and 9 of Web Development and Design Foundations

Lab: Guitar Grooves: Tables and Forms

Topics

HTML Tables

CSS for Tables

About Tables

Forms: Client Side and Server Side

HTML Forms

CSS for Forms

Special Form Fields

Module 8: IT Careers and Multimedia

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapters 10 and 11 of Web Development and Design Foundations

Lab: Guitar Grooves: About Page (Map)and Videos Page

Topics

Your Career in Computer Science

Working As A Programmer

Code Standards

Multimedia

Module 9: E-Commerce and SEO

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapters 12 and 13 of Web Development and Design Foundations

Lab: Portfolio Website - Home Page, Resume Page and SEO

Topics

E-Commerce

Website Security

Electronic Data Interface

Search Engine Optimization

How to Make Money Making Websites

Module 10: JavaScript and jQuery

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: Chapter 14 of Web Development and Design Foundations (Last Chapter)

Lab: Make a Video Game

Topics

About JavaScript

Simple JavaScript

Frameworks

JQuery: A JavaScript Framework

Module 11: Frameworks, Font Awesome and Bootstrap

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: None

Lab: Best in Show Puppies

Topics

Frameworks

Font Awesome Icons (CSS Framework)

Grid Systems Frameworks

Bootstrap (CSS and JavaScript Framework)

Bootstrap Columns

Other Bootstrap Classes: Images, Navigation, and Responsive Videos

Module 12: Design Rules, Images, and Galleries

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: None

Lab: Images and Galleries Lab (Photography Website)

Topics

Simple Design Rules

Background vs. Embedded Images

Images Review

Image Sizes

Images 1 – 2 – 3

Two Ways to Code Hero Images

JavaScript Photo Gallery

Module 13: Header, Logo, and Navigation Design

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: None

Lab: Final Project First Draft (Usually the Portfolio Website)

Topics

Final Project 

How to Make a Simple Logo

Styling the Navigation

Module 14: Website Publishing

Module: Module Article

Slideshow: Module Slideshow

Assigned Reading: None

Lab: Publishing to Github Pages

Topics

Final Project Publishing Options

Purchasing a Domain Name

Website Hosting

Nameservers

FTP (File Transfer Protocol)

Github Pages

Modules and Labs

These modules were created for students at Saint Paul College and Anoka-Ramsey Community College. (Only Modules 1-10 are used for the ARCC course.)

The slideshows follow the order of the course textbook, Web Development and Design Foundations, by Terry Felke-Morris. Slideshows 2-6 refer to lab exercises provided in the textbook rather than on WebDevStudents.com.

Each module takes one week in a formal classroom setting.


Extra Credit Options

Throughout the slideshows you will see extra credit options.

Final Project Documents


Additional Presentations