# Web Design Summer Program NYC (High School)

Canonical URL: <https://www.nextgenbootcamp.com/classes/web-design-summer-camp-nyc>

## Overview

In this 2-week summer course in NYC, students design and code their websites with hands-on projects from day one. By the end of the course, students will know how to layout websites in Sketch, the top application for user interface design, and code and deploy the website for everyone to see. 

**Prerequisites & Ages:**  The program is ideal for high school students with a strong interest in web design and development. Prior coding or design experience is not required, but students must be comfortable with computer basics.

## What you'll learn

- Use Sketch to create and optimize graphics for web and user interface design.
- Create wireframes and turn them into finished designs that are optimized for mobile, tablet, and desktop screens.
- Build the front-end of webpages by coding HTML and CSS
- Markup content such as text, images, links with HTML and then style it with CSS
- Code fluid-width layouts that adapt to different size screens
- Learn modern CSS page layout technique such as flexbox and grid

## Curriculum

### 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

## FAQ

### Do you offer payment plans or student financing for this course?

This course does not qualify for payments plans or student financing.

## Pricing

**Tuition:** $2495