https://channel-podcast.netlify.app/
El objetivo del proyecto se basa en la maquetación de una landing page siguiendo las guías visuales de una interfaz de usuario otorgada. Cumpliendo además con funcionalidades de reproducción y adaptación a distintos navegadores y dispositivos.
1- Revisar cada requisito establecido para la entrega del proyecto. 2- Armar un tablero "kanban" para organizarme y administrar los tiempos. En el cual además comencé a establecer la manera de llevar a cabo el proyecto. 3- Descargar los recursos brindados para el proyecto. 4- Crear la carpeta y los archivos (HTML Y CSS). 5- Configurar estilos inicilales.
En este último paso la configuracion fue la siguiente:
{ margin: 0; padding: 0; box-sizing: border-box; }
1-Establecí un contenedor general para que sea lo unico que dependa del BODY. Y determiné un contenedor para cada sección identificada, de manera que luego pude ir trabajando hacia adentro de cada una por separado.
2-Hice una hoja de estilo CSS por cada seccion de la landing page, porque de esa manera pude moverme hacia cualquier parte para realizar cambios con mayor rapidez.
3-Los iconos los utilicé desde ▶︎Fontawesome y las tipografias desde ▶︎Google Font
4- A los elementos que me interesaba observar su tamaño y comportamiento, les agregué un borde de color para que visualmente me sea más facil acomodarlos. Los dejé hasta finalizar el proyecto y luego los retiré.
El principal obstáculo que se me presentó fue que comencé por un diseño "desktop-first" y eso me trajo algunos problemas a la hora de interactuar con los media queries. Asi que decidí volver a comenzar el proyecto adoptando un diseño "mobile-first" y de ese modo pude solucionarlo.
▶︎ HTML
▶︎ CSS
1- Empezar por un diseño "mobile-first" es más simple.
2- La semantica HTML está un poco desordenada y podria ser mejor utilizada para otorgar una mas accesibilidad y funcionalidad. Tambien..el uso de "PIXELES" como unidad de medida en algunos casos arruina la accesibilidad y el responsive, asi que es mejor utilizar unidades de medida relativas como por ejemplo "REM".
3- No tener miedo NUNCA al "volver a empezar", a veces ese camino te termina enseñando mucho.