Sitio Web One Page Responsivo – Kiddo

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é:

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.

Share