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

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

Lab Assignments

Website 1: The first website we make in class is the Pet Store Website in HTML/CSS using the Bootstrap Framework. We learn how to use the Bootstrap Framework to make a responsive navigation bar, column layouts, an accordion, and a modal popup.

Website 2: On this website we learn WordPress by making a blogging website called, Gaming With Grandma. The content for the website is provided. Students use a WordPress theme of their choice.

Website 3: On this website we learn how to make an eCommerce website. A low-cost way to make an eCommerce website with no fees is with WooCommerce, a WordPress plugin. For this lab we use the WooCommerce StoreFront theme to make an eCommerce website called Extreme Vacations.

Website 4: Our last website is a WordPress website using the premium Beaver Builder Theme and Page Builder. Most students create a website portfolio with this lab, since the premium tools allow them to make a gorgeous website.

After Website 1 and before Website 2, there are lab assignments on WordPress page and product editing.

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

Lab: Website 1A + Bootstrap Columns Exercise + Home Page Prototype (hand drawn)

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

Optional Reading:

Optional Template: Bootstrap 4 Download

Week 4. What else can you do with Bootstrap?

This week we will learn new skills with Bootstrap. We already know how to use Bootstrap columns and navigation. The slideshow this week covers how to make a photo gallery with a photo viewer, an accordion like you see used in FAQ pages, and the Bootstrap modal (pop-up). In class we will discuss Chapter 2 of Don't Make Me Think.

Slideshow: What can you do with Bootstrap?

Lab: Website 1B

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

Week 5. Final Website Design

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 class we will discuss Chapter 3 of Don't Make Me Think.

Slideshow: Final Website Design

Lab: Website 1C and Simple Style Guide Template

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

Week 7. More WordPress Concepts

This week there are three major topics: SEO, Page Builders, and WooCommerce. In class we will discuss Chapters 5 and 6 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 and 6 of Don't Make Me Think

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 7 of Don't Make Me Think.

Slideshow and Lab Instructions: Setting Up a New WordPress Website

Content for the Lab: Website 2A

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

Optional Reading: Choosing a WordPress Theme

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 8 of Don't Make Me Think.

Slideshow and Lab: WordPress Customize

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

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 9 of Don't Make Me Think.

Slideshow and Lab: WordPress Page Design

Lab Content: Website 2C

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

Optional Reading: How to Use Additional CSS in the WordPress Customizer