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 websites in the Bootstrap framework. Bootstrap is a desired resume skill.

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.

There isn't a traditional textbook for the course. Instead, we read, Don't Make Me Think, Revised by Steve Krug (3rd Edition).

 

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. 

 

Sample Syllabus

CSCI1470 Spring 2021

Slideshows and Content

Frameworks and Bootstrap Columns*

  • CSS and JavaScript frameworks
  • Google Fonts
  • Font Awesome
  • Bootstrap and Bootstrap Columns

Bootstrap Navigation

Using the Bootstrap classes to create navigation with a hamburger menu on mobile and the option of a dropdown menu

Design Rules, Images, and Galleries*

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

Header, Logo, and Navigation Design*

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

Website Publishing*

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

WordPress

  • How to install WordPress
  • WordPress Themes and Plugins

Beaver Builder

  • Setting up your website (Video 1)
  • Using the Beaver Theme Customizer
  • Using the Beaver Builder Page Builder

*These websites are also used for the CSCI1450 course


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