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).
Discussion questions on Don't Make Me Think
Sample Syllabus
Extra Credit Options
- Incorporating some Simple PHP in the Pets 4 Everyone website (5 - 10 points).
- In class we will make four websites. When we finish each website, there will be opportunity to share your website with the class on a discussion forum. (Up to 5 points. 2 points for sharing your website, and up to 3 bonus points for participating in discussion.)
- Design your final project website in wire-framing software, like Figma (5-10 points)
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 take the exam on D2L.
Optional Reading: How to choose a domain name
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
Required Reading: Introduction and Chapter 1 of Don't Make Me Think
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.
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 Guide • Pets 4 Everyone Photos • Pets 4 Everyone Content
Required Reading: Introduction and Chapter 2 of Don't Make Me Think
Optional Reading:
Optional Template: Bootstrap 4 Download
Week 4. What more can you do with Bootstrap?
This week we will add an About page, a Photo Gallery page, and a Pet Finder page to the Pet Store website. The slideshow this week covers how to make a photo gallery with a pop-up photo viewer, a modal popup, and a Bootstrap Accordion.
Slideshow: What More Can You Do With Bootstrap? (Includes Lab)
Lab: Design the About page and Gallery pages for Pets 4 Everyone
Required Reading: Chapter 3 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 so the focus will be learning web design skills to apply to the final design of the website.
Slideshow: Final Website Design (Includes Lab Instructions)
Lab: Accordion, Popup and Final Design
Lab Resources: Final Website Checklist
Required Reading: Chapter 4 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.
Slideshow: Introduction to WordPress
Lab: The WordPress Block Editor
Required Reading: None
Optional Reading:
Why are most websites made with WordPress?
WordPress 101: Logging In, the Dashboard, Editing, Themes, Plugins, and Customize
5 Week 7. More WordPress Concepts
This week there are three major topics: SEO, Page Builders, and WooCommerce. 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
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.
Slideshow and Lab Instructions: Setting Up a New WordPress Website
Lab Resources:
Written Content Including Blog Posts
Required Reading: Chapter 6 of Don't Make Me Think
Optional Reading:
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.
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.
Slideshow and Lab: WordPress Page Design
Lab Content: Website 2C
Required Reading: Chapter 8 of Don't Make Me Think
Optional Reading:
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.
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
Week 12. WordPress WooCommerce and Image Management
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:
Week 14. Shipping Your Website
This week we will start the final project. The slideshow is on Shipping Your Website, and covers last steps you take to check your website what you need to do after the website design is complete.
Slideshow: Shipping Your Website
Lab: Final Project Instructions
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: