Udemy

Platform

Español

Language

Web Development

Category

Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap 4

Aprende CSS3, Maquetación web, Responsive Web Design, SASS, LESS, Flexbox, CSS Grid Layout y Bootstrap 4 desde cero +20h

4.60 (4848 reviews)

14440

Students

20.5 hours

Content

Jan 2021

Last Update
$124.99
Regular Price


What you will learn

Aprender HTML

Dominar CSS

Dominar CSS3

Dominar la maquetación web

Dominar el diseño web adaptable (responsive)

Dominar LESS

Dominar SASS

Dominar CSS Grid

Dominar Flexbox

Dominar Bootstrap 4

Crear páginas web desde cero

Aplicar efectos y animaciones a tus webs

Aplicar diseños avanzados a un sitio web

Trabajar con preprocesadores css

Trabajar con CSS avanzado

Trabajar con frameworks para CSS

Aumentar el nivel en el desarrollo web front-end

Mejorar la capacidad de adaptación a otros frameworks CSS

Aumentar las posibilidades laborales como desarrollador

Mejorar tu perfil de programar

Posibilidad de optar a mejores puestos de trabajo bien remunerados

¡Y mucho más!


Description

Bienvenido al Máster en CSS, en el que aprenderemos todo lo necesario para dominar HTML, CSS, CSS3, Maquetación web, Responsive, SASS, LESS, Flexbox, CSS Grid Layout y Bootstrap 4, las tecnologías de front-end orientadas al diseño web más importantes, con más demanda laboral y más proyección de futuro.

Este no es un curso normal, estás ante un máster completo de decenas de horas de contenido único y exclusivo, y posiblemente el curso más completo que existe en internet de esta temática.

Aprenderemos a trabajar con:

  • HTML, el lenguaje de marcado imprescindible en cualquier web.

  • CSS, el lenguaje que nos permitirá darle estilos y aplicar un diseño a nuestras webs.

  • CSS3, enseñando las novedades y los increíbles efectos para las páginas web.

  • Maquetación web profesional, desarrollando varios proyectos web con HTML 5 y CSS3 paso a paso.

  • Responsive web design, haciendo que cualquier web se adapte a cualquier dispositivo móvil o pantalla.

  • SASS, el preprocesador CSS más popular.

  • LESS, un preprocesador CSS muy interesante.

  • Flexbox, el nuevo modelo de maquetación web basado en elementos flexibles.

  • CSS Grid, un nuevo modelo de maquetación con CSS cada vez más popular.

  • Bootstrap 4, el framework para CSS más importante.

  • Habilidades de front-end profesional, haciendo cientos de ejercicios, prácticas y varios proyectos completos.

Si quieres ser desarrollador front-end o full-stack, o incluso si ya te dedicas al desarrollo web, aprender a trabajar con estos lenguajes, técnicas, preprocesadores, modelos y frameworks es muy importante y te abrirá un nuevo mundo de posibilidades.

La metodología de aprendizaje es la ideal:

  • Todo explicado desde cero y paso a paso.

  • Decenas de horas de contenido en clases en vídeo.

  • Cientos de prácticas y ejercicios.

  • Más de 200 clases bien explicadas.

  • Varios proyectos poniendo en práctica todo lo aprendido.

  • Orden lógico y progresivo, diseñado para interiorizar todos los conocimientos tanto si sabes programar como si no.

  • Además te estaré ayudando cuando tengas cualquier duda o problema.

Al finalizar el curso:

  • Sabrás las bases del desarrollo web.

  • Sabrás crear sitios web estáticos.

  • Dominarás a la perfección la maquetación web.

  • Sabrás adaptar tus webs a dispositivos moviles.

  • Dominarás todos los preprocesadores y frameworks para CSS más importantes para desarrollar proyectos o aplicarlos a proyectos ya existentes.

  • Y mucho más.

Durante las más de 20 horas del curso verás como desarrollar varias webs y haremos practicarás con todo lo que enseñamos.

Trataremos todos los temas paso a paso y poco a poco hasta conseguir un buen nivel en desarrollo web con HTML, CSS, Responsive, SASS, LESS, Flexbox, CSS Grid Layout, Bootstrap, etc.

Para aprovechar al 100% el curso te recomendamos tener conocimientos básicos el uso de un sistema operativo al nivel de instalar programas y usar un navegador web, aún así dentro del curso haremos un repaso de todo para afianzar estos conocimientos. Pero realmente no necesitar tener ningún conocimiento previo en desarrollo web, lo aprenderemos todo dentro de este máster.

Además de todo esto, en los cursos de Víctor Robles conseguirás soporte, apoyo y ayuda muy rápida para que puedas conseguir tus objetivos, comprender todos los conceptos explicados y resolver tus dudas.

