Goal: Focus on understanding the nature of the box model, and practicing, and internalizing new CSS concepts like flexbox, pseudo-classes, and pseudo-elements.
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!
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.
"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 (
<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.)
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.
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.
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.
Pay careful attention to the many boxes that compose this notorious layout!
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.
Lesson 31 of 36
Last updated more than 3 months ago.