Cascading Style Sheets (CSS)


Listed below are the links to your classmates homework pages. As each lesson is due I will expect students to update their homework page so it links to the new required assignments. When I grade your work, I will access your homework page and then assign a grade. Please keep your homework page updated.

Deadline dates are midnight Pacific Standard Time. Late work will only be accepted one week after Deadline date, and a 20% deduction will be imposed. Late work will not be graded unless student sends instructor an email with homework page URL, and a request to grade the work.

Sample files are provided for each assignment. Students can use these files as a guideline for their work, however they cannot simply copy the file and turn it in for credit. Students are expected to modify the HTML and CSS for the sample file. The content and design of the portfolio will need to reflect their personal information and design aesthetic.

return to top

begin lesson

check in pt 1            due 8/24        no points assigned   

check in pt 2           due 8/24            10 points      meet class

Tools Evaluation      due 8/26            10 points    message board

First locate an HTML Editor, I recommend: Notepad++ (Windows), HomeSite (Windows) Dreamweaver (both), TextEdit (Mac), BBedit (Mac).

Next you need to obtain an account on the SRJC Web server "student". Many of you may already have an account on this serve, check here.

If you have an account, great, if you do not you can begin the process of getting an account by the student account request form. Detailed instructions regarding how to get and use a "student" account can be found on the class DVD in the "Begin" lesson.

Now you need to obtain FTP software, I recommend SSH Client for Windows users and Fugu for Mac users. See the DVD "Begin" lesson for instructions on how to obtain this software.

Next I need everyone to download these Web Browsers: Chrome and Firefox . We will be using this browser to view the web pages which are styled using CSS. We will also use Internet Explorer, after the first 8 weeks of the class have passed. Chrome & Firefox, or do a better job of interpreting CSS code so we will use them in the beginning of the class.

Finally I need you to use the"Chrome Property Inspector". Review the lesson on the DVD > Begin lesson > Chrome Property Inspector - that explains how to use this tool.

After you have located an HTML Editor, obtained a student account, installed FTP software and used the Chrome Property Inspector, access the class message board and answer my questions.

When you visit the class message board for the first time you need to select the "Register" link in the upper right corner and create a unique username and password for the message board. Once you have done that, write down the values so you can use them all semester.

Select the "Tools Evaluation." posting, review the instructions that are listed on the post. Select "Reply" to add your response. Remember to include your section # and full name in your post response.

return to top

CSS lesson

Register HW page form         due 9/9      80 points       student work      

Please note that you have 2 weeks to complete these assignments.

CSS Homework Explanation Page
:: A step by step explanation of how to complete this weeks homework.

Create a file/ folder structure which follows the class model [10 pt]
This structure will be created on your personal computer and on the web. Access this web page for guidelines on the file folder structure.

Create a homework page [10pts]
This page links to all the work you do in class. Use this sample homework page as a guideline for your page.

There are 2 types of homework which are assigned in each lesson: SAMPLE FILES and PORTFOLIO pages.

The SAMPLE FILES are used as a reference and to help you uderstand all the options for a specific type of CSS code.

The PORTFOLIO site is a series of pages that use a Bootstrap example file, and the css and javascript that scomes with Bootstrap to create a portfolio website you can use to showcase your work and gain employment. We will create a my-portfolio.css file that overrides bootstrap css. This file will contain code that makes each student's portfolio unique. Each week we will modify the my-portfolio.css file to reflect the conecepts covered in the lesson.

Cascade sampler [10 pts]
Within this file create at least 1 inline style, an embedded or document level style, and a link to an external.css file. Make sure you include at least 1 selector and property which is used in the inline, embedded and external style so a conflict is created. Include a detailed explanation of where the element is getting it's characteristics (inline, embedded or external). Don't forget to mention the browser styles also.
Name the file "cascade-sampler.html". sample

