Please enable JavaScript to use CodeHS

Diseño web (Picasso)

Description

En esta lección, los estudiantes serán introducidos a Bootstrap, incluido quién usa Bootstrap y por qué las personas querrían usar 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 estudiantes aprenderán cómo agregar Bootstrap a una página web y 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

En esta lección, los estudiantes aprenderán cómo usar el sistema de cuadrícula de Bootstrap para crear el diseño de sus páginas web.

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

En esta lección, se introduce a los estudiantes a los encabezados, botones e íconos de la página. Utilizarán diferentes tipografías para diseñar el encabezado y el subencabezado de sus páginas web. Usarán y estilarán botones para aumentar la interactividad en su página web.

Objective

Students will be able to:

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

En esta lección, los estudiantes aprenderán lo fácil que es crear tablas hermosas e interactivas usando Bootstrap. Los estudiantes crearán galerías de imágenes y enlaces utilizando la clase de miniatura de Bootstrap.

Objective

Students will be able to:

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

En esta lección, los estudiantes aprenderán cómo agregar una barra de navegación (barra de navegación) a sus sitios web.

Objective

Students will be able to:

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

En esta lección, los estudiantes aprenderán cómo hacer menús desplegables. Aplicarán menús desplegables a las barras de navegación, así como una forma de elegir una opción en otra parte de la página.

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

En esta lección, los estudiantes explorarán las plantillas oficiales de Bootstrap. Modificarán una página web existente para crear su propia página web.

Objective

Students will be able to:

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

En esta lección, los estudiantes usarán todo lo que hayan aprendido hasta ahora para completar algunos desafíos de diseño web.

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

En esta lección, los estudiantes completan una evaluación sumativa de los objetivos de aprendizaje de la unidad.

Objective

Students will be able to:

  • Prove their knowledge of Bootstrap through a multiple choice quiz