Please enable JavaScript to use CodeHS

Web Design (Picasso)

Bootstrap

This module introduces students to Bootstrap, an HTML and CSS framework for developing responsive, professional websites. Students use Bootstrap to develop several professional, mobile responsive websites.

Lessons

7.1 What is Bootstrap?

  • What is Bootstrap?
  • Example Bootstrap Mobile Site
  • Real World Bootstrap: OneNYC
  • Responsive vs Unresponsive
  • Favorite Bootstrap Site

7.2 Getting Started with Bootstrap

  • Getting Started with Bootstrap
  • Getting Started Quiz
  • First Bootstrap Page
  • Container-Fluid Page
  • Using the Bootstrap Skeleton
  • +3 more

7.3 The Bootstrap Grid System

  • The Grid System
  • The Bootstrap Grid Quiz
  • Grid System Example
  • Column Overflow
  • Different Device Sizes
  • +6 more

7.4 Bootstrap Components

  • Bootstrap Components
  • Bootstrap Components Quiz
  • Text Formats
  • Making Buttons
  • Button Groups
  • +7 more

7.5 More Bootstrap Components

  • More Bootstrap Components
  • More Bootstrap Components Quiz
  • Thumbnail Skeleton
  • Kitten Thumbnails
  • Table Skeleton
  • +10 more

7.6 Navigation Bars

  • Navigation Bars
  • Navigation Bars Quiz
  • Navbar Docs
  • Simple Nav Tabs
  • Basic Navbar
  • +7 more

7.7 Drop Down Menus

  • Drop Down Menus
  • Drop Down Menus Quiz
  • Basic Dropdown
  • Realty: Dropdown
  • World Traveller
  • +5 more

7.8 Using Bootstrap Examples

  • Using Bootstrap Examples
  • Using Bootstrap Examples Quiz
  • Bootstrap Starter Templates
  • Realty: Carousel
  • Blog Bootstrap Template
  • +6 more

7.9 Bootstrap Challenges

  • Sticky Navbar
  • Adding Interactions
  • Team Page
  • 8. Photo Portfolio

7.10 Bootstrap Quiz

  • Bootstrap Quiz
  • Bootstrap Badge

Courses that include this module