Web Design Curriculum

The materials for this course are used in the Web Design course taught in the Computer Science department at Saint Paul College, course number CSCI1470.

The course starts by making a website in the Bootstrap framework. Then, the course transitions to making websites in WordPress. WordPress is used on almost 40% of websites, and is the Content Management System (CMS) most small and medium businesses use to make their websites.

Assigned Reading

There isn't a traditional textbook for the course. Instead, we read, Don't Make Me Think, Revised by Steve Krug (3rd Edition). We read one chapter per week and discuss it in class. 

Discussion questions on Don't Make Me Think

Sample Syllabus

CSCI1470 Spring 2023

Extra Credit Options

  1. Turning on your video camera in Zoom meetings. One point per week.
  2.  Incorporating some Simple PHP in the Pets 4 Everyone website (10 points or 20 points).
  3.  Presenting your final website (Websites 1, 2, 3, and 4) to the class. (5 points for each presentation).

Slideshows, Labs and Additional Content

Week 1. Introduction to Web Design

This week is an introduction to the course. The lab assignment is purchasing a domain name and assigning the name servers. Students in CSCI1470 review HTML and CSS and take a review exam. To study for the exam, go to: Practice Exercises.

Slideshow: Introduction to Web Design

Lab: Purchase a domain name and set nameservers.

Exam: Study for the test with the Practice Exercises and this slideshow: Review Week Slideshow

Optional Reading:

Week 2. Website Publishing

In the second week we learn how to publish websites. For the lab assignment, students publish a "Coming Soon" page to their domain name.

Slideshow: Website Publishing for Web Design

Lab: Publish a Coming Soon Page

Optional Reading: Recommended Website Hosting Plans

Week 3. Starting a New Website with Bootstrap

In the third week of class we start work on the Pets 4 Everyone website. The slideshow includes a segment on how to get started on a new website design, includes some review from Web Fundamentals on coding, and covers the installation of Bootstrap Navigation. In class we will discuss the Intro and Chapter 1 of Don't Make Me Think.

Slideshow: Starting a New Website (Includes Lab Instructions)

Lab:  Home Page Prototype (hand drawn) + Simple Style Guide + Pets 4 Everyone header, nav, footer, and home page

Lab Resources:

Simple Style GuidePets 4 Everyone PhotosPets 4 Everyone Content

Required Reading: Introduction and Chapter 1 of Don't Make Me Think

Optional Reading:

Optional Template: Bootstrap 4 Download

Week 4. Designing a Photo Gallery with Boostrap

This week we will add an About page and a Gallery page to the Pet Store website. The slideshow this week covers how to make a photo gallery with a pop-up photo viewer. In class we will discuss Chapter 2 of Don't Make Me Think.

Slideshow: Designing a Photo Gallery with Bootstrap (Includes Lab)

Lab: Design the About page and Gallery pages for Pets 4 Everyone

Required Reading: Chapter 2 of Don't Make Me Think

Optional Reading: What can you do with Bootstrap?

Week 5. Final Website Design and More Bootstrap Tools

This is our last week on the Pets 4 Everyone website and so the focus will be learning web design skills to apply to the final design of the website. In addition, we will be adding a Pet Finder using the Bootstrap Accordion code, and a Modal Popup.  In class we will discuss Chapter 3 of Don't Make Me Think.

Slideshow: Final Website Design and More Bootstrap Tools (Includes Lab Instructions)

Lab: Designing the Pet Finder page and Specials Popup

Lab Resources: Final Website Checklist

Required Reading: Chapter 3 of Don't Make Me Think

Optional Extra Credit: Simple PHP for Web Design (Optional - Extra Credit)

Optional Reading: Ten Simple Rules for Web Design

Week 6. Introduction to WordPress

This week we will cover a general presentation on WordPress, take a test on WordPress, and do a lab assignment on using the WordPress Block Editor. In class we will discuss Chapter 4 of Don't Make Me Think.

Slideshow: Introduction to WordPress

Lab: The WordPress Block Editor

Required Reading: Chapter 4 of Don't Make Me Think

Optional Reading:

How WordPress Works

Why are most websites made with WordPress?

WordPress 101: Logging In, the Dashboard, Editing, Themes, Plugins, and Customize

Week 7. More WordPress Concepts

