HTML & CSS Intermediate

Bienvenido a mi repositorio de HTML y CSS Intermedio! :D

Este es un repositorio destinado a documentar mi proceso de aprendizaje en el curso de HTML y CSS intermedio.

Proyectos:

Se hicieron 2 proyectos para este curso, en el primero se usan validaciones de formularios y propiedades de flexbox para estilizar la pagina. Mientras que el segundo se centra en la apliacion de grid para estilizar el layout.

Sign-up Form

El layout de esta pagina esta hecho con flexbox, y me sirvio para experimentar con los estados de validacion de los formularios, asi como las pseudoclases que derivan de ellos. Implementa un sistema de validacion para los datos ingresados usando Expresiones Regulares gracias al atributo `pattern`.

Admin Dashboard

Este proyecto me sirvio para afianzar mis concimientos con CSS grid, se pudieron abarcar los temas claves de grid al dejar de lado la funcionalidad para enfocarnos en el layout.

Temas aprendidos:

Intermediate HTML concepts:

• Emmet para Visual Studio
• Como trabajar con imagenes en formato SVG
• Como crear, modificar y estilizar tablas

Intermediate CSS concepts

• Reinicio de estilos con normalize.css
• Unidades dinamicas de CSS como fr, rem, em, vh, vw, vsh, vlh, etc.
• Propiedades para estilizar textos
• Pseudoselectores, pseudoclases y selectores de atributos.
• Atributo position: fixed, relative, absolute, sticky... etc.
• Funciones en CSS: minmax(), min(), max(), clamp()... etc.
• Propiedades personalizadas con el elemento :root
• Compatibilidad entre navegadores
• Frameworks y preprocesadores: Bootstrap y SASS

Forms

• Formularios basicos, tag input y button, envio de datos a httpbin con post method
• Validacion de formularios con propiedades de HTML y JS, ademas del uso de expresiones regulares
• PRIMER PROYECTO: Sign-up form

Grid

• Introduccion a grid
• Creando y jugando con grid
• POsicionamiento de elementos en grid con grid-template-areas y grid-column/row
• Propiedades avanzadas de grid
• Flexbox vs Grid
• SEGUNDO PROYECTO: Admin Dashboard

---

Recursos importantes

Lista de recursos en linea que me parecieron muy utiles y que quiero compartir con los que quieran aprender tambien :D

• Vista detallada de todos los tags de html MDN Web Docs References > HTML > Elements
• Cheat Sheet de CSS
• Can i use? Es una pagina que muestra las funcionalidades web y sus compatibilidades con los navegadores
• HTML5 Pattern es un sitio web que contiene expresiones regulares de patrones comunmente usados en formularios
• Expresiones regulares cheatsheet
• Grid Garden es un juego interactivo para poner en practica tus habilidades con CSS Grid