Web Design Summer Program NYC (High School)

HTML & CSS

Normalize.css, Default Box Model, & More

 
• Using normalize.css
• Grouping CSS selectors using a comma separator
• Fluid, hi-res images
• Constraining the width of content
• Visualizing the box model (margin, padding, and border) in Chrome’s DevTools
• Fixing spacing issues around images
• CSS shorthand for the background property

Font-Weight, Font-Style, & Unitless Line-Height

 
• Adding custom web fonts from Google Fonts
• Using font-weight & font-style
• Unitless line-height

Box Model: Content-Box vs. Border-Box

 
• How border-box is different than content-box
• Best practice for applying border-box to everything

Intro to SVG (Scalable Vector Graphics)

 
• Adding SVG to a webpage
• Sizing SVG
• Web Servers: Configuring a .htaccess file for SVG & gzip

CSS Level 1

Embedding SVG

 
• Embedding SVG (instead of linking)
• Styling SVG using CSS
• Using currentColor

SVG Sprites

 
• Defining the SVG sprite
• Using a sprite
• Styling sprites

CSS Position Property

 
• The static value & the normal document flow
• The relative value
• The absolute value
• The dynamic duo: relative parent, absolute child
• The fixed value

Creating a Fixed Navbar & RGBA Color

 
• Creating a fixed navbar on wider screens
• RGBA color

CSS Level 2

CSS Background Gradients & Gradient Patterns

 
• CSS background gradients
• Creating a striped background using gradients

Multiple Backgrounds & Viewport Sizing Units (vw)

 
• Multiple backgrounds on a single element
• Colorizing a photo by overlaying a transparent gradient
• Using viewport sizing units (vw)

Creating Columns with Inline-Block & Calc()

 
• Displaying content as columns using inline-block
• Using CSS calc()

CSS Variables (Custom Properties)

 
• Defining & using CSS variables
• The power of inheritance

Relational Selectors

 
• Adjacent selectors
• Using first-child & last-child
• Using first-of-type
• Using nth-child
• Direct child/descendant selectors

Pseudo-Elements & the Content Property

 
• Using pseudo-elements
• The content property
• Seeing pseudo-elements in Chrome’s DevTools

Attribute Selectors

 
• Adding link icons with attribute selectors
• “Ends with” attribute selector
• “Begins with” attribute selector
• “Contains” attribute selector

Styling Forms with Attribute Selectors

 
• Styling form elements
• Targeting inputs with attribute selectors
• The ::placeholder pseudo element

Relative Sizes: Em and Rem

 
• Em units
• Rem units

Image Handeling

Flix: Creating a Scrollable Area

 
• Creating a horizontal scrollable area
• Optimizing the scrolling for iOS touch devices

Flix: Media Queries for Retina/HiDPI Graphics

 
• Using media queries to load hi-res images for Retina/HiDPI displays

Responsive Images

 
• Img srcset
• The picture element

Off-Screen Side Nav Using Only CSS

 
• Responsive off-screen navigation
• Toggling the navigation with a checkbox
• CSS transitions

CSS Level 3

Box-Shadow, Text-Shadow, & Z-Index

 
• Using the CSS box-shadow property
• Changing an element’s default stack order with position and z-index
• Inset shadows
• Adding drop shadows to text with CSS text-shadow
• Layering multiple text-shadows for a detached outline effect

Hiding & Showing: Display, Visibility, & Opacity

 
• Removing an element from the normal document flow with display: none
• Hiding/showing elements with visibility
• Hiding/showing elements with opacity
• How display, visibility, & opacity differ

CSS Transitions

 
• Transition-property & transition-duration
• Transition shorthand & the all keyword
• Transitioning position coordinates
• Adding easing with transition-timing-function
• Custom easing with Ceaser

CSS Transforms with Transitions

 
• Testing transforms using the DevTools
• Adding a scale transform & transitioning it
• Transform origin
• Rotate & skew transforms
• Using the translate transform to nudge elements

Flexbox Level 1

Intro to Flexbox

 
• Display Flex
• Alignment & Distribution on Main Axis & Cross Axis
• Flex Direction (Row & Column)
• How Auto Margins Are Useful

