Please enable JavaScript to use CodeHS

Diseño y Desarrollo Web

View Syllabus Overview
HTML y CSS avanzados
Description

En esta lección, los alumnos tendrán una vista previa de algunas de las funciones avanzadas de HTML/CSS que aprenderán a utilizar 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 alumnos aprenderán a incrustar contenidos 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 alumnos aprenderán a utilizar divs para agrupar y aplicar estilo a varios elementos.

Objective

Students will be able to:

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

En esta lección, los alumnos aprenderán a utilizar los espacios para agrupar y aplicar estilo a varios 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 alumnos aprenden sobre las etiquetas semánticas de HTML5 y crean páginas web que aprovechan estas etiquetas para mejorar la estructura de sus documentos HTML.

Objective

Students will be able to:

  • Identify HTML5 semantic tags primarily used for page layout and structure
  • Describe the benefits of using semantic tags in HTML documents
  • Create web pages using semantic tags aligned with best web design practices
Description

En esta lección, los alumnos aprenderán a combinar selectores CSS para poder aplicar estilos a varios selectores y combinaciones, o a selectores padre/hijo 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 alumnos aprenderán el principio No te repitas (DRY).

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 alumnos aprenderán sobre selectores especiales como :hover y :focus, y cómo se pueden utilizar estos selectores para dar estilo a los 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 alumnos aprenderán a utilizar la propiedad visibilidad para hacer visibles o invisibles los elementos de 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 alumnos aprenderán cómo pueden utilizar la documentación como recurso para aprender más sobre las funciones de 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 alumnos aprenderán a utilizar la herramienta inspector para explorar y modificar 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 alumnos aprenderán qué es el modelo de caja y cómo pueden utilizarlo para añadir un borde alrededor de los elementos y para definir el espacio entre los 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 alumnos aprenderán a incluir imágenes en sus programas y a manipular sus píxeles utilizando WebImage. Los alumnos 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 alumnos aprenderán a añadir animaciones sencillas 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 alumnos 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 alumnos realizan 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