Construcción de Landing Page usando Figma, HTML y CSS
Clase 2 de 32 • Curso de Responsive Design: Maquetación Mobile First
Contenido del curso
- 2

Construcción de Landing Page usando Figma, HTML y CSS
06:36 - 3
Estrategias de Diseño Mobile First y su Impacto en SEO
02:34 - 4

Estructuración de una Página Web con HTML Básico
06:11 - 5

Organización de Assets para Proyectos Web
09:43 - 6

Descarga e integración de fuentes con Google Fonts en HTML
05:41 - 7

Estilos Base en CSS: Variables de Color y Buenas Prácticas
12:06
- 12

Diseño y Estilos de Sección de Intercambio con HTML y CSS
10:11 - 13

Estilos CSS para Imágenes de Fondo y Texto en HTML
07:43 - 14

Creación de Tablas HTML con Estilos y Actualización de Datos
13:12 - 15

Estilos CSS para Tablas: Diseño y Personalización Avanzada
10:24 - 16

Estilos CSS para Tablas de Monedas en HTML
09:05 - 17

Estilos CSS para Tablas y Herencia de Fuentes
10:50
- 21

Solución de Overflow y Sección de Imagen en CSS
10:36 - 22

Creación de Sección de Planes con HTML y CSS
09:33 - 23

Estilos CSS Base para Sección de Planes en HTML
07:06 - 24

Estilos CSS para Tarjetas de Recomendación
10:10 - 25

Estilos CSS para Tarjetas y Botones en HTML
10:18 - 26

Estilos CSS avanzados para botones y tarjetas en HTML
09:12 - 27

Scroll Horizontal con CSS desde Cero
11:40
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).