Week 11: CSS Layout

Week	Topic	Learning Objectives	Key Resources
11	CSS Layout	Students will be able to create a flexbox layout on one or more sections of their portfolio project by using correct syntax and proper class/id assignment in their css and html files.	Week 11 Slides (TBD)

Overview

CSS Properties

Background

• Shorthand property for 8 background-related properties
• Set colors, images, position, size, and repetition
• Multiple background layers possible
• Refer to MDN docs for syntax and usage

Borders

• Shorthand property for setting border size, style, and color
• border-radius creates rounded corners
• Refer to MDN docs for border and border-radius

box-shadow

• Adds shadow effect around an element
• Creates depth and separation between elements
• Best used sparingly with lighter colors
• Refer to MDN docs for box-shadow

Overflow

• Defines what happens when content is too big to fit
• Commonly used to add scrollbars to scrollable content
• Refer to MDN docs for overflow

Opacity

• Sets the opacity level of an element
• Refer to MDN docs for opacity and examples

Positioning

Static and Relative

• static is default, top, right, bottom, left do not affect position
• relative allows displacement using top, right, bottom, left

Absolute

• Positions element at exact point, removes from normal flow
• Positioned relative to ancestor element
• Use sparingly, prioritize flexbox or grid for layouts

Fixed

• Removes from normal flow, positions relative to viewport
• Elements stay in place while scrolling
• Useful for navbars and floating buttons

Sticky

• Acts normal until scrolled past, then behaves like fixed
• Not taken out of normal flow
• Useful for section headings, category labels while scrolling

Flexbox

Introduction

• Can be complicated, use dev tools for debugging
• Play with code examples to understand
• Reference lessons and resources for assignments

Basics

• Arranges items into rows or columns
• Items flex based on defined rules
• Interactive examples provided for experimentation
• Resizing frame shows how items fill available area

Flex Containers and Items

• Flex container: element with display: flex
• Flex item: element directly inside flex container
• Elements can be both containers and items
• Nesting builds complex layouts
• Powerful tool for arranging, sizing, placing elements

Tips

• Experiment with code examples
• Use "Edit on CodePen" or "Fork on CodePen" for full-sized environment
• Some examples may benefit from larger view

Guidance for Mentors

Potential trouble spots for students:

• Forgetting to set display: flex on the parent container when using flexbox, causing layout issues
• Confusing justify-content and align-items properties in flexbox layouts
• Misunderstanding how absolute and fixed positioning remove elements from the normal document flow
• Struggling to grasp the concept of sticky positioning and when to use it effectively
• Overusing position: absolute for layout instead of leveraging flexbox or grid systems

Assignment Rubric

Lesson 10 Assignment Rubric

Repository Setup

• Merged previous lesson-9 pull request into main branch
• Created new lesson-10 branch from updated main branch

CSS Folder and File

• Created a css folder at the same level as README.md and index.html
• Created an index.css file inside the css folder
• Linked the index.css file in the index.html file using a element

CSS Styling

• Changed the background color of the page body
• Changed the default text color
• Customized the font family
• Added spacing (padding/margin) between sections
• Changed the alignment of the content of at least one section
• Changed the font size, weight, and color of headings
• Transformed the style of the student's name at the top of the page
• Transformed the "Experience" list items into styled blocks
• Transformed the style of the "Connect" links

Stretch Goals (Optional)

• Loaded a font family from Google Fonts
• Added a picture of the student to HTML and/or CSS with accessibility aspects
• Used social media icons to replace link text with images

Git and GitHub

• Staged changes using git add
• Committed changes with a meaningful commit message using git commit
• Pushed changes to the GitHub repository using git push
• Created a pull request for the lesson-10 branch

Minimum Requirements

• Changed at least one background color
• Changed at least one font
• Changed at least one text color
• Changed the padding and margin of at least one element
• Changed the alignment of at least one element
• Changed the look of heading elements
• Changed the look of the student's name
• Changed the look of list items
• Changed the look of links