CS 50B - Web Development 2

Assignments

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

READ FIRST
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.

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

GETTING ORGANIZED
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.

SAMPLE FILES
Cascade sampler [10 pts]FIND NEW STUFF PLUS SELECTOR SAMPLER MAYBE
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
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

READ FIRST
Font and Text Homework Explanation Page

SAMPLE FILES
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

PORTFOLIO [15pts]
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.

HOMEWORK PAGE
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

READ FIRST
Position Homework Explanation Page

SAMPLE FILES
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

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

HOMEWORK PAGE
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

READ FIRST
Background Homework Explanation Page

SAMPLE FILES
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

 

HOMEWORK PAGE
Add links to the SAMPLES pages.

return to top

Images    due 10/6    50 pts    student work

READ FIRST
Images homework explanation page


SAMPLE FILES
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

PORTFOLIO [15pts]
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

HOMEWORK PAGE
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

READ FIRST
Layout 1 & 2 Homework Explanation Page

SAMPLE FILES
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]
Create another copy of the 3 column fixed page, remove the javascript that makes 3 columns of color and instead use the "faux column" system to create color behind uneven columns of content. samples: 3 col fixed with faux image :: faux image

HOMEWORK PAGE
Add links to the SAMPLES pages.

return to top

Layout 3             due 11/3        40 pts             student work

READ FIRST
Layout 3 Homework Explanation Page

SAMPLES
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)

HOMEWORK PAGE
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

READ FIRST
Navigation Homework Explanation Page

SAMPLE FILES
List as Horizontal Nav Bar - [20pts]

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

Navigation with an image in 4 states - [20 pts]
Create a navigation bar with an image that displays in the background. When the pseudo class of: hover, active, or visitedis invoked, the image will shift showing a different color or pattern. (Please note some browsers do not support visited pseudo class, so don't worry if that part of the image does not change).

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

HOMEWORK PAGE
Add links to the SAMPLES pages.

return to top

Navigation 3            due 11/24      40 points             student work

READ FIRST
Navigation 3 Homework Explanation Page

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

HOMEWORK PAGE
Add links to the SAMPLES pages.

return to top

WORDPRESS     12/8          70 points      student work

Videos and written instructions for the Wordpress lesson can be found here

http://www.sonic.net/~webclass/CSS-new/wp/wp-lessons.html

Create a wordpress site install the Bootstrap Theme [5]

Create the pages identified in the navigation section of this page. [10]

http://www.sonic.net/~webclass/CSS-new/wp/winery-assets.html

Add a thumbnail image gallery [5]

Include a video [5]

Add 2 widgets [5]

Remove reply boxes and social media icons [5]

Download 2 plug ins, install them, and then use them at the site. [5]

Create of a "child theme" based on the Bootstrap theme. The style.css file you build for the child theme will modify the original theme so that the color scheme reflects the clients wishes and displays the clients images. You can also change the colors, fonts, and layout. [20]

Remember - by using the Chrome Inspector to determine what .css is currently controlling the feature you want to change, you can then use Chrome to override it - and then transfer that code to the style.css file in the child theme.

HOMEWORK PAGE
Add link to the WordPress site.

return to top

Final              due 12/15     60 points            

After you have finished the child theme, send me a copy of the style.css file and explain what each line of code is doing and why it was added. [15pts]

Final Exam [40 pts]

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

arrow-black arrow-white