Please enable JavaScript to use CodeHS

Diseño web (Picasso) [2022]

View Syllabus Overview
Bootstrap
Description

En esta lección, se presentará a los alumnos Bootstrap, incluyendo quién utiliza Bootstrap y por qué la gente querría utilizar Bootstrap.

Objective

Students will be able to:

  • Explain what Bootstrap is
  • Explain why a web developer would want to use Bootstrap
  • Compare and contrast responsive vs. unresponsive sites
Description

En esta lección, los alumnos aprenderán a añadir Bootstrap a una página web y a crear la estructura básica utilizando las clases container de Bootstrap.

Objective

Students will be able to:

  • Enable Bootstrap on a webpage
  • Create a basic Bootstrap page using container to gather the pieces of the site
  • Explain the difference between container and container-fluid
Description

In this lesson, students are introduced to the jumbotron class to create a heading for their webpages.

Objective

Students will be able to:

  • Create webpages that utilize a Jumbotron to create a nice header for the webpage
  • Divide the content of a page into a header and main content
Description

In this lesson, students will learn how to use Bootstrap’s grid system to create the layout of their webpages.

Objective

Students will be able to:

  • Use Bootstrap’s grid system to structure their webpages
  • Explain the parts of Bootstrap’s grid system
  • Explain how the grid system enables Bootstrap sites to be responsive
Description

In this lesson, students are introduced to page headers, buttons, and Glyphicons. They will use different typographies to style the header and sub-header of their webpages. They will use and style buttons to increase interactivity on their webpage.

Objective

Students will be able to:

  • Add title to their webpages by creating page headers
  • Use Glyphicons to add widely recognized icons to their webpages to improve usability
  • Create and style buttons
Description

In this lesson, students will learn how easy it is to create beautiful and interactive tables using Bootstrap classes. Students will create galleries of images and links using Bootstrap’s thumbnail class.

Objective

Students will be able to:

  • Create professional looking tables using Bootstrap’s CSS rules for tables
  • Create a gallery of thumbnail images
Description

In this lesson, students will learn how to add a navbar (navigation bar) to their websites.

Objective

Students will be able to:

  • Create a navbar that sits at the top of a webpage
  • Add links to a navbar
Description

In this lesson, students will learn how to make dropdown menus. They will apply dropdown menus to navbars as well as a way of choosing an option elsewhere on the page.

Objective

Students will be able to:

  • Create dropdown menus in a navbar
  • Create dropdown menus as part of the website to redirect to another part of the same page
Description

In this lesson, students will explore the official Bootstrap templates. They will modify an existing webpage to create their own webpage.

Objective

Students will be able to:

  • Use a Bootstrap template and modify the page content
  • Use a Bootstrap template and modify the styles
Description

In this lesson, students will use everything they have learned so far to complete a few web design challenges.

Objective

Students will be able to:

  • Look up Bootstrap documentation to help them accomplish a task
  • Combine several pieces of Bootstrap to create a non-standard webpage component
Description

In this lesson, students complete a summative assessment of the unit’s learning objectives.

Objective

Students will be able to:

  • Prove their knowledge of Bootstrap through a multiple choice quiz