Selector Sampler [10pts]
Create a page that includes an explanation of how the selectors works, and a sample of the code. Name the file "selector-sampler.html". sample

  • syntax for a standard selector
  • multiple selector
  • contextual selector
  • contextual selector - child
  • explain when to use a class and when to use an id
  • universal selector
  • adjacent sibling
  • attribute selector
  • pseudo classes (all 3 types)
  • pseudo-elements

PORTFOLIO [40 pts]
Use Twitter/Bootstrap's "Basic marketing site example" as a starting point for the design of your portfolio. Create an index.html and about.html page which links to the bootstrap .css and .js files and also links to a "my-portfolio.css" file you will use to override standard bootstrap css. Add content to the pages that reflects your portfoio information. samples :: index :: about :: my-portfolio.css

Homework Page Template

please note - my homeowrk page only contains links to this week's assignment. Each week you will activate the links for the current lesson.

return to top

Font and Text              due 9/16         40 pts          student work

Font and Text Homework Explanation Page

Vertical Aligned Text [5pts]
Create an example of the various ways text can be vertically aligned. Use the vertical-align property and the sup & sub XHTML tags. sample

Local / Google Font Sampler [10pts]
Create a web page that uses 2 fonts which are displayed using the @font-face property, one font will come from the Google font library, the other font will be downloaded from the web and stored in your directory on the"student" web server. sample

Text shadow sampler [10pts]
Create a file which has a text shadow, blurred shadow, transparent shadow, text with 2 shadows, and the embedded shadow. sample

Modify the portfolio site by including at least one local or google font, and making at least 5 modifications to the font and text display of the portfolio site. samples :: index.html :: about.html :: my-portfolio.css

please note - my files are named index-text.html, about-text.html and my-portfolio-text.css because I want to keep a copy of how the site looks during each lesson. You will not follow this naming convention. Name your files index.html, about.html and my-portfolio.css and create links that access those files.

Add links to the SAMPLES pages and the PORTFOLIO site. Include a description of the properties you have modified and any HTML changes.

return to top

Position Properties             due 9/23    40 points        student work

Position Homework Explanation Page

Position Sampler [10pts]
Create 4 web pages, each page has 4 paragraphs of text. Assign a unique positioning value to the third paragraph. The static page will have a value of "static" as the position value. Next assigns a position value of relative, absolute and fixed to the remaining pages, name accordingly.
samples: static :: relative :: absolute :: fixed

Hand Coded Image Gallery [10pts]
Create a page with a 3 rows 3 column grid. include a text caption below each image, background color, border, padding & margin. sample

Bootstrap Image Sampler [5pts]
Display 3 images with the img-rounded, img-circle and img-thumbnail class. Display additional images that are responsive and shrink or stretch depending on the width of the display window. sample

Modify the my-portfolio.css file to make at least 5 changes to the layout, padding, margin, or border of the site elements.
samples: index :: about :: my-portfolio.css

Add links to the SAMPLES pages and the PORTFOLIO site. Include a description of the properties you have modified and any HTML changes.

return to top

Backgrounds               due 9/30    40 points             student work

Background Homework Explanation Page

Borders Radius Sampler
[10 points]
Page which displays variations of the border-radius property sample

Box Shadow Sampler . [10 points] -
Page which displays variations of the box-shadow property sample

Gradient Sampler [10 points]
Page which displays variations of the gradient property. sample

Multiple Background Project [10 points]
Page that has 3 backgrounds within the same div tag. sample

Add links to the SAMPLES pages.

return to top

Carousel             due 10/7    40 points             student work

Carousel homework explanation page

Bootstrap Icon Sampler [5pts]
Use the fonts which came in your bootstrap download "glyphcon fonts" to create a sampler of icons, since these are fonts, you can change the color, size and background with traditional css properties.

Bootstrap Thumbnail Gallery [10pts]

Create a page that contains 2 thumbnail galleries. One that displays at least 9 images in a 3 by 3 grid, clicking on the thumbnail opens a new window that loads a web page. A second gallery has a 6 column grid, with thumbnail that link to larger version of the image. sample

Bootstrap Carousel [10 pts]
Create a page which dislays at least 5 images in a carousel. Link at least one image and display a caption. Add embedded CSS to modify the carousel. sample

Make a copy of the thumbnail gallery or carousel and incorporate it into a new portfolio page. Modify the index and about pages to include 3-5 images you plan to display at the site. Use the pseudo-class hover to swap out a background image on at least one page. Use a CSS hover effect on at least 1 image displayed at your site. Use at least 3 properties from the background lesson at the portfolio site (border radius, gradient, box shadow, or multiple background).

index.html :: about.html :: portfolio.html :: my-portfolio.css

Add links to the SAMPLES pages and the PORTFOLIO site. Describe the CSS properties you have modified and any HTML changes.

return to top

Midterm Exam

midterm exam              due 10/14            25 points              

Allow 3-5 days for me to record the score for your midterm. You can use the text or DVD to answer the questions.

Midterm Practical

my-portfolio.css             due 10/14            25 points              

Make a copy of your "my-portfolio.css file" and paste this code into an email message which you send to me at

Below each style explain the code syntax including the type of selector the property and values. Here is an example of how I would explain one of the more complex styles.

.navbar-inverse .navbar-nav > li > a:hover {
color: #999;

This is a contextual selector. It will control the text color of links when you hover over the links. The selector identifies the a element inside a list item, inside the class of "navbar" which is inside the class of "navbar-inverse" You can see this code work at the top of the screen in the black navigtion bar when you hover over the links for home, about, etc. they will turn gray. I used this style to override bootstrap which had set the color to white.

This portion of the exam allows you to show me how much you have learned about selectors, inheritance, and the CSS properties we have learned about to date. It also requires you to explain how this code overrides or supplements bootstrap code.

Layout 1 & 2               due 10/28          80 pts             student work

Please note you have 2 weeks to complete this assignment

Layout 1 & 2 Homework Explanation Page

2 column layout - [40pts]

Create 4 versions of the 2 column layout using "float and clear" to control the location of the content. Use Javascript to create solid color behind uneven columns of content. All of the 2 column layouts should be centered in the browser window. samples
2 col fixed :: 2 col fixed right nav :: 2 col content fluid :: 2 col fluid

3 column layout - [30pts]
Create 3 versions of the 3 column layout using "float and clear" to control the location of the content. All should be centered in the browser window. samples:: 3 col fixed :: 3 col fluid :: 3 col fluid center

3 column fixed with faux column image - [10pts]
At least one layout needs to use the "faux column" system to create solid color behind uneven columns of content. samples: 3 col fixed with faux image :: faux image

Add links to the SAMPLES pages.

return to top

Layout 3             due 11/4      40 points             student work

Layout 3 Homework Explanation Page

Absolute Position Samples - [30pts]
Create a sample page using absolute positioning for a2 column layout, a 3 column layout and a 3 column layout with a header.
samples: 2 col absolute :: 3 col absolute :: 3 col absolute w/header.

Order of Content Sample - [10pts]
Create a sample page using absolute positioning to alter the "order of content" from how it is written in the HTML. sample: order of content

Add links to the SAMPLES pages.

return to top

Layout pt 4             due 11/11        40 pts             student work

Layout 4 Homework Explanation Page

Bootstrap Grid Samples - [30pts]
Create sample bootstrap files that use the grid model to produce various layouts in sizes that adapt to large, medium, small and extra small screen sizes.

Column sampler which shows 1, 2, and 3 column layouts in both event and uneven configurations.
large :: medium :: small [15pts]

Create a sample page that changes the distribution of columns based on the screen size - example [5pts]

Use the hidden-size and visible-size classes to hide or show elements as the screen size changes
example [5pts]

Use css to customize bootstrap standard column classes to reflect a new size - example [5pts]

PORTFOLIO - [10pts]
Modify the behavior of the site using the media query CSS.
index :: about :: portfolio (I did not modify the "my-portfolio.css" file)

Add links to the SAMPLES pages and the PORTFOLIO site. Describe the HTML changes and any changes you made to the "my-portfolio.css" file.

return to top

Navigation               due 11/25        80 points             student work

Please note you have 2 weeks to complete this assignment

Navigation Homework Explanation Page

List as Horizontal Nav Bar - [20pts]

Page that displays a list as a horizontal navigation bar. sample

Background Image with 4 Positions - [20pts]
Page with links that display a background image, include CSS that invokes the pseudo classes of a (link, visited, hover, active) and moves the position of the image for each of pseudo-classes
sample :: image

Horizontal Navigation with Drop Down - [20 pts]
Page that has main navigation that displays horizontally and then has drop down navigation. sample

Vertical Navigation with Pop Out - [20 pts]
Page with a list of links that displays as vertical navigation with one level of pop out sample

Add links to the SAMPLES pages.

return to top

Navigation pt 2            due 12/2        40 points             student work

Navigation [part 2] Homework Explanation Page

Bootstrap Navigation Sampler - [40pts]
Create sample pages that utilize bootstrap's navigation classes
tabs & pills :: buttons :: navbar :: navbar fixed :: breadcrumbs, pagination

Add links to the SAMPLES pages.

return to top

CSS Transform / Transitions    12/9          40 points      student work

Transform / Transition Homework Explanation page

Transform Gallery - [30pts]
Create a sample gallery that includes the following transform properties:: rotate :: scale :: skew :: translate (to offset) sample

Transition Gallery - [30pts]
Create a gallery with one of the transform properties listed above which has all the possible settings for that property. Then include the transition-property values of :: transition-duration :: transition-timing-function :: transition-delay. sample

Add links to the SAMPLES pages.

return to top

Final              due 12/16     70 points            

The purpose of this portion of the exam, is to help you develop skills in understanding the structure of a site (often called the bones or wireframe structure) and then identifying what bootstrap code you would use to build it.

Select Model website / Take a screenshot / Modify the template with the final.css file - 60pts.
Create a copy of the screen shot using bootstrap classes. This will not be a fully functional web page, it will be a shell representing the structure, colors, and navigation of the site. Images are not required, linking code can be the simple #.

I have videos which I use with my CS 50.21A/B students. these videos explain how to take a Photoshop document they created and turn it into a working web page. I recommend you review these videos as a guide - however you are not expected to come up with the sophisticated finished product the Web Design students did. Your site should have the same layout, colors, and navigation, images, carousels, or working links are not requred.

Here is what you need to do.
1. Find a website you would like to recreate and take a screen shot of a second level page.
PC Alt Print Screen
Mac Command Shift 4 (use crosshairs to capture area) or Command Shit 3 take shot of entire desktop.

2. Open that file in Photoshop and use it as I use the Photoshop file in the videos listed below. This screen shot can be used to find color and plan a layout.

3. As you watch these videos remember - this is not an exact match for what you are expected to do. The video assumes you are working with a multi-layer Photoshop file - however you will actually be working with a flat screen shot.

Analyze site structure

Create a shell structure for second level pages using bootstrap grid classes

Nest grid within grid

Add logo images (you can skip this step - images are not required)

Add top nav, search, main nav content

Style top & main navigation

Style search box (you can skip this step - not required)

Create file for "banner" images, add image (you can skip this step - not required)

Build breadcrumb (if site has a breadcrumb) Include side navigation

Add side navigaiton

Create "content" images, add "content" text & image. (images optional)

Build the footer

If you want to go above and beyond the requirements you can copy areas of the screen shot and use those files images for your recreation. I do not have a demonstration of this and do not require it, but some of you may want to try it.

Class Evaluation - 10 pts
Visit the class message board and reply to the Class Evaluation post.

arrow-black arrow-white