CSS Grid: Principiante a Experto Creando Web Responsive

Experto en CSS, lleva CSS al Siguiente Nivel con un Proyecto! CSS Grid, CSS Avanzado y Flexbox

4.55 (97 reviews)
Udemy
platform
Español
language
Web Development
category
498
students
5.5 hours
content
Sep 2023
last update
$19.99
regular price

What you will learn

Crear páginas web utilizando Flexbox y Grid.

Diferenciar cuando es bueno utilizar Flexbox y cuando es bueno Grid. (Se puede combinar y usar juntos)

Aprenderemos a hacer Diseño Responsive con CSS Grid.

La diferencia entre CSS y CSS Grid

Escribir el código para poder intuir el resultado de nuestra página web solo con ver el código.

Como Combinar CSS Grid y Flexbox.

Veremos cuándo es recomendable usar Flexbox y cuando no.

Configuraremos nuestro editor de texto para escribir menos en CSS y CSS Grid.

Aprenderemos creando proyectos reales.

Description

Aprenderemos la nueva forma de crear Layout sin tener que usar librerías pesadas únicamente con CSS Grid, veremos lo potente que es y lo muchos casos de uso que tiene.

Cogeremos paginas complejas y las adaptaremos a CSS Grid en cuestión de pocas lineas y demostrar que un proyecto complejo se puede convertir en uno simple con el simple uso de CSS Grid.

En este curso aprenderás desde lo básico a lo más Avanzado.

  • ¿Que es Grid ?

  • Como combinas CSS GRID y elementos con Flexbox

  • Posicionar columnas y filas dentro de CSS Grid.

  • Lo fácil que es hacer Web Responsive y posicionar los elementos con CSS Grid.

  • Términos y funciones clave de CSS Grid como repeat(), minmax() auto-fit, auto-fill y mucho mas.

  • Crear sitios web responsive fácilmente.

  • Recreando la Home de Apple un poco modificada.

Content

Introducción

Introducción
¿Que es CSS Grid?

Instalando y Configurando un Code Editing. (Visual Studio Code)

Seleccionando un Editor de Texto
Instalando Code Editing
Instalando Modulos para CSS y CSS Grid

CSS Grid de 0 a Experto

Terminologias y primeros pasos
Grid Gap Separación entre elementos
Usando GRID lines por su nombre
GRID start & GRID end lines
Unidad de Medida Fracción (fr)
GRID template areas
Establecer límites con minmax()
Repetir valores y patrones con repeat()
GRID Dinámico con auto-fill y auto-fit
GRID auto-placement y packing modes
Implicit & explicit GRID
Re-ordena GRID items con la propiedad order
GRID dentro de otro GRID
Propiedad acortada grid-template
Alineamiento de GRID items con justify-items
Alineamiento de GRID ítems con align-self
Alineamiento de GRID ítems con justify-self y align-self

Recreando la Home de Apple

¿Que vamos hacer?
Nombrando las Grid Areas
Posicionando elementos del Grid Layout
Terminando Grid Layout
Creando el Responsive del Grid Layout

Despedida

Clase Extra

Screenshots

CSS Grid: Principiante a Experto Creando Web Responsive - Screenshot_01CSS Grid: Principiante a Experto Creando Web Responsive - Screenshot_02CSS Grid: Principiante a Experto Creando Web Responsive - Screenshot_03CSS Grid: Principiante a Experto Creando Web Responsive - Screenshot_04

Reviews

Leopoldo
November 5, 2023
Muy bueno, practico para aprender la base y un poco más. suficiente como para luego embarcarse por uno mismo.
Israel
May 14, 2023
Los textos de las pantallas se ven demasiado pequeñas, a veces cuesta trabajo distinguir lo que escribe
Edwin
July 24, 2022
Como desarrollador Backend el diseño web siempre me ha desanimado pero este curso me ha dado mucha confianza para entrar en detalle en el mundo web. Gracias Agustin, nunca decepcionas con los cursos
Arturo
February 5, 2022
No explica bien, no se le entiende, debería de usar marcadores para señalar o recalcar el contenido. También debería de hacer zoom al editor ya que casi no se ve, teniendo en cuenta que uso un monitor de 24 pulgadas y brillo al máximo. Quizás si veo mejoras más adelante, cambie mi calificación.
Joel
December 21, 2021
El profesor es un crack, si buscas entender CSS Grid este curso es para ti, es un curso específico en esta materia, a veces es mejor centrarse en algo en concreto para poder entenderlo y no comprar cursos que te incluyen de todo pero no profundizan en nada. Gracias a este curso y a mis propias prácticas con los contenidos de este curso ahora puedo decir que domino CSS Grid. Lo recomiendo al 100%.
Raul
February 1, 2021
Estuvo muy bueno el curso bien explicado, pero creo que le hace falta alguna actualización o mas contendió.
Ivan
January 17, 2021
Excelente curso, no pongo 5 estrellas, por que jamás se hablo de Flexbox y en el intro del curso el profesor comenta que se veria como podemos usar CSS GRID con Flexbox.... espero pronto mejoren esa parte.
Raúl
December 10, 2020
Me parece muy bueno el curso, se entiende y tiene un buen orden el contenido para entender bien CSS Grid
Luis
December 4, 2020
Muy buen curso, claro en los conceptos de CSS Grid y con una minipractica final para demostrar lo facil que es usar CSS Grid, sobre todo para el tema responsive.
Cesar
September 17, 2020
El contenido por ahora es bueno y explica bastante bien, viendo el proyecto final del curso me pareció algo muy sencillo, me hubiera gustado algo mas elaborado.
Jose
July 10, 2020
Excelente curso, muy completo, y la forma en que lo explicas realmente es muy fácil de comprender, Muchas Gracias... Altamente recomendable para quien este pensado en adquirirlo...
Raúl
May 7, 2020
Parece bastante improvisado pero según avanza el curso, la cosa mejora. La calidad de imagen del código es baja. La velocidad de enseñanza es adecuada para mí. Las trancisiones entre código y resultado me parecen bien, adecuadas. Lo elegí porque trata exactamente de lo que estoy buscando. Estoy aprendiendo bastante.
Carmen
June 6, 2019
Muy buen curso te enseña lo último en CSS y como usarlos en proyectos reales con buenas prácticas, las explicaciones muy claras y sencillas de entender.
Juan
June 3, 2019
Un curso muy recomendable te enseña técnicas muy completas para crear web 100% responsive con muy poco esfuerzo.
Marino
May 3, 2019
Un curso muy bien explicado que tal vez puede ser aburrido para los expertos en CSS, pero para los neofitos como yo Excelente. Por otro lado Agustín siempre está muy atento a tus preguntas y te resuelve las inquietudes al vuelo. Te lo recomiendo.

Coupons

DateDiscountStatus
9/1/202050% OFF
expired
10/16/202050% OFF
expired
3/13/202150% OFF
expired
4/23/202150% OFF
expired
6/15/202150% OFF
expired
7/7/202150% OFF
expired
7/22/202150% OFF
expired

Charts

Price

CSS Grid: Principiante a Experto Creando Web Responsive - Price chart

Rating

CSS Grid: Principiante a Experto Creando Web Responsive - Ratings chart

Enrollment distribution

CSS Grid: Principiante a Experto Creando Web Responsive - Distribution chart
2257056
udemy ID
3/6/2019
course created date
11/23/2019
course indexed date
Bot
course submited by