Videoconferencia S3

Correcciones tarea

Uso correcto de titulos de sección (h1, h2, h3, etc)

• No brincarse niveles: pasar de h1 a h3, por ejemplo
• No usar títulos de sección para subtítulos
• Si lo que quiero es enfatizar un texto pero no es el título de una sección, hacerlo con CSS

¿Cómo manejar subtítulos?

• El subtítulo es un párrafo con alguna clase especial
• El subtítulo es PARTE del título, pero dentro de un span barra poder diferenciarlo
• Si lo que quiero es dar énfasis, usar simplemente un párrafo con una clase especial y cambiar su estilo en CSS

Ejemplo con error

Listas

• Únicamente li pueden ser hijos directos de ol y ul
• Cualquier otro elemento debe ir dentro de un li

Ejemplo con error

Debugging

Es el proceso de identificar problemas, encontrar el por qué del problema y resolver el problema.

Validadores de código

Analizan el código y encuentran errores de sintaxis.

Recomiendo usarlos antes de una entrega, incluso si no hay algo específico que no funcione porque podrán identificar errores y tendrán mejor calificación.

Validadores en línea

Validar en CodePen

Se puede, pero no es muy riguroso.

Validar en CodePen

Dependiendo del tema, marca errores sin necesidad de hacer más (DuoToneDark, por ejemplo).

En los paneles de código, escoger "Analyze HTML/CSS" y explicará errores

Importante: No depender de la validación de CodePen porque NO marca todos los erroes (por ejemplo: "center" no es un posible valor de display, lo veremos esta semana semana). Que CodePen no muestre errores no quiere decir que no los hay.

Inspeccionar con Developer Tools

Problemas a resolver

Demo maquetar componente con CSS

Partiendo de wireframes y HTML

Basándome en esos wireframes, vamos al HTML que ya tengo en CodePen