Exercise Monday

Goal: Focus on understanding the nature of the box model, and practicing, and internalizing new CSS concepts like flexbox, pseudo-classes, and pseudo-elements.

Warm Up


  • Describe the symptoms of a collapsing margin. How can you spot one? Why do they occur?
  • Why would we need to clear a float? Give an example.
  • What does it mean when we say an element's position is absolute? Provide an example.
  • Visit the Flexplorer site with your partner. Experiment with changing various flexbox properties on the left side of the page, and carefully observe how these properties alter the flexbox seen on the left side of the page.
  • How does a flexbox cross-axis differ from the main-axis. What does each control?

Code


Note on Week One Classwork

This course's first lesson, Welcome to User Interfaces, mentioned the following:

The first week will hone our ability to create professional, dynamic layouts. Much like an architect must have a fundamental understanding of construction before they're prepared to design buildings, we must have a solid foundation of constructing web layouts before we can tackle higher-level task of designing them.

This in mind, this week's classwork focuses on observing an example site—whether a static mockup or a live online version—and recreating it with your own CSS. This means projects won't yet flex creative muscles by prompting you to design your own custom interfaces. But that's intentional!

After thorough practice cloning existing interfaces, we'll have skills necessary to efficiently turn our own designs, mock-ups, and prototypes into functional websites with HTML and CSS next week, when we learn about the web design process. This is important practice to set us up for future success!

Altering CSS in Chrome DevTools

Follow along with the brief Get Started With Viewing And Changing CSS tutorial from Chrome's Dev Tools documentation. This exercise walks through tweaking a site's CSS rules using Developer's Tools. Being able to quickly experiment with different styles on live sites in the console will save us time throughout the course.

Space Jam Clone

"Come on and slam, and welcome to the jam!"

The 1996 movie Space Jam depicts a rag-tag gang of cartoon characters and retired basketball star Michael Jordan facing off in a high-risk basketball game to determine their fate.

In the mid-90's movies began launching websites to advertise and draw anticipation for their release. In fact, Space Jam's original website is actually still online here! Use float and positioning concepts from the weekend's pre-work to recreate your own version of this site.

Also, if you inspect its homepage you'll see it uses an HTML table (<td> and <tr> tags) to create its layout structure. But using HTML tables is considered really bad practice nowadays, so don't use tables in your version of the site. Instead, use floats and positioning. (Avoid using flexbox just yet! We'll explore that next.)

Flexbox Froggy Game

Next, practice using flexbox properties by playing through all 24 levels of this Flexbox Froggy game! Share the keyboard, switching with your partner between levels. Feel free to refer to this weekend's homework, and pay attention to the prompts at the top of the page. They hint at which flexbox properties to use. You can also hover over underlined property names for even more hints.

Flexbox Defense Game

Then, try the Flexbox Defense game to further solidify your new flexbox skills. Again, switch off with your partner between levels, paying attention to hints at the top of the page.

Myspace Clone

Ready for another blast from the past? The site MySpace was launched in 2004, and was the largest social media site from 2004 until 2010, when Facebook began dominating the market.

During peak popularity MySpace profiles looked like this. Whether or not you count yourself among the site's past users, recreate this single-page profile page from 2006 using your own CSS.

Pay careful attention to the many boxes that compose this notorious layout!

Space Jam with Flexbox

If you're able to complete activities above with time to spare, attempt refactoring your Space Jam site to use Flexbox instead of floats and positions.

Peer Code Review


  • CSS rules are created and organized using "outside in" best practices.
  • Project exhibits understanding of box-model best practices.
  • Project(s) demonstrate understanding of this week's concepts thus far. When prompted, you can discuss your using the correct terminology.

Lesson 31 of 36
Last updated more than 3 months ago.