Learning Objectives
- The CSS Box Model
- CSS Display Property
- CSS Positioning
- CSS Media Queries
- Understanding Flexbox
- Flexbox Properties
- Building a Layout with Flexbox
- Declaring row and column tracks
- Setting gutters between rows and columns
- Creating flexible and responsive grid layouts without media queries
- Using Grid with Flexbox
Materials
If you are using Odin as your primary learning materials, please go to each link in this list and read through the content on that page. If there are links you are redirected to as you read/work through the content, follow those links as well and read the content there also.
- The Odin Project – Media Queries
- The Odin Project – Introduction to Flexbox
- The Odin Project – Growing and Shrinking
If you are using Treehouse as your primary learning materials, please go through the following courses in treehouse:
- CSS Layout (163 mins)
- CSS Flexbox Layout (105 mins)
- OPTIONAL: CSS Grid Layout (111 mins)
Assignments
Coding Assignment
This week you will be enhancing the layout and responsiveness of your portfolio webpage:
An example site to review is located here:
Elliot Thompson Sample Portfolio
Mindset Assignment
This week we’ll continue to explore design by discussing visual hierarchy. Visual hierarchy is how we decide where to place pieces of our site so they’ll be easy to find, interact with, or stand out. Have you ever been somewhere (in person or on the web) that was new to you and you needed a minute to find your way around? If it was a physical location, how did you find the exits/bathrooms/stairs? If it was a website, were you able to find the page that had the information you wanted easily, like the product description page? Visual hierarchy goes a long way in whether or not the user has an easy and pleasant experience navigating their environment, or a challenging and frustrating one.
This article from Adobe is a lengthy one, but covers basically all the variables to take into account when creating a layout. Design is more than just colors and fonts as you’ll find when reading that article. Where you place things, how much space you put around them, and the fonts and colors too, all go into the design of a site. And just like whether or not there are clear bathroom signs, your design choices can make for a great or uncomfortable experience. Once you’ve taken a look at that article…
– Think about a time when a layout personally impacted your experience (like the examples in the first paragraph) and describe the scene for us. Also share how you felt when you could/couldn’t find what you were looking for.
– In the visual hierarchy article, were there topics that surprised you? If so, which one(s) and why?
– What are some of your most favorite and least favorite design features as a user?
When you’ve completed your Coding Assignment, and have read and thought about the mindset questions above, submit ALL of your assignments (link to your pull request on GitHub and mindset) using the Homework Assignment Submission Form.