This week there are three major topics: SEO, Page Builders, and WooCommerce. In class we will discuss Chapters 5 of Don't Make Me Think. For the lab assignment, there will be continued work on the WebDevPortfolios.com website.

Slideshow and Lab: More WordPress Concepts

Required Reading: Chapter 5 of Don't Make Me Think

Optional Reading:

How to Add Content with the WordPress Block Editor

Search Engine Optimization with Yoast

WordPress Page Builders and Beaver Builder

WordPress WooCommerce Product Entry

Week 8. Setting up a New WordPress Website

This week we will cover how to install a new WordPress website with Softaculous (cpanel), install a theme and plugins and make a few changes in the general settings. In the lab we will create 4 WordPress posts. In class we will discuss Chapter 6 of Don't Make Me Think.

Slideshow and Lab Instructions: Setting Up a New WordPress Website

Lab Resources:

Written Content Including Blog Posts

Download Website Photos

Required Reading: Chapter 6 of Don't Make Me Think

Optional Reading:

Choosing a WordPress Theme

Create a New WordPress Website with Softaculous (cPanel)

 

Week 9. WordPress Customize

This week we are going to dive into how to use the WordPress Customize. Customize is used for overall website settings, overall design, the header (including the menus) and the footer. In class we will discuss Chapter 7 of Don't Make Me Think.

Slideshow and Lab:  WordPress Customize

Required Reading: Chapter 7 of Don't Make Me Think

Optional Reading: How to Use the WordPress Customizer

Week 10. WordPress Page Design

This week we will learn how to install a form in WordPress and also master page layout with some advanced blocks. In addition, we will learn how to edit the CSS on a WordPress website. In class we will discuss Chapter 8 of Don't Make Me Think.

Slideshow and Lab: WordPress Page Design

Lab Content: Website 2C

Required Reading: Chapter 8 of Don't Make Me Think

Optional Reading:

How to Use Additional CSS in the WordPress Customizer

WordPress Page Design with the Block Editor

Week 11. WooCommerce and E-Commerce Review

This week we will begin work on Website 3, an e-commerce website that sells fake Extreme Vacations. We will work on the Extreme Vacations website for three weeks. The slideshow reviews e-commerce and WooCommerce. The step-by-step lab instructions are in a separate document. In class we will discuss Chapter 9 of Don't Make Me Think.

Slideshow: Review of e-Commerce and WooCommerce

Lab: Website 3A

Required Reading: Chapter 9 of Don't Make Me Think

Optional Reading: 

Create an E-Commerce Website with WooCommerce

Planning an E-Commerce Website

Cross-Sell, Up-Sell and Related Products in WooCommerce

Week 12. WordPress WooCommerce and Image Management

In class we will discuss Chapter 10 of Don't Make Me Think.

Slideshow: WordPress Image Management

Lab: Website 3B

Required Reading: Chapter 10 of Don't Make Me Think

Optional Reading: WordPress Image Management

Week 13. Custom WordPress Development 

This week we will cover how you add new features and solve problems in WordPress, including how to use PHP in WordPress. In the lab we will finish up the Extreme Vacations website.

In class we will discuss Chapter 11 of Don't Make Me Think.

Slideshow: Custom WordPress Development (with PHP)

Lab: Website 3C

Required Reading: Chapter 11 of Don't Make Me Think

Optional Reading:

A 3-Step Process for Adding Features to WordPress

WordPress Skill Levels

Week 14. Shipping Your Website

This is the last slideshow for this course. We will discuss the final projects, and also final steps you need to make when you finish your website.

In class we will discuss Chapter 12 of Don't Make Me Think.

Slideshow: Shipping Your Website

Lab: Final Project (Website 4), Part A

Required Reading: Chapter 12 of Don't Make Me Think

Optional Reading: Shipping Your Website

Week 15. Finding Website Gigs

This week we are going to learn about how you can apply what you have learned in class to finding gigs making websites. At this stage in your career as a web developer it is key to find new ways to apply the skills you have learned, build on those skills, and build out your portfolio.

Slideshow: Finding Website Gigs

Lab: Final Project (Website 4A) Part B

Required Reading: Chapter 13 of Don't Make Me Think

Optional Reading:

"How Much Should I Charge?"

Finding Freelance Website Gigs

Setting Up Your Freelancing Business