Sitio web básico estilo One Page – Agency Cien Sitios

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

Este es el sitio web final

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

Recursos

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Sitio Web de Boda – Dark Mode

Sitio Web de Boda – Dark Mode

Tabla de contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...

Sitio Web de Boda

Sitio Web de Boda

Tabla de contenidos Introducción Proceso Paleta de colores y estilos Bosquejo HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de...

Sitio de Vestido de Novias – Pink

Sitio de Vestido de Novias – Pink

Tabla de contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...