Construcción de un Clon Web con HTML y CSS

Clase 2 de 18Curso Práctico de HTML y CSS

Resumen

Bienvenido y bienvenida a este curso en el que pondrás en práctica todo lo aprendido en el Curso Definitivo de HTML y CSS. Por lo que si aún no lo has completado, te recomiendo que vayas y lo hagas. ¡Es muy completo!

Como proyecto, crearemos un clon de la página principal de Google, esa que ves cada que abres tu navegador Chrome. Para ello necesitaremos lo siguiente:

  • Editor de texto
  • Navegador

¿Qué es HTML y CSS?

Recordemos los conceptos básicos sobre los que vamos a trabajar.
HTML es un lenguaje de etiquetas para crear la estructura de la información de una página web.
image.png

Mientras que todas las etiquetas contenedoras (que llevan contenido) siempre llevan etiqueta de cierre, las etiquetas de contenido (que son el contenido) no siempre lo hacen.

CSS es un lenguaje de estilos en cascada que nos permite aplicar diseños a nuestra estructura en HTML.
image.png

Aplicamos los diseños usando reglas. Empleamos una declaración para un selector (casi siempre una etiqueta), que está compuesta por una propiedad y su valor.

Recordatorio: HTML y CSS no son lenguajes de programación.

Algunas librerías de las que puedes aprender:

Documentación sobre HTML, CSS y JS:
https://developer.mozilla.org/en-US/
Guía para entender las propiedades de CSS son ejemplos animados:
https://cssreference.io/
Guía completa de Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Aprende HTML con ejercicios:
https://www.w3schools.com/html/default.asp

Aprende sobre Flexbox jugando:
https://flexboxfroggy.com/#es

¡El resto lo iremos viendo en las siguientes clases, así que presta mucha atención y no olvides de llevar tus apuntes!

Contribución creada con aportes de: José Miguel Veintimilla y christian04velzquez.