Construcción de Landing Page usando Figma, HTML y CSS

Es importante que sepas que este curso es la continuación práctica del Curso Definitivo de HTML y CSS, por lo que si aún no lo has tomado, este es el momento.

¿Qué necesitas para trabajar en tu primer proyecto?

Vas a crear un proyecto real completo que se adapte a distintos tamaños de pantallas. Este será un proyecto que podrás agregar a tu portafolio para mostrar tus habilidades en el Desarrollo Web.

Estos son algunas de las herramientas que necesitas usar.

Figma

Uno de los softwares más utilizados para construir wireframes o prototipos de alta calidad es Figma.

Los proyectos web se analizan desde los wireframes que comparte el equipo de diseño. Los wireframes son prototipos que nos permiten tener una estructura clara de lo que será el proyecto real que como desarrolladores tendremos que crecer a código.

Si quieres profundizar tu conocimiento puedes tomar el Curso de Figma de Platzi.

Proyecto

El proyecto que vas a construir lo puedes encontrar aquí.

Se trata de una landing page estática con un header, un footer y cuatro secciones de contenido. Para poder revisar cómo está diseñado, vamos a la pestaña de arriba y seleccionamos “Abrir en editor”.

Podrás observar todas las pantallas que el equipo de diseño ha creado, junto con la paleta de colores, botones, fuentes, imágenes, etc. También podrás ver al dar clic sobre una sección, el código CSS que te recomienda Figma. No se trata de copiar ni pegar, sino de revisar los elementos que lo componen para usarlos en nuestro código, como la fuente, color o tamaños.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).