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
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
Optional Reading: What can you do with Bootstrap?
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
Optional Reading:
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
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 10 of Don't Make Me Think.
Slideshow: Review of e-Commerce and WooCommerce
Lab: Website 3A
Required Reading: Chapter 10 of Don't Make Me Think
Optional Reading:
Week 12. WordPress WooCommerce and Image Management
In class we will discuss Chapter 11 of Don't Make Me Think.
Slideshow: WordPress Image Management
Lab: Website 3B
Required Reading: Chapter 11 of Don't Make Me Think
Week 13. 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.
In class we will discuss Chapter 12 of Don't Make Me Think.
Slideshow: Finding Website Gigs
Lab: Website 3C
Required Reading: Chapter 12 of Don't Make Me Think
Optional Reading:
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 13 of Don't Make Me Think.
Slideshow: Shipping Your Website
Lab: Website 4A
Required Reading: Chapter 13 of Don't Make Me Think
Optional Reading: Shipping Your Website
Week 15. Adding Features to WordPress
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 continue work on your final projects.
Slideshow: Problem Solving in WordPress
Lab: Website 4A
Optional Reading: