Bitácora de Código son una serie de ejercicios prácticos, que se transmiten en vivo por youtube y twitch, donde se ponen en práctica conceptos de Frontend.
El sitio esta hosteado en Github Pages, y lo puedes ver aquí
Los videos serán transmitidos en los siguientes canales:
⚙️ Herramientas ⚙️
En el desarrollo de software existen una cantidad de herramientas que nos permiten crear código, mantener, almacenarlo por versiones, y nos permiten empaquetarlo.
-
Editores de código o texto
-
Manejador de versiones
💡Ejercicios practicos💡
1. Práctica HTML & CSS
En esta práctica crearemos una página que contenga un header, main, footer, aside y otro elementos.
La práctica hace al maestro, por lo que es muy importante continuar haciendo mas ejercicios.
Te invito a hacer los siguientes extras de nuestro ejercicio:
- Crea un menu hamburguesa. Para ello añade una imagen o un icono de un menu hamburguesa, al pasar el mouse encima vas a cambiar la forma en la que se visualiza el menu, de estar en columnas a filas.
- Crea un footer fijo, de forma que si incluyes mas contenido en el main, el footer siempre va a quedar fijo en la vista del navegador.
- Incluye las redes sociales en el footer. Para ello es solo que incluyas las imagenes con los links a tus redes. Puedes crear una lista con las redes.
2. Hagamos nuestra página responsiva
En esta practica usaremos un reto de Frontendmentor. Crearemos la estructura HTML de nuestra página, pero practicaremos diferentes formas que tenemos para hacer nuestro landing page responsivo.
El challengue que usaremos es el siguiente: Mockup
Los temas que pondremos en practica son: Box model, Flexbox, Grid y @container
Estras: crea el menu desplegable.
3. Vamos a crear una app para tomar notas (un todo-list)
Para este mockup vamos a practicar un poco del DOM y el CSSOM