Assignment 3
(Due on Tuesday, September 23rd – for real this time!)
Part 1: Reading
1. Read Chapter 3 from CSS: Definitive Guide
2. Learn about Gestalt Principles from Chapter 2 of Designing with the Mind in Mind
3. Understanding Visual Hierarchy in Web Design (Applicable to all types of design).
Part 2: CSS Code Academy Course
Go to Code Academy and log in. Next, go to the CSS Selector Course and complete all 5 sections.
When you have successfully completed the course, you should receive a badge for the course. To view
your badge, go to your profile and click on your badge counter to see all your badges. Take a screen shot
of your badges page to prove you completed the course. Title the screenshot course_completed.png.
(Below is a reference image of my course badge boxed in blue).
If you need help with CSS selectors, use the following resources:
1. http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-mustmemorize/
2. Chapter 2 from CSS: Definitive Guide
3. http://www.w3.org/TR/CSS2/selector.html
Part 3: Adding Style and Design to Homer Simpson’s Bio Webpage
Part 3.1: Get things set up
1. Copy the contents of your Assignment 1 web directory and make it accessible at
http://lyle.smu.edu/~username/cse3345/a3. Use the exact URL (with your actual username of
course). You will use the A1 as the basis to start this assignment.
2. Fix any HTML validation errors or any other errors that caused points to be taken off from your
assignment 1.
3. Create a css directory and place inside it a style.css which will hold all of your CSS. Make your
index.html file reference your style.css.
Part 3.2: CSS Menus
1. Watch the CSS from the Ground Up exercise video. The video shows developers how to use pure CSS
to create a navigation menu with drop down lists.
2. Using the concepts learned from the video, create a horizontal navigation menu which uses the
navigation links you created in A1 (About Me, Bucket List, My Family, etc.). Your navigation menu
should initially hide all nested lists (the items inside Contacts), and, using only CSS, you will create a
hover effect that when a user hovers over a parent list item it will show its child list. See here for the
example shown in a video.
Part 3.3: Style your page
1. Using the concepts discussed in the Understanding Visual Hierarchy in Web Design and CSS, add
visual hierarchy into your webpage to highlight the important components.
2. Pick a color palette and use it to style your webpage. You’ll need 3-4 colors in your palette for font
color, bg color, link color, accent color, etc. Use the ideas from Creating-UIs-Design lecture slides.
3. Choose a background for your webpage. Use either a color from your color palette or an image of
your choice. Visit SubtlePatterns.com for a gallery of background patterns.
4. Choose a font from Google Web Fonts for your webpage. After you’ve chosen a font, the web page
will give you directions for how to add the font to your website and how to reference it in CSS.
5. Use the nth-child pseudo-selector to style your even and odd columns of your “My Family” table.
See this article for help. Use distinct styles for even and odd so users can easily see the difference
between each column. Make sure the style you choose for even and odd is consistent with the color
palette for the rest of the website.
6. A portion of your grade will solely be based on the professional look and feel of this website. Go to
other portfolio sites and get a feel for how their pages are styled and incorporate their ideas into
your site.
Part 3.4: Validate
1. While developing your webpage, validate the HTML. Use http://validator.w3.org/. When you’re
finished, take a screenshot of the validation page proving your HTML validated. Title the screenshot
html_validated.png.
2. While styling your webpage, validate the CSS. Use http://jigsaw.w3.org/css-validator/. When you’re
finished, take a screenshot of the validation page proving your CSS validated. Title the screenshot
css_validated.png.
Part 4: Javascript Course
Do sections Strings and Numbers from the Code Academy: Javascript Quick Start Guide. As you
complete each section a green circle and check will appear (You may need to refresh the page for it to
show up). Take a snapshot of each section to prove you completed the above sections. Title the
screenshot javascript_course.png.
Part 5: Submit
Once you’ve completed your work, create a zip file called a3.zip that contains the following:
1. course_completed.png
2. index.html
3. javascript_course.png.
4. Your css directory that contains style.css
5. html_validated.png
6. css_validated.png