Este es un sitio web One Page responsivo llamado Kiddo, el quinto proyetco del reto personal #100sitioswebchallenge.
Puedes encontrar el proyecto en línea en: Kiddo
DESAFÍOS
En este proyecto quisé usar el estilo de las listas de manera global, porque estoy usando tres listas distintas para este proyecto.
Tanto para acomodar los íconos de las redes sociales en la cabecera y en el footer, y también uso otra lista en el menú.
No creo que haya sido muy buena idea usar los estilos de manera global, esto podría presentar problemas si quisiera llegar a crecer el sitio.
Creo que aunque sean más líneas de código lo mejor es tener el estilo para cada uno.
PROCESO
Paleta de colores y estilos
Estos fueron los estilos y la paleta de colores que usé:
- Paleta de colores: 61B087 FFC038 FF834C C2D7D8 cafe.colour
- Tipografía: Nunito
- Íconos: Font Awesome
Mockup (Bosquejo)
Este fue el proceso que llevé acabo, desde la concepción de la idea en papel, hasta la construcción del bosquejo en Figma.
HTML y CSS
Con la ayuda del editor Visual Studio Code pasé el bosquejo del diseño del sitio web a realidad, trabajando con HTML semántico y CSS para los estilos.
Este sitio es estilo one page y aquí muestro las diferentes secciones en HTML que distribuí para su construcción.
- Cabecera
- Sub-nav
- Nav
- Showcase
- Sección Features
- Sección About
- Sección Classes
- Sección Contact
- Footer
Sitio web responsivo
Una vez que el sitio está listo es hora de trabajar con otra hoja de estilos llamada mobile.css para que el sitio pueda ser responsivo y pueda visualizarse en plataformas móviles.
Publicación del sitio
Consulta el código de Kiddo en GitHub
Visita el sitio web en vivo con Netlify: Kiddo
Información técnica
- Figma – Diseño de bosquejo
- VS Code
- HTML5 (Semántico)
- CSS
- Responsive Website Design
- Github
- Netlify
Recursos
Pexels
Este fue el sitio web, estilo one page responsivo. Déjame tus comentarios y sugerencias.
