HTML and CSS Curriculum

Websites we make in class

Portfolio (Sharp Toes Example)

Best in Show Puppies

Animal Photography

Final Project (Sharp Toes Example)

Modules and Labs

These slideshows 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-10 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 back of 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 text.

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.

Final Project Ideas

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

Module 1. Introduction to Web Development

Chapter 1

  • Chrome Developer Tools
  • JSFiddle
  • Simple HTML

Lab: Resume Markup

Module 2. Introduction to HTML

Chapter 2

  • HTML Basics
  • Setting up a web page
  • Semantic Elements
  • Work Flow with a text editor and browser

Lab is Pacific Trails (Chp 2) from the back of the textbook

Module 3. Introduction to CSS

Chapter 3

  • Ways to add CSS (Inline, Embedded and External)
  • Adding CSS styles to colors and text

Lab is Pacific Trails (Chapter 3) from the back of the textbook

Module 4. Website Images

Chapter 4

  • Embedded images
  • Background images
  • borders, shadows, and more!

Lab is Pacific Trails (Chapter 4) from the back of the textbook

Optional: How Website Folders and Files Work Together

Module 5. Positioning and Navigation

Chapters 5 and 6

  • The placement of objects on the web page
  • Keyboard shortcuts
  • Code comments
  • navigation in an unordered list
  • nesting and indenting code

Lab is Pacific Trails (Chapter 6) from the back of the textbook

Module 6. Responsive Website Development

Chapter 7

  • Websites for desktops, laptops, tablets, and smartphones
  • Viewport meta tag
  • Media queries

Lab is Pacific Trails (Chapter 6) from the back of the textbook

Module 7. HTML Tables and Forms

Chapters 8 and 9

  • HTML tables
  • HTML forms
  • CSS Styling for tables and forms

Lab 7: Instructions

Module 8. IT Careers and Multimedia

Chapters 10 and 11

  • IT Career Paths
  • Embedding Google Maps
  • Embedding YouTube Videos

Lab 8 Instructions

Module 9. e-Commerce and SEO

Chapters 12 and 13

  • Selling on the World Wide Web
  • Search Engine Optimization

Lab 9 Instructions

Optional Articles: How to Write a Meta Description,SEO 1-2-3, Keyword Strategy Tool, SEO Copywriting

Module 10. JavaScript and jQuery

Chapter 14

  • Making websites interactive
  • Introduction to JavaScript
  • Introduction to jQuery

Instructions for Lab 10

Module 11. Frameworks and Bootstrap Columns

  • Frameworks
  • Reset CSS
  • Google Fonts
  • Font Awesome
  • Bootstrap and Bootstrap Columns

Bootstrap Columns Lab (Best in Show Puppies!):
Final Version Live • Instructions Download Project Images

Bootstrap Columns Lab (Happy Trails):
Final Version Live • InstructionsDownload Project Images

Module 12. Design Rules, Images, and Galleries

  • Design Rules
  • Preparing Images for Web Use
  • Hero Image
  • Photo Galleries

Images and Galleries Lab (Photography Website): Photography Lab InstructionsDownload Project Images

Module 13: Header, Logo, and Navigation Design

  • Making a simple logo
  • Making a Favicon
  • Customizing Your Navigation
  • Bootstrap Navigation

Portfolio Website Lab

Module 14: Website Publishing

How to purchase a domain and website hosting, FTP your website to your hosting, and how to publish to Github Pages.

Instructions for Publishing to Github

Optional: How to Purchase a Domain Name

Final Project Websites for CSCI1450 at Saint Paul College

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