Buenas prácticas para maquetar web (Principiantes)

Rápido recorderis de HTML y CSS, algunas buenas prácticas para maquetar mejor y más rápido. Algunos ejercicios cortos para practicar maquetación.

Transcript

1. Maquetar con buenas prácticas ¿Han probado document.designMode = ‘on’ en la consola del navegador?
2. Yo soy @DiegoAlejojo Diego Ortiz Desarrollador frontend de Bogotá en Envigado Peliculas buenas (❌) 2
3. 3 Preparación para más tarde (volveremos aquí en 15 min aqui) Crear un nuevo proyecto react que se llame squares
4. 1. Recorderis Empecemos por el principio
5. HTML5 Hypertext Markup Language 5 etiqueta o tag attribute o atributo
6. Algunos atributos HTML 6 class id src rel target href for type name value placeholder required size minlength maxlength
8. CSS3 Cascading Style Sheets 8 Cómo se ve mi página web: color, fuente, posición, margenes, bordes, etc..
9. 9 bloque o conjunto de reglas selector regla/declaración propiedad valor
10. 10 Después viene sass/scss, less, stylus, etc...
11. 2. Buenas prácticas Codificar con estilo, código que sea fácil de leer
12. HTML5 • Indentación • No usar estilos en línea • Re-ordenar líneas muy largas • Usar las etiquetas correctas 12
13. 13 Indentación
14. 14 Estilos en línea -> NO Muchos atributos -> + líneas ✅
15. 15 Evitar divitis código para humanos
16. CSS3 • Si hay >10 reglas en un bloque • px vs em vs rem • margin: top right bottom left • Bootstrap solo si lo amerita • flexbox (never float ) • MDN web docs ✔ w3schools • Bonus (box-model) pregunta de entrevista 16
17. 17 Si hay muchas reglas... ✂
18. 18 px vs em vs rem • px fácil, chévere, pero si cambio el font-size del navegador todo se va … () • em mejora, si la etiqueta papá dice font-size: 20px, entonces en sus hijos 1em = 20px. Pero… no es perfecto • rem is perfect! No importa el font-size del papá, solo le hago caso a mi ancestro mayor, el :root font-size: 10px (10/16 )
19. 19 margin: top right bottom left También aplica para padding, border, … Más info en MDN
20. 20 Solo si es necesario 1. Porque pesa node_modules>bootstrap>dist>css 2. Porque no todos usan bootstrap 3. Porque me pueden aparecer conflictos o reglas que no puedo sobreescribir fácilmente
21. 21 flexbox (never float ) • display: flex; • flex-direction: row (o column) • justify-content: flex-start (o flex-end, center, space-between, space-around and space-evenly) • align-items: flex-start (o flex-end, center, stretch, ...) pro-tip: jugar “flexbox zombies”
22. 22 Lo último y más importante MDN web docs • Mejor documentado • Más actualizado • Especifica la compatibilidad con navegadores • Da buenos ejemplos • INCLUSO, es más bonita la web
23. 23 BONUS: box-model • Recuerden cómo se llama • Investiguen cómo usarlo (en MDN por supuesto) • Jueguen con él Extra bonus: Usen Mozilla Developer Edition para desarrollar Pasen por Can I Use Vayan a las pestaña audits de Chrome (lighthouse) Aprendan de Progressive Enhancement
24. 3. Manos a la obra Borrar todo dentro de App.css Borrar todo el html de App.js yarn start
25. “Distraction is an obstruction to the construction. El que use float o px, pierde. 25
26. Usando solo bootstrap El que no recuerde cómo, puede revisar el grid layout de la documentación. 26
27. Dos cajas (altura 200px) que cubran el 100% del ancho 27
28. Tres cajas (con espacio entre ellas) 28
29. La bandera 29
30. Formulario 30
31. Ahora con Flexbox Whoa! Como los profesionales 31
32. Dos cajas (altura 200px) flex-grow 32
33. Tres cajas 33
34. Tres cajas 34
35. Tres cajas dos flex 35
36. Cuatro cajas 36
37. Muchas cajas 37
38. Gracias por su tiempo ¿Preguntas? por Slack 38