Este es un sitio web básico creado estilo One Page llamado Agency Cien Sitios. Este es el segundo proyecto parte de mi reto personal #100sitioswebchallenge.
Puedes encontrar el proyecto en línea en: Agency Cien Sitios
DESAFÍOS
Comparado con el primer proyecto que me llevó tiempo saber cómo usar Figma para el bosquejo del sitio, en este caso pude ver un tutorial y me dio plantillas que pude usar para empezar el sitio.
Esto me ayuda mucho a ahorrar tiempo para enfocarme en el desarrollo, pero sin duda voy a estar consultando las plantillas que ofrece de acuerdo a los sitios que quiero seguir construyendo.
Uno de las diferencias con este proyecto es que quise mantener el posicionamiento del menú fijo, para estar moviendo la página de manera horizontal.
Aún hay detalles respecto a esto que me hace falta dominar, por ejemplo el espacio que queda en la parte superior de cada sección una vez que doy clic al menú.
Otro detalle que tengo que trabajar es con Java Script para hacer el recorrido de la página más fluído.
Siempre he sentido un poco de miedo a JavaScript de que no lo domino, pero tengo que agarrar valor y simplemente aventarme.
Mi meta es estar aumentando el nivel de dificultad con los sitios que vaya haciendo, así que ya iremos viendo durante el proceso de estos proyectos.
PROCESO
Paleta de colores y estilos
Esta es la paleta que elegí para la paleta de colores, basada en la cuenta de Instagram de colours.cafe.
Que por cierto estos colores se me hicieron más fáciles de trabajar que el proyecto 1.
Usé la tipografía Montserrat de Google Fonts para este proyecto, la cual venía por default en las plantillas de bosquejo para sitios web de Figma.
Y también usé de Font Awesome para usar algunos diseños de íconos para la página.
Mockup (Bosquejo)
En este caso no usé ninguna fotografía, y pude ir agregando algunos elementos a partir de la idea original que tenía.
Como podrán ver no soy una gran artista dibujando, pero sin duda mi cuaderno me ayuda mucho a ir trazando un mapa de masomenos a donde ir.
Este es el proceso del sitio web usando la herramienta Figma
Este es el bosquejo final del sitio web
También me ayudo mucho con Plantillas en WrapBoostrap, Bootstrap y Theme Forest para iniciar la idea de un diseño y buscar inspiración.
HTML y CSS
Seguí con Visual Studio Code para armar el sitio, con HTML5 semántico y CSS. Cree de nuevo algunas variables en CSS para mis colores, y usé la unidad vh para la altura de la portada del sitio. Con tal de que siempre el diseño cubriera toda la pantalla al inicio de la página.
Esta fue una sitio web con estilo One Page, que simplemente fue que todo se viera en una sola página web con desplazamiento vertical.
Siempre empiezo a maquetar todo en HTML para posteriormente entrar con CSS y terminar el estilo de la página
Sitio web responsivo
Ya por último hice de nuevo los Media Queries para que el sitio pudiera verse en las principales plataformas móviles.
Publicación del sitio
Por último a través de la terminal subí mi código que estaba guardado de manera local (en mi computadora) hacia github.
Puedes consultar el código en mi cuenta de GitHub.
Y desde Netlify se puede visualizar el sitio, me gusta mucho esta herramienta porque es gratis y puedo publicar sitios web sencillos.
El proyecto está en línea en: Agency 100 Sitios
Este fué el sitio web básico estilo One Page, creado con HTML y CSS. Déjame tus comentarios y sugerencias.
Información técnica
- Figma – Diseño de bosquejo
- VS Code
- HTML5 (semántico)
- CSS
- Responsive Website Design
- Github
- Netlify