Si quieres aprender desarrollo front-end moderno con CSS sin dolor, practicando poco a poco con las tecnologías más potentes y solicitadas en el mercado, subir de nivel en el desarrollo web y aumentar tus oportunidades laborales ¡Este es tu MASTER!

Échale un vistazo al programa del curso para ver todos temas que aprenderás.

Únete al curso y sube de nivel: ¡¡ Se un Máster en CSS !!


Screenshots

Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap 4
Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap 4
Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap 4
Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap 4

Content

Introducción

Introducción al Máster en CSS: CSS3, Responsive, SASS, LESS, Flexbox, Grid y más

[ Introducción: HTML ]

HTML - ¿Que aprenderás?

Aprender HTML desde cero (opcional)

¿Que es HTML y para que sirve?

¿Que es una etiqueta y como funciona?

La estructura de una página web con HTML

Etiquetas de texto en HTML

Listas y listados en tu página web html

Poner imágenes en una web

Tablas HTML

Crear formularios en HTML

Ejercicio completo para practicar con HTML

Múltiples páginas

Enlaces con HTML

[ Introducción: CSS y las hojas de estilo en cascada ]

CSS - ¿Que aprenderemos?

Primeros pasos con CSS

¿Que es CSS y para que sirve?

Herramientas para trabajar con CSS 3

Creando el proyecto

Estructura HTML

Como añadir estilos CSS a una web

Selectores en CSS

¿Que es un selector?

Selectores de etiquetas

Selector de ID

Selector de clase

Selector de atributo

Selectores hijo

Prioridad en CSS

Fuentes y colores

Fuentes

Fuentes personalizadas con CSS3

Colores

Fondos y textos

Fondos

Propiedades CSS para textos

Modelo de cajas y posicionamiento de elementos

Modelo de cajas - Margenes, paddings, alto, ancho y bordes en CSS

Posicionamiento de cajas

Practicando con los floats

Ejercicios con CSS

Enunciado de los ejercicios

Ejercicio 1

Ejercicio 2

Ejercicio 3

Ejercicio 4

Ejercicio 5

Ejercicio 6 y 8

Ejercicio 7

Ejercicio 9

Sombras y efectos

Sombras

Bordes redondeados

Posicionamiento relativo, absoluto y fijo

Overflows

Posición absoluta (absolute)

Posición fija (fixed)

Transiciones y animaciones

Pseudoclases

Transiciones

Animaciones con CSS3

[ Introducción: Proyecto completo con HTML5 y CSS3 ]

Proyecto completo con HTML y CSS - ¿Que aprenderás?

Proyecto completo - Maquetación web con HTML5 y CSS3

Introducción al proyecto de maquetación con HTML 5 y CSS 3

Recursos para este proyecto

Estructura del proyecto web

HTML básico y favicon

HTML de la cabecera

Estilos de la cabecera

Fuentes personalizadas en CSS

HTML del menú

CSS del menú de navegación

Efecto hover en el menú

Menús desplegables

HTML de la barra lateral

CSS para la barra lateral

Estilos de los formularios

Terminando la barra lateral

Colores de los encabezados de la barra lateral

HTML para las secciones

CSS para las secciones

Maquetación de las pegatinas o stickers

Iconos svg a través de una fuente personalizada

Footer o pie de página del sitio web

[ Introducción: Responsive Web Design ]

Responsive Web Design y diseño web adaptable - ¿Que aprenderás?

Responsive Web Design - Aprender a adaptar webs para smartphones y tablets

¿Que es el Responsive web design o el diseño web adaptable?

Maquetación con porcentajes

Media queries

Viewport para mejorar el Responsive

[ Introducción: Proyecto completo y maquetación web avanzada ]

Maquetación avanzada - ¿Que aprenderás?

Proyecto completo - Maquetación web avanzada con HTML 5 y CSS 3

Introducción al nuevo proyecto de maquetación web y responsive

Recursos para este proyecto web

¿Que haremos y como lo haremos?

Estructura básica HTML para la página web

HTML para la cabecera y el menú de navegación

CSS para las fuentes personalizadas

Estilos generales y de la cabecera de la web

Estilos del menú de navegación

Maquetando el banner

HTML de las tarjetas

Maquetando y dando estilos a las tarjetas

Estilos CSS del contenido de las tarjetas

HTML de la barra lateral del website

Encabezados de la barra lateral

Estilos del buscador

Estilo de las cajas laterales

Maquetar campos del formulario de login

Maquetando botones y haciendo degradados y gradientes con CSS3

Maquetando links y enlaces

Maquetando con CSS los iconos de redes sociales

HTML de los artículos

Encabezado de los artículos con CSS

Maquetando artículos

Maquetar botón del blog

HTML del pie de página

Haciendo el CSS del pie de página

Terminando la maquetación del footer

[ Introducción: Proyecto con Animaciones y Transiciones avanzadas]

Proyecto con Animaciones y Transiciones - ¿Que vas a aprender?

Proyecto completo - Animaciones y transiciones avanzadas con CSS

Animación del logotipo de la web

Animación y cinemática del banner

Animaciones y transiciones para las tarjetas

Animación para iconos de redes sociales

Animaciones con CSS3 finales

[ Introducción: Proyecto con Responsive web design ]

Proyecto con diseño web adaptable - ¿Que aprenderemos?

Proyecto completo - Responsive web design a un sitio web

Viewport de la web

Responsive de las tarjetas

Responsive del contenido y el pie de página

Diseño web adaptable en escritorio y tablet

Responsive avanzado para tablet o pantallas medianas

Responsive avanzado para smartphones o pantallas de tamaño reducido

Responsive para movil mediano

Responsive para pantallas muy pequeñas

Ajustes responsivos para el pie de página

Terminando el diseño web adaptable o responsive web desing del sitio web

[ Introducción: SASS ]

SASS - ¿Que aprenderás?

SASS - El preprocesador CSS más popular

¿Que es un preprocesador css y para que sirve?

Instalar SASS

Variables y compilación

Anidación

Módulos en SASS

Mixins con SASS

Herencia en el preprocesador sass

Operadores

Condicionales en SASS

Bucles en SASS

[ Introducción: Preprocesador LESS ]

LESS - ¿Que te enseñaré?

LESS

Instalar Less

Mixins y anidación en Less

Operadores y estructuras de control

[ Introducción: Flexbox ]

Aprender Flexbox

Flexbox

¿Que es Flexbox y para que sirve?

Estructura HTML y conceptos de Flexbox

Estilos a las cajas

Display flex e inline-flex

Direcciones

Envoltorio en flex

Orden

Grow

Shrink

Flex basis, grow, calc y variables css

Alineación horizontal

Alineación vertical

Maquetación web flexible con HTML, CSS, Flexbox y Responsive - Proyecto completo

Introducción a la maquetación web flexible con Flexbox

HTML del proyecto y del menú

Estilos generales

Estilos del logo

Menú de navegación flexible

HTML del contenido

CSS y Flexbox de los proyectos

Flexbox de la barra lateral

Pie de página con flex

Responsive y Flexbox

[ Introducción: CSS Grid Layout ]

CSS Grid Layout - ¿Que aprenderás?

CSS Grid

¿Que es CSS Grid Layout?

HTML para Grid

Estilos y CSS básico

Primeros pasos con CSS Grid Layout

Fracciones y repeact

Columnas y filas

Expandir columnas

Expandir filas

CSS Grid es Responsive y se adapta a la pantalla de cualquier dispositivo

Maquetación web con HTML, CSS, CSS Grid Layout y Responsive - Proyecto completo

HTML para el ejercicio completo

CSS básico del ejercicio completo

Creando un sitio web completo con CSS Grid Layout en 5 minutos

Grid dentro Grid

Centrar contenido

Grid Areas

Grid Template Areas

Grid Gap

Proyecto - De Flexbox a CSS Grid Layout

Maquetación con Grid Layout

Pie de página

Responsive y CSS Grid Layout

[ Introducción: Bootstrap 4 desde cero ]

Bootstrap 4 - ¿Que aprenderemos?

Primeros pasos con Bootstrap 4

¿Que es Bootstrap y para que sirve?

Instalar Bootstrap 4 + Primeros pasos

Filas y columnas en Bootstrap 4

Columnas y filas en Bootstrap

El grid de Bootstrap 4

Pie de página con Bootstrap

Ancho automatico

Alineación horizontal de elementos

Alineación vertical de elementos

Función Calc de CSS

Ordenar elementos

Offset

Responsive Web Design en Bootstrap 4

Columnas, tamaños y diseño adaptable

Media queries para Bootstrap

Viewport para mejorar el diseño adaptable

Ocultar y mostrar en vista responsive

Utilidades en Bootstrap 4

Altura y anchura

Bordes

Flotados

Colores y fondos

Margenes y paddings

Sombras

Visibilidad

Textos

Mostrar código

Componentes de Bootstrap 4

Introducción a los componentes de Bootstrap

Barra de navegación

Alertas

Migas de pan

Badgets

Tarjetas

Botones

Slider / Galeria

Jumbotron

Modals, pop-ups y ventanas emergentes

Paginación

Collapse

Barra de progreso con Bootstrap y JavaScript

Tooltips

Popovers

Formularios

Tablas

Clases extra

Aprender programación y JavaScript básico desde cero

BONUS - Despedida y sorpresas

BONUS - Despedida y sorpresas extra



Reviews

M
Mauricio12 October 2020

Muy claro durtante todo el curso y muy ordenado, esto hace que adquieras los conociemientos de manera sistematica, muy recomendable

N
Nicolas11 October 2020

Lo termine hace un tiempo pero hasta el dia de hoy me sirven los conocimientos adquiridos. Increible curso y mas especificamente en la parte de CSS que me permitio entender temas tales como flexbox o CSS Grid que eran lo que deseaba aprender y entender

O
Oswaldo9 October 2020

Estoy empezando, va explicando muy bien, tambien le entiendo por que ya habia visto algunos de los temas en otros cursos.

C
Cristhian9 October 2020

It's a good course to know the basis about css and also about some avance stuff, the techer is not know aobut his design, but they are functional. I highly recommender to people who are new in css.

C
Cristhian7 October 2020

Si fue una buena elección? Completamente, este curso me enseño de una manera fácil y didáctica como utilizar muchos lenguajes de programación que se relacionan entre si, recomendado para todo aquel que quiera ingresar en el mundo de la programación.

R
Rodrigo1 March 2020

El Master es genial. Si bien ya tenía mucha experiencia con Maquetado y Diseño web en sí, estoy aprendiendo bastante. Detalles que no sabía. Y por sobre todo animaciones las cuales hacía con otras tecnologías descubrí con Víctor que se pueden hacer perfectamente y más fácil en CSS. Pero mi calificación no llega a las 5 estrellas porque considero que las páginas que maquetamos con Víctor corresponden a un modelo viejo de páginas. Actualmente se trabaja con páginas más modernas que suelen abarcar el 100% de la pantalla con sus banners, o poseen buscadores más grandes, etc. Estoy ansioso por ver que tal el curso de Bootstrap. Si este rompe mis expectativas ignorare por completo el estilo de las páginas web y le daré unas 5 estrellas. Por otro lado, Víctor explica muy bien, con varios ejemplos, y no hace los vídeos de más de 10 minutos salvo en algún que otro caso que así lo requiera. En fin, el curso es excelente. Lo recomiendo bastante.

C
Carlos29 February 2020

Un curso muy completo, no me quedo ninguna duda! No es solo un tipo lanzando códigos durante 20h sin sentido... a mitad del curso tienes suficientes conocimientos para hacer tu página

B
Bernardo29 February 2020

Tenía pendiente mi aprendisaje de web, lo vine postergando hasta que justo vi un video de Victor en youtube y encontre lo qeu buscaba un curso que me diga por donde empezar y como seguir. Esta genial esta guia. Vale oro!

O
Oscar29 February 2020

Me ha gustado mucho este curso, bien explicado y con realización de ejemplos paso por paso para asumir los conocimiento.

J
Jonathan27 February 2020

Termine este curso y me ha servido muchisimo como retroalimentacion. Ahora voy por el de Master en JS :)

P
Pascual26 February 2020

Si se enseña tecnología avanzada y framework específicos, enseñar HTML básico es una perdida de tiempo y un relleno innecesario para el curso. Se nota que ha querido rellenar tiempo con esta parte. Podrías haber hecho un curso exclusivo para hacer perder el tiempo con HTML. Todo esto se debería haber visto en una única sección de diez minutos como máximo.

M
Miguel24 February 2020

La oratoria del profesor es perfecto. Dinámica pero profesional. Muy cercana, se nota que se ha peleado con cada cosa que cuenta.

D
Diego20 February 2020

Hasta el momento me ha gustado por que los ejemplos practicos dejan muy en claro los conceptos de la teoria,

G
Gerson20 February 2020

Excelente curso, buen dominio por parte del profesor y aprendido mucho, recomiendo el curso totalmente a cualquier persona que quiera empezar en este mundo de la programación web, sin tener nada de conocimientos con este curso obtendrá lo necesario para empezar (y)

F
Fausto19 February 2020

Excelente curso, muy claro todo y explica todo en detalle y con la practica que cuadra perfecto para lo que esta explicando. Recomendado!!!



Coupons

StatusDateDiscount
Expired1/24/202093% OFF
Expired2/11/202095% OFF
Expired5/20/202094% OFF
Expired6/30/202094% OFF
Expired9/3/202095% OFF
Expired9/10/202094% OFF
Expired10/19/202094% OFF
Expired10/20/202094% OFF
Expired11/20/202092% OFF
Expired12/20/202092% OFF
Expired12/28/202094% OFF
Expired1/12/202194% OFF

2060911

Udemy ID

12/1/2018

Course created date

12/25/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram
Android PlayStore
Apple Appstore