Welcome

Full access to this site requires a valid registration. You can request one here.

L1: First Things First

Starts Tue, 01/19/2016

Joining an online class can be a bit overwhelming. Completing the assignments in this first lesson will help you get off to a smooth start. Give it your best shot, and if you get stuck be sure to contact me.

L2: How CSS Works

Starts Mon, 01/25/2016

In this lesson you will create a specific file and folder structure for your work on both your personal computer and your SRJC Student Server website. You will create a homework.html file which contains links to all your completed work. You will create files to explore CSS cascading and CSS selectors, install and configure Twitter Bootstrap, and create a few Web pages using the Bootstrap framework.

L3: Fonts and Text

Starts Mon, 02/08/2016

In this lesson you will learn how to align text, access font libraries using the @font-face property, apply various font shadow effects, and add multiple font effects to your Bootstrap Web site.

L4: Positioning Elements

Starts Mon, 02/15/2016

In this lesson you will study the properties associated with the box model including float, clear, padding, border, margin and outline. You will also study the four states of the position property. These states will later be used to create drop down menus in the Navigation Lesson.

L5: Backgrounds

Starts Mon, 02/22/2016

This lesson covers CSS3 properties that enable us to style the shape, background, and shadow of HTML block elements. You will work with the border-radius, box-shadow and gradient properties. You will modify <div> tags using various background properties.

L6: Image Transformations

Starts Mon, 02/29/2016

In this lesson we will add images transformations using browser-specific transform tags, such as -moz-transform, -webkit-transform, -o-transform, and transform to an image gallery.

L7: Midterm Exam

Starts Mon, 03/07/2016

The mid term exam has two one component. Please note that I am dropping the component requiring you to annotate your CSS file. I prefer that files contain only realistic comments. I'll update a later lessoin with suggested commenting formats. For the mid-term, please take the multiple choice test.

L8: Page Layout 1 & 2

Starts Mon, 03/14/2016

In this lesson you will create multiple fixed and fluid multi-column layouts using the float and clear tags. You will explore advanced layout tricks designed to overcome current HTML limitations. Listed below are the steps you need to follow to complete the layout (parts 1 and 2) assignments. You have 2 weeks to complete these assignments.

Read the first part of Stylin' CSS, Chapter 5, Basic Page Layout. The author presents a number of basic layouts that can be used as a basis for most of the designs currently found on the Web. These layouts are:

L9: Page Layout 3

Starts Mon, 04/04/2016

This week you will use bootstrap classes to create layout options. There is no required textbook reading, but you should study the Bootstrap CSS documentation at http://getbootstrap.com/css/. In this lesson you will create multiple files using the Bootstrap framework and the grid layout model. Each layout will adapt elegantly and flexibly to large, medium, small and extra small screen sizes. 

L10: Navigation 1 & 2

Starts Mon, 04/11/2016

In this lesson you will create a variety of navigation elements. You will modify lists to display as horizontal and vertical menus, create button and image rollover effects, work with browser hover and visit effects, and deal with various browser specific issues. 

L11: Navigation 3: Bootstrap Navigation

Starts Mon, 04/25/2016

In this lesson you will dive deeper into the unique navigation elements provided by the Bootstrap framework, including tabs, pills, buttonsnavbars, fixed navbars, breadcrumbs and pagination.

L12: WordPress

Starts Mon, 05/02/2016

In this lesson you will demonstrate what you've learned by applying CSS concepts to a WordPress site. If you have already built a WordPress site, you can use it for this lesson. If you have not yet created a WordPress site, you can build one for free at WordPress.com.

L13: Final Exam

Starts Sun, 05/15/2016

The final exam has two main components:

  1. Your custom style.css file from your custom WordPresssite will be reviewed for formatting, accuracy, completeness and design originality.
  2. You will take an online multiple choice test, which reviews all the topics covered in this course.

L14: Git Basics

Starts Sun, 06/12/2016

This optional lesson introduces you to the basics of Git and a Git-enabled project workflow. You will learn essential Git commands for a distributed workflow. A Git-enabled workflow supports highly decentralized development, flexible version control, easy remote deployment, and fast emergency recovery.

Download the lessons here.

L15: HTML5

Starts Sun, 06/05/2016

Extra information on working with HTML5. More to come...

L17: Gulp Basics

Starts Mon, 04/04/2016

This optional lesson introduces you to the basics of Gulp, a Javascript based task runner. You will learn how to install Gulp and setup a new Gulp-enabled project that automates several typical tasks.

Download this lesson here.