CS 50B - Web Development 2


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/25            10 points    message board

Get Started Page

Send me a note if you have any problems checking in or gathering the tools you need - an HTML editor, a Web Browser, and the Chrome Property Inspector. lhemenway@santarosa.edu

return to top

CSS lesson

Register HW page form         due 9/8      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 understand 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 comes 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 concepts covered in the lesson.

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 portfolio information. samples :: index :: about :: my-portfolio.css

Homework Page Template

please note - my homework 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/15         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/22    40 points        student work

Position Homework Explanation Page

Position Examples [10pts]
4 files with one of these position values - 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 [10pts]
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/29    40 points             student work

Background Homework Explanation Page

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

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

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

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

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


Add links to the SAMPLES pages.

return to top

Images    due 10/6    50 pts    student work

Images homework explanation page

Transform Gallery - [10pts]

Create a sample gallery that includes the following transform properties:: rotate :: scale :: skew :: translate (to offset) sample

Transition Gallery - [10pts]
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

Bootstrap Carousel Sample [15 pts]
Create a page which displays at least 5 images in a carousel. Link at least one image, display a caption, and add indicators. Add embedded CSS to modify the carousel. sample

Make a copy of the carousel code and incorporate it into a new portfolio page. Name the file portfolio.html and add a link to this page in the nav bar of all portfolio pages. 5 pts

Use the pseudo-class hover to swap out a background image on at least 1 page. 5pts

Use a CSS hover effect on at least 3 images displayed at your site. 5pts

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/13            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/13            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 lhemenway@santarosa.edu.

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 navigation 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/27          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/3        40 pts             student work

Layout 3 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  1 & 2             due 11/17        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

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 3            due 11/24      40 points             student work

Navigation 3 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

WORDPRESS     12/8          40 points      student work

More info coming soon

return to top

Final              due 12/15     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.21 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 required.

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 cross-hairs to capture area) or Command Shift 3 to take a 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 http://www.santarosa.edu/~lhemenw/graphics2/client2-final-shell.html

Nest grid within grid

Add logo images (you can skip this step - images are not required) http://www.santarosa.edu/~lhemenw/graphics2/client2-final-logo.html

Add top nav, search, main nav content

Style top & main navigation

Style search box (you can skip this step - not required) http://www.santarosa.edu/~lhemenw/graphics2/client2-style-search.html

Create file for "banner" images, add image (you can skip this step - not required) http://www.santarosa.edu/~lhemenw/graphics2/client2-banner.html

Build breadcrumb (if site has a breadcrumb) http://www.santarosa.edu/~lhemenw/graphics2/client2breadcrumb.html Include side navigation

Add side navigation

Create "content" images, add "content" text & image. (images optional) http://www.santarosa.edu/~lhemenw/graphics2/client2-content.html

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