Please enable JavaScript to use CodeHS

Diseño web (Picasso) [2022]

Description

En esta lección, los estudiantes observarán algunas de las características avanzadas de HTML/CSS que aprenderán a usar en este módulo.

Objective

Students will be able to:

  • Reflect on what they have learned so far in this course
  • Preview what they will learn in the advanced HTML/CSS module
Description

En esta lección, los alumnos aprenderán por qué son importantes los sitios web con varios archivos y cómo pueden crearlos.

Objective

Students will be able to:

  • Articulate why multi-page websites make sense from a user experience perspective and from a development perspective
  • Create multi-file websites that are divided for clarity and organization
Description

En esta lección, los estudiantes aprenderán cómo integrar contenido de otros sitios web en sus propios sitios web utilizando iframes.

Objective

Students will be able to:

  • Define what an IFrame is, and explain how they might be used in websites
  • Use IFrames to embed other websites into their own website
Description

En esta lección, los estudiantes aprenderán cómo usar divs para agrupar y diseñar múltiples elementos.

Objective

Students will be able to:

  • Use divs to group and style multiple elements at once
Description

En esta lección, los estudiantes aprenderán cómo usar los tramos para agrupar y diseñar múltiples elementos de texto en línea.

Objective

Students will be able to:

  • Use the <span> tag to style multiple elements of inline text
Description

En esta lección, los estudiantes aprenderán cómo combinar selectores CSS para que puedan diseñar múltiples selectores y combinaciones, o selectores de padres/niños específicos.

Objective

Students will be able to:

  • Combine CSS selectors to style multiple selectors, parent/child selectors, and specific combinations of classes, ids, and tags
Description

En esta lección, los estudiantes aprenderán el principio de no repetir usted mismo (seco).

Objective

Students will be able to:

  • Articulate the importance of the DRY Principle
  • Cut down on the amount of repeated code in their programs by combining selectors and using divs
Description

En esta lección, los estudiantes aprenderán sobre selectores especiales como : Hover y: Focus, y cómo estos selectores pueden usarse para diseñar elementos a medida que el usuario interactúa con ellos en la página.

Objective

Students will be able to:

  • Use special selectors to style their website as the user interacts with elements on the page
Description

En esta lección, los estudiantes aprenderán cómo usar la propiedad de visibilidad para hacer que los elementos sean visibles o invisibles en su página.

Objective

Students will be able to:

  • Use the visibility property to make elements visible or invisible on their page.
  • Articulate the difference between visibility and display properties (visibility still takes up space when it’s not visible, display does not)
Description

En esta lección, los estudiantes aprenderán cómo pueden usar la documentación como un recurso para aprender más sobre las funciones HTML y CSS.

Objective

Students will be able to:

  • Use documentation to explore HTML and CSS features that are not covered in the course
Description

En esta lección, los estudiantes aprenderán cómo usar la herramienta Inspector para explorar y modificar el código en línea.

Objective

Students will be able to:

  • Use the inspector tool to modify styling and content inline
Description

En esta lección, los estudiantes aprenderán cuál es el modelo de caja y cómo pueden usarlo para agregar un borde alrededor de elementos y definir espacio entre elementos.

Objective

Students will be able to:

  • Name the different components that wrap around an HTML element
  • Modify the margins, borders, and padding of an HTML element
Description

En esta lección, los estudiantes aprenderán cómo incluir imágenes en sus programas y manipular sus píxeles usando Webimage. Los estudiantes aprenderán cómo los filtros de imagen manipulan los datos de píxeles almacenados.

Objective

Students will be able to:

  • Include images in their programs
  • Manipulate the stored pixel data arbitrarily
Description

En esta lección, los estudiantes aprenderán cómo agregar animaciones simples a sus sitios web.

Objective

Students will be able to:

  • Add simple animations to their websites, such as transitions, transition delays, color changes, size changes, and rotations
Description

En esta lección, los estudiantes combinarán selectores especiales como : Hover con animaciones para crear sitios que respondan a las acciones del usuario.

Objective

Students will be able to:

  • Add simple interactions to their websites, so that parts of the website change if the user hovers or clicks on parts of the site
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 advanced HTML and CSS styling through a multiple choice quiz