Udemy

Platform

Español

Language

Web Development

Category

CSS La Guía Completa - Flexbox, CSS Grid, SASS +20 proyectos

Aprende Flexbox, CSS Grid, Custom Properties, SASS, Mixins, Gulp Workflows, Animaciones, RWD y mucho más!

4.76 (1215 reviews)

Students

35 hours

Content

Aug 2021

Last Update
Regular Price


What you will learn

Crear sitios web utilizando Flexbox y Grid

No solamente veremos Flexbox y Grid, en este curso aprenderás otras tecnologías como Gulp, SASS, Fetch API, NPM, Variables CSS y más!

Integrar herramientas modernas a tu trabajo como desarrollador y ver como se unen unas con otras como las mencionadas anteriormente.

Diferenciar cuando es bueno utilizar Flexbox y cuando es bueno Grid (aunque no son excluyentes uno del otro)


Description

Aprende CSS paso a paso creando Proyectos Reales!

En el primer video del curso podrás ver todos los proyectos que vamos a construir en este curso.

Si nunca has escrito una sola línea de Código HTML y CSS este curso es para ti, incluso si quieres profundizar y dominar las nuevas formas de crear layouts como son Flexbox, CSS Grid, Propiedades Lógicas este curso es para ti.

Si alguno de estos temas es nuevo para ti lo aprenderás en este curso:

  • Flexbox y CSS Grid

  • Logical Properties

  • BEM

  • Unidades y Medidas

  • Responsive Web Design con Mobile First

  • Media Queries

  • HTML: etiquetas, formularios, imágenes, videos, etc.

  • Custom Properties

  • Gulp Workflows

  • SASS - Mixins, Variables, Funciones  y todo lo necesario para dominar SASS

  • BEM con SASS

  • Animaciones, Transiciones y Transformaciones

  • Optimización de Sitios Web.

  • Imágenes Webp y Avif

Algunos Proyectos incluidos en este curso.

  • Sitio web para un Ecommerce

  • Sitio web para Audifonos

  • Plataforma de Podcast

  • App de Delivery

  • App Bancaria

  • Sitio web de cafeteria

  • Salón de Belleza

  • Empresa de venta de casas

  • Arquitectura

  • Clon de AirBnb

  • Clon de Meetup

  • Entre otros proyectos

Recuerda que puedes ver los proyectos finalizados en el primer video del curso

Antes de Aprender un Framework como Bootstrap o Tailwind, incluso JavaScript o librerías como React o Frameworks como Angular y VueJS es importante tener dominio sobre HTML y CSS que es lo que obtendrás en este curso!



Screenshots

CSS La Guía Completa - Flexbox, CSS Grid, SASS +20 proyectos
CSS La Guía Completa - Flexbox, CSS Grid, SASS +20 proyectos
CSS La Guía Completa - Flexbox, CSS Grid, SASS +20 proyectos
CSS La Guía Completa - Flexbox, CSS Grid, SASS +20 proyectos

Content

Introducción al curso

Los Proyectos en este curso

Introducción y básicos de Flexbox

¿Qué es Flexbox?

El Contenedor Flex o Flex Container

Flex Direction

Flex Wrap

Flex Flow y Order

Flex Grow, Flex Shrink, Flex Basis y el Shorthand Flex

Flex Grow y flex a fondo

Alineando con Flexbox

Poniendo todo en práctica (Video 1 de 3)

Poniendo todo en práctica (Video 2 de 3)

Poniendo todo en práctica (Video 3 de 3)

PROYECTO: Diseño de tipo Cards en Flexbox

Arrancando el Proyecto

Agregando Media Queries a los Cards

Estilos a los cards

Creando Menús de Navegación con Flexbox

Creando un Menú Sencillo

Creando un Menú con Iconos (Pt 1 de 2)

Creando un Menú con Iconos (Pt 2 de 2)

Creando un Dropdown Menu

Creando un Menú de Redes Sociales

Creando un Menú de Redes Sociales y Dropdown

PROYECTO: Sitio Web de Cursos

¿Porque usar Autoprefixr?

Instalando Dependencias

Compilando SASS con Gulp

Agregando un watch

Comenzando los estilos del Proyecto

Estilos al carrito de compras con SASS

Agregando una fuente de Google Fonts

Creando un Mixin

Creando otros mixins útiles

Creando la imagen principal y buscador

Creando mixins para media queries

Creando la barra principal

Creando la sección de los cursos

Finalizando la sección de los cursos

Creando el footer

Creando los menús del footer

PROYECTO: Login de Netflix con SASS, Gulp y Flexbox

Primeros pasos con el Proyecto

Compilando SASS con Gulp

Agregando un watch

Creando e importando las Variables

Creando e Importando Mixins

Escribiendo el HTML del login

CSS al Body

CSS al Logo

Primeros pasos con el formulario

CSS a los inputs

Animando el Label cuando vamos a escribir en el formulario

Creando el botón de Iniciar Sesión

Finalizando el formulario

CSS al Footer

Validación del Formulario

Agregando clases y mensajes de error

Agregando un botón de ocultar / mostrar en el password

PROYECTO: Diseño de un Blog

Arrancando el Proyecto

Trabajando con la imagen principal

Estilos al Header

Estilos al Menú Principal

Creando la sección de categorias

Estilos a las categorías

Creando el footer

Estilos al footer y fin

PROYECTO: Holy Grail Layout o Layout de 1 o 2 columnas con contenido al centro

Introducción al Proyecto

Creando la navegación Principal

Agregando los Sidebars

Otros diseños en Flexbox

Creando el Media object o comentarios con fotografia

Diseño con Footer fijo abajo

Diseño con elementos en distinta alineación

Finalizando el diseño

Creando un Diseño Masonry en Flexbox

PROYECTO: AdminFlex o Panel de Administración en Flexbox

Arrancando el Proyecto

Creando el Header

Primeros estilos al Proyecto

Creando la barra superior

Estilos al Nombre del sitio

Estilos a la barra superior

Estilos a los menús

Creando la barra lateral

Estilos al buscador

Estilos al Menú Lateral

Ocultando y mostrando el Menú Principal

Estilos al área principal

Creando los formularios

Introducción a CSS Grid

¿Qué es CSS Grid? y términos básicos

El Grid Container

Definiendo columnas y rows

Colocando elementos dentro de los rows y columns

Grid Shorthand, grid-row, grid-column, grid-area

Repeat en CSS Grid

Grid Template Areas

Grid Template Areas en práctica

Modificar el orden de los elementos según la resolución con Grid

Grid FR, Repeat y otras opciones disponibles

Alineación en Grid

Creando un Diseño Experimental con Grid

Grid Auto-fit y Auto-fill

PROYECTO: Blog de Recetas en CSS Grid

Arrancando el Proyecto

Finalizando el Proyecto ¿Sorprende no? :D

PROYECTO: Sitio Web de Bienes Raices con CSS Grid

Arrancando el Proyecto

Creando y utilizando variables CSS

Creando la barra del header

Agregando Fuentes de Google Fonts

Creando la sección de Nosotros

Estilos a Nosotros

Creando la sección de Anuncios

Estilos a la sección de Anuncios

Finalizando la sección de Anuncios

Creando el Footer

Estilos al Footer

PROYECTO: Sitio Web para un Freelancer

Creando el Header

Estilos al Header

Creando la sección de Servicios

Estilos y Grid a los servicios

Creando la sección de Portafolio

Utilizando Fetch API para el portafolio

Estilos al Portafolio

Creando el Footer

Estilos al Footer

PROYECTO: AirBNB, recreando la página Principal

Comenzando el Proyecto

Creando variables y estilos al Header

Finalizando el Header

Estilos al Buscador

Creando la primer sección de Anuncios

Estilos a los anuncios

HTML para la sección Premium

Estilos para la sección Premium

Finalizando la sección Premium

Creando la sección de Hospedaje

HTML para los destinos populares

Estilos para los destinos populares

Creando la sección de anuncios de la parte inferior

HTML para el footer

Estilos al Footer

Creando el Menú de Redes Sociales

Creando el botón para mostrar / ocultar el footer

JavaScript para el Footer

Estilos para mostrar y ocultar el Footer

Últimos Ajustes al Proyecto


Reviews

J
Jorge16 September 2020

si estas recien empezando con html css, este curso es ideal. Se dan muchos conceptos y muchos ejemplos de proyectos reales. Lo unico para mejorar, un poco mas lenta la ejecucion del codigo o que se explique un poco mas. A veces va muuuy rapido y frustra un poco al que es novato. Despues el resto es increible muy buen profesor

A
Ana31 August 2020

Las clases van muy rápido y se deja demasiadas cosas sin explicar o simplemente sin mencionar.. No sabe dar las clases.

B
Beyner27 August 2020

Excelente explicación todo es atendible aunque el curso es del año 2018 es muy claro en la explicado seguiré comprando sus cursos

N
Nieves14 August 2020

Estoy aprendiendo más de lo que esperaba. Trabajar sobre proyectos reales es muy buen método, y si el docente sabe trasmitir, tiene conocimientos, experiencia, resulta una combinación ideal.

S
Sergio13 August 2020

He aprendido bastante cosas nuevas sobre el diseño web desde el aspecto de un sitio web. Dichos conocimientos me van a servir tanto a mí, como a mi centro de trabajo.

J
Juan25 February 2020

el curso, me ha encantado. Creo que se aprende mucho y bien. Lo único que he echado de menos, es en la parte de "entrenamiento" de CSS Grid, el código correspondiente a los ejercicios acabados. Creo que sería interesante para poder "trastear". Pediría si es posible, que los resubiera al curso. Dejando a parte este detalle, el curso es altamente recomendable.

E
Eldin5 February 2020

Un buen curso si es que deseas mejorar tus habilidades en CSS muy enfocado aunque se necesita mayor practica para llevar acabo lo aprendido.

M
Miguel1 February 2020

Aprendí mucho en este curso, 100% recomendado, el profesor es muy detallado al explicar las cosas y nos proporciona tips para nuestros proyectos personales

R
Rafael11 January 2020

Primera vez que encuentro un curso claro y bien explicado acerca de Flexbox, muy contento hasta el momento, muy bien explicado por el instructor y se nota un amplio dominio del tema, se han aclarado muchisimas dudas que siempre he tenido. Recomiendo ampliamente este curso si eres desarrollador y te toca estar maquetando los diseños de terceros

B
Bryan8 January 2020

Bastante bueno este curso me ayudo mucho a reforzar mi manejo tanto en flexbox como en GRID y sobre todo una gran guía para crear grandes diseños y maquetaciones de sitio web con las tendencias en el mercado actual.

I
Israel3 January 2020

Simplemente un gran curso si ya eres diseñador web y quieres mejorar en Grid y Flexbox. Lo que más me gustó es la cantidad de ejemplos que trae y la dedicación del tutor a explicar todo detalladamente. De 10!

J
Jose25 December 2019

Un curso con proyectos muy interesantes en el que he aprendido mucho y he pulido mis habilidades de Front-End. Las explicaciones son claras y tienes a tu disposición los ejercicios terminados para poder revisar dónde están los errores. Tengo varios cursos de este instructor y lo recomiendo.

M
Mario9 December 2019

Acabo de terminar el curso, me gusta que sea muy practico y explica los valores disponibles de cada propiedad, Se hacen varios proyectos / plantillas inspiradas en AirBnB, AdminLTE, login. El único detalle es que no propone retos relacionados con lo aprendido, lo cual llega a ser un poco de copiar y aprender, y no de copiar, aprender y hacer algo nuevo. Estaría bien hacer un curso avanzado o proyecto mas real de como integrarlo con algún framewok como angular o react y algún back como php o node. Saludos

C
Carlos2 December 2019

No fue buena elección, explica asumimiendo que los que tomamos el curso sabemos de toda la herramienta que utiliza

J
Jose19 November 2019

Me ha encantado el curso, soy programador y creía que sabía de maquetación. Ahora si que hago cosas muy curiosas, aunque no soy tan rápido como el profesor, que por cierto es fantástico. Ya he comprado otros cursos del mismo profesor porque merece la pena. Me gusta como lo explica, su humildad y la forma de como lo explica. un 10.


Coupons

DateDiscountStatus
10/30/202095% OFFExpired
4/1/202194% OFFExpired
4/15/202194% OFFExpired
4/29/202194% OFFExpired
8/31/202194% OFFExpired
9/3/202194% OFFExpired

1608312

Udemy ID

3/20/2018

Course created date

11/20/2019

Course Indexed date
Bot
Course Submitted by