Flexbox: Sizing & Alignment

 
• Controlling Size with Flex-Grow, Flex-Shrink, & Flex-Basis
• Aligning All vs. Specific Flex Items
• Nesting Flexbox
• Flex Shorthand

Flexbox: Vertical Centering on a Full Screen Background

 
• Creating a Full Screen Background
• Using Viewport Sizing Units vh & vw
• Vertically Aligning Content With Flexbox
• Darkening the Background Image Via CSS

Flexbox Wrapping

 
• Flex-Wrap
• Sizing Flex Items (Flex-Grow & Flex-Basis)

Flexbox Level 2 & Bootstrap

Flexbox: Reordering Content

 
• Changing the Order of Flex Items
• Positive vs. Negative Order Values

Flexbox: Creating a Responsive Pricing Grid

 
• Nesting Flexbox
• Application of Flexbox Concepts to a Pricing Grid Layout

Bootstrap: Getting Started

 
• Using Bootstrap’s Grid System (Containers, Rows, & Columns)
• Creating Columns & Adding Content
• Adjusting Column Sizes Across Screen Sizes
• Using Some of Bootstrap’s Components & Pre-Made Styles

Bootstrap: More About Grids & Components

 
• Nesting Grids
• Adding a Navbar & Other Components
• Showing & Hiding Elements at Specific Sizes

Bootstrap Level 2 & Grid

Bootstrap: Spacing & Adapting Layout Across Screen Sizes

 
• Adding an Email Signup Form
• Adjusting Spacing
• Changing the Layout Across Screen Sizes

Intro to Grid

 
• Getting Start With Grid (Columns, Rows, & Gaps)
• The Explicit vs. Implicit Grid
• Firefox DevTools for Grid

Grid: Sizing & Placing Items Within the Grid

 
• Spanning Columns & Rows
• Placing & Sizing Using Numbered Grid Lines
• Naming Grid Lines

Grid: Minmax, Auto-Fit, & Auto-Fill

 
• Sizing with Minmax
• Auto-Fit vs. Auto-Fill
• Max-Content & Min-Content

Grid Level 2

Grid: Template Areas

 
• Setting Up Grid Template Areas
• Creating Empty Grid Areas
• Using Automatically Created Named Lines
• Multiple Elements Occupying the Same Grid Area
• Viewing Grid Template Area Names In Firefox’s DevTools

Grid: Alignment, Centering, & Reordering Content

 
• Aligning Grid Items
• Aligning Within the Grid Container
• Aligning Individual Grid Items
• Ordering Grid Items

Grid: Laying out an Article

 
• Using Grid to Lay Out an Article
• Making Elements Go Full-Width
• Adding Elements into the Side Columns

Grid: A Responsive Image Gallery (Masonry Layout)

 
• Creating the Grid Layout
• Enlarging Some Photos to Create a Masonry Layout

Sketch Level 1

Creating New Files & Designing on a Grid System

• Sketch templates, artboards, & pages
• Creating a new file
• Setting up a layout grid
• Creating colored backgrounds for text
• Importing text

Adjusting the Layout for Tablets & Mobile Phones

• Designing with Bootstrap’s grid
• Adapting the design for tablets
• Adapting the design for mobile phones

Inserting & Masking Photos

• Importing photos
• Cropping a photo (masking)
• Custom shaped masks

Inserting Vector Graphics, Fills, Shadows, & More

• Importing & modifying vector graphics
• Making grouped objects easily selectable
• Layer opacity vs. fill opacity
• Aligning & distributing layers
• Reusing colors found in the design
• Adding a drop shadow

Sketch Level 2

Shared Graphic Styles (Reusable Appearance)

• Creating a shared graphic style
• Attributes that are not part of a shared graphic style
• Changing & renaming graphic styles
• Making a style to darken full-width background photos

Text Styles (Reusable Appearance)

• Creating text styles
• Editing text styles
• Renaming styles & organizing into folders

Symbols (Reusable Elements)

• Creating & editing symbols
• Customizing content inside a symbol
• Resizing symbols
• Renaming symbols
• Detaching from a symbol

Exporting Assets: SVG & PNG

• Exporting artboards
• Exporting for web as SVG & PNG
• Exporting into folders

Exporting Assets: 1x & 2x JPEG

• Exporting as JPEG
• Properly setting JPEG quality