Week 6 ^2.24

Notes

Class Exercises

Practice creating a responsive menu system using a simple show/hide toggle.

Red Tomato website files (starting point)
HTML file at the end of class (the only thing we changed are the two JavaScript links at the bottom)
CSS file at the end of class

We did not get to complete the JavaScript toggle during class. Please have a look at the code and we'll go over it next week.

Finished responsive-nav.js

Relevant Library Code

Reading

Read for week 7:

Chapter 2 of Responsive Design: Patterns & Principles
Responsive Navigation Patterns by Brad Frost

Review Patterns from Brad Frost's Responsive Pattern Library for week 7:

Spend some time looking at the Navigation patterns. Focus on the single and multi-level sections.

Homework

Revise your story

Continue creating your single page stories. For next class, expand on your coding for small screen in the first class and work towards having a working prototype with 3 breakpoints. We will critique your designs next class so finish as much as possible on your site.

The final version of your single page story will be due on March 16. See the project page for complete details.

Single Page Story Project

Midterm

Select your topic for your midterm project. See the project page for a description and example websites.

Midterm

Challenge [optional]

Challenge #1

Use what you've learned about CSS pseudo elements and the content property to add your favorite emojis to the headings of your class website.

Challenge #2

Create CSS styles that will allow you to add an emoji to parts of your website to show your feelings about the assignment. For example, you might use:

Class 5 Redux

For homework this week we worked on the Simmons Academics page again! Dane is the würst!

Resources for Challenge

You can find several neat examples of things that are possible to do using pseudo elements in this article from CSS Tricks. The following articles should give you some more background and insight on how to use pseudo elements and the content property:

Learning To Use The :before And :after Pseudo-Elements In CSS
Understanding Pseudo-Element :before and :after Gives some practical examples of using them
Understanding the CSS ‘content’ Property
Chart of all of the Unicode emojis

Inserting special characters via the content property can be a little bit tricky. You must use the UTF-8 (Unicode) encoding to reference them. For example I might find the following list of Unicode symbols from Wikipedia:

Official Name	Glyph	Unicode #	HTML	Common meaning
Black sun with rays	☀	U+2600	☀	Clear weather
Cloud	☁	U+2601	☁	Cloud, cloudy weather
Umbrella	☂	U+2602	☂	Umbrella, rainy weather

To use the umbrella symbol in your CSS, you would have to use the Unicode number, but without the "U+". You also have to add a backwards slash to the beginning of the numbers. Here's an example using the three symbols above:

p:before {
  content: "\2600";     /* Black sun */
}
small:before {
  content: "\2601";     /* Cloud */
}
h4:before {
  content: "\2602";     /* Umbrella */
}

Week 6 2.24