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).
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.
Slideshows and Content
- Google Fonts
- Font Awesome
- Bootstrap and Bootstrap Columns
Using the Bootstrap classes to create navigation with a hamburger menu on mobile and the option of a dropdown menu
- Design Rules
- Preparing Images for Web Use
- Hero Image
- Photo Galleries
- Making a simple logo
- Making a Favicon
- Customizing Your Navigation
- Bootstrap Navigation
How to purchase a domain and website hosting, FTP your website to your hosting, and how to publish to Github Pages.
- How to install WordPress
- WordPress Themes and Plugins
- Setting up your website (Video 1)
- Using the Beaver Theme Customizer
- Using the Beaver Builder Page Builder
This blog post describes how to add CSS in the WordPress Customizer. The WordPress Customizer is a WYSIWYG!
*These websites are also used for the CSCI1450 course
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.