HTML and CSS Curriculum

Module 1: Introduction to Web Development

Go To Module

Assigned Reading: Chapter 1 of Web Development and Design Foundations

Module 2: Introduction to HTML

Go To Module

Assigned Reading: Chapter 2 of Web Development and Design Foundations

Module 3: Introduction to CSS

Go To Module

Assigned Reading: Chapter 3 of Web Development and Design Foundations

Module 4: Website Images

Go To Module

Assigned Reading: Chapter 4 of Web Development and Design Foundations

Module 5: Positioning and Navigation

Go To Module

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

Module 6: Responsive Website Development

Go To Module

Assigned Reading: Chapter 7 of Web Development and Design Foundations

Module 7: HTML Tables and Forms

Go To Module

HTML Tables

CSS for Tables

About Tables

Forms: Client Side and Server Side

HTML Forms

CSS for Forms

Special Form Fields

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

Module 8: IT Careers and Multimedia

Go To Module

Your Career in Computer Science

Working As A Programmer

Code Standards

Multimedia

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

Module 9: E-Commerce and SEO

Go To Module

E-Commerce

Website Security

Electronic Data Interface

Search Engine Optimization

How to Make Money Making Websites

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

Module 10: JavaScript and jQuery

Go To Module

About JavaScript

Simple JavaScript

Frameworks

JQuery: A JavaScript Framework

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

Module 11: Frameworks, Font Awesome and Bootstrap

Go To Module

Frameworks

Font Awesome Icons (CSS Framework)

Grid Systems Frameworks

Bootstrap (CSS and JavaScript Framework)

Bootstrap Columns

Other Bootstrap Classes: Images, Navigation, and Responsive Videos

Assigned Reading: None

Module 12: Design Rules, Images, and Galleries

Go To Module

Simple Design Rules

Background vs. Embedded Images

Images Review

Image Sizes

Images 1 – 2 – 3

Two Ways to Code Hero Images

JavaScript Photo Gallery

Assigned Reading: None

Module 13: Header, Logo, and Navigation Design

Go To Module

Final Project 

How to Make a Simple Logo

Styling the Navigation

Assigned Reading: None

Module 14: Website Publishing

Go To Module

Final Project Publishing Options

Purchasing a Domain Name

Website Hosting

Nameservers

FTP (File Transfer Protocol)

Github Pages

Assigned Reading: None

Modules and Labs

These modules were created for students at Saint Paul College.

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 (Pacific Trails) that are required for students in the CSCI1450 class at Saint Paul College. Pacific Trails is one of four lab exercises in the textbook and provides students and opportunity to practice the concepts in the relevant chapters and in these slideshows. Slideshows 1-10 correspond to designated chapters in the textbook.

The slideshows can be studied independently from the textbook. The slideshows include exercises on each concept which are demonstrated in videos. The education is designed for one semester of study, broken into 14 weeks. Each module takes one week in a formal classroom setting.


Extra Credit Options

Throughout the slideshows you will see extra credit options.


Websites we make in class

Portfolio (Sharp Toes Example)

Best in Show Puppies

Animal Photography

Final Project (Sharp Toes Example)


Final Project Ideas

Need ideas for your final project? Check out these final projects by Saint Paul College students.


Additional Presentations


Bootstrap Starter Pack

This is a starter pack of Bootstrap HTML file using Bootstrap navigation. It includes a page with columns, a photo gallery (with modal pop-up) that automatically adjusts the number of images in a column based on the width of the screen, a slider, and responsive embedded video using Bootstrap.

Download Bootstrap 4 Template