Sitio web estilo One Page con HTML y CSS (SASS, Flex). El sitio número 32 del reto personal #100sitioswebchallenge
Puedes visualizar el sitio en: Mask
DESAFÍOS
Basado en el sitio Dress The Bird. En este sitio pongo en práctica el uso de Flex. Por alguna razón empecé a hacer sitios con grid para ir practicando y como que aún no tenía el concepto de Flex entendido. Pero creo que es mucho más sencillo. Aún sigo tratando de entender todas sus funcionalidades, creo que la mejor manera es sólo irlas incluyendo y ver cómo funcionan.
Esta es una vista de las funcionalidades de Flex en CSS
PROCESO
Paleta de colores y estilos
Paleta de colores: FFC038 000000 F9F9F9
Tipografía: Roboto de Google Fonts
Mockup (Bosquejo)
Con la ayuda de Figma empiezo a hacer el bosquejo del sitio, esto me ayuda mucho a conceptualizar el sitio en una sola vista y esta misma me gusta usar como guía durante todo el desarrollo del proyecto.
HTML y CSS
Una vez que el bosquejo está listo, empiezo a trabajar con el editor VS Code, hasta tener el sitio final. Lo más parecido a mi bosquejo hecho anteriormente.
Sitio web responsivo
Por último por medio de media queries trato de que el sitio pueda verse en móviles. Hoy en día es tan importante que los sitios puedan verse en los aparatos móviles actuales.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Mask
Información técnica
- Figma
- Visual Studio Code
- HTML5 (Semántico)
- CSS (SASS, Flex)
- Sitio responsivo
- Github
- Netlify
Recursos
Pexels
- Anna Shvets
- cottonbro
- Polina Tankilevitch
- Ketut Subiyanto
- Ivan Samkov
- Edward Jenner
- Andrea Piacquadio
- EVG Culture
Unsplash
Compárteme tus preguntas y comentarios acerca de este sitio web estilo One Page con HTML y CSS (SASS, Flex).
