Para comenzar con el desarrollo web es muy importante afianzar unas bases iniciales. Nosotros pensamos que flexbox se incluye en estos conceptos imprescindibles que hay que asimilar para poder crecer en el mundo de la codificación.
En los siguientes 7 vídeos repasamos la estructura básica del HTML y mostramos como instalar Visual Studio Code (el editor de código que utilizamos).
VS Code y la Estructura de HTML
¿Dónde escribimos el código? Visual Studio Code es el editor más popular y lo utilizaremos para codificar nuestros proyectos. En este vídeo vamos a aprender a posicionar elementos en la pantalla. Veremos diferentes reglas que nos permitirán posicionar cada elemento donde queramos.
Diseña el Prototipo de tu WEB
Una vez tenemos claros estos conceptos básicos de HTML y viendo también cómo interactua con CSS, nos disponemos a diseñar y crear un pequeño proyecto. Primero utilizaremos draw.io para hacer el diseño previo y luego en VS Code lo codificaremos en HTML y CSS.
Pasamos del diseño al código
Aprende Flexbox con jugando: Flexbox Froggy
Después de nuestro primer contacto con el código, nos proponemos un reto, un juego que nos permite llegar a dominar el flexbox: Flexbox Froggy.
Proyecto: clonar el landing page de Google
Para terminar esta serie de videos centrados en aprender flexbox os proponemos un nuevo proyecto: Hacer un clon de la página de inicio de Google.
Lo hemos dividido en dos vídeos en los que codificamos con HTML y CSS para posicionar los elementos y conseguir un aspecto similar al original.
En estos vídeos hemos querido mostrar y poner en práctica los conceptos básicos de la estructura de árbol del HTML ya que imprescindible para poder avanzar en el aprendizaje de la programación.