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

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

4.62 (9377 reviews)
Udemy
platform
Español
language
Web Development
category
instructor
28,787
students
20.5 hours
content
Jan 2024
last update
$69.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

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, 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 Layout, un nuevo modelo de maquetación con CSS cada vez más popular.

  • Bootstrap 4 y 5, 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.

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 !!

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

Screenshots

Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap - Screenshot_01Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap - Screenshot_02Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap - Screenshot_03Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap - Screenshot_04

Reviews

Federico
November 18, 2023
Hice el curso de HTML y enseguida me puse con este de CSS. Victor explica todo con detalle y resulta sencillo comprender la mayoría de los conceptos para pasar a la práctica. Recomiendo mucho sus cursos!
Raul
November 2, 2023
Este es mi segundo curso y lo estoy gozando, las explicaciones son muy claras y todo perfectamente estructurado, recomiendo al 100%!
Valentin
October 26, 2023
Creo que es un curso con bastantes contenidos pero no se profundiza demasiado en ellos. Creo que es útil para las personas que no saben nada sobre las diferentes tecnologías pero para alguien que sabe más son simples tips o recordatorios. No recomiendo el curso si tienes algo de idea pero como punto de partida inicial no me parece malo.
Simon
October 23, 2023
El curso me pareció que esta muy bien, para aquellas personas que busquen lo básico y saber como empezar como lo era mi caso. Hay algunas cosas que no me funcionaron al momento pero curioseando un poco se logran arreglar sin problemas con un poquito de dedicación y curiosidad.
Ricardo
July 10, 2023
Este curso me permitió comprender las bases de lenguaje css, frameworks y herramientas para añadir estilos, me pareció bastante completo.
Julián
June 28, 2023
Muy buen curso, me gusto y pude aprender mucho e interioriza al detalle cada tema. Se puede apreciar que como guía, maestro o instructor trae lo sustancial de las temáticas a aplicar y que como estudiante lo podamos aprender muy bien. Sirve mucho los aportes y comentarios de los demás usuarios o estudiantes del curso. Sí recomiendo al profesor profundizar más en Bootstrap, ya que hay mucha documentación y cambio de versiones; lo otro y muy importante, brindar un mejor soporte a los estudiantes. Seguiré con el Master de JavaScript, PHP y Python...
Lanselot
June 26, 2023
si se supone que estas enseñando desde cero cada cosa, deberias tomarte tu tiempo para explicar de forma muy detallada cada cosa y con buenos ejemplos, porque veo que como enseñas es como si yo estuviera leyendo un libro, y casi que me duermo del aburrimiento, tambien quiero resaltar que las maquetaciones que mostraste son muy genericas y practicamente todas iguales, osea confie en ti siguiendo el orden que dijiste que hay que seguir, compre los cursos y me llevo la sorpresa de que ese orden que dijiste de tus cursos enseñas cosas que estan totalmente obsoletas y desactualizadas, tu curso de HTML me parecio excelente, pero este la verdad no explicas las cosas bien sino que explicas como si te explicaras a ti mismo o como si estuvieras leyendo un libro.
Carlos
June 24, 2023
fue una excelente elección, se todo lo que quiero hacer pero no tenia ni idea de como hacerlo y siento que este curso me brindara las herramientas necesarias.
Carlos
June 22, 2023
De momento llevando un 25% del curso realizado, tengo que decir que todo está muy bien explicado de una manera clara que me permite seguir todos los pasos de una manera fácil y amena. Felicidades por el curso y grácias.
Luis
June 16, 2023
En lo personal, realizar este curso fue una gran idea, ya que aprendí muchas cosas nuevas a lo largo de este curso y sin duda alguna, me abre el camino para continuar preparándome como desarrollador Front-end y lograr mis objetivos y convertirme en un desarrollador web profesional.
Adrià
June 13, 2023
El curso ha sido útil para reforzar mis conocimientos existentes en HTML y CSS, y en ese sentido ha cumplido con mis expectativas. Sin embargo, creo que habría beneficiado mucho más si se hubiera profundizado en Bootstrap. En lugar de limitarse a copiar contenido de la página oficial, hubiera sido enriquecedor desarrollar un proyecto práctico, similar a lo que se hizo con CSS. Este tipo de enfoque no solo motiva a los estudiantes, sino que también fomenta el aprendizaje autónomo al incentivar la personalización del proyecto. Además, me gustaría señalar que la sección de Bootstrap parece estar desactualizada, lo cual puede dificultar el seguimiento de las clases.
Alejandro
June 13, 2023
Una eccelente lección, se nota el entusiasmo del profesor, sin embargo, dado eso mismo tiende a correr un poco.
Nicolas
June 8, 2023
y mira arranque haciendo 1 horita todos los dias, me gusta tanto que los dias que no estoy ocupado estoy pegado a la compu 5-6 horas jajajja muy bueno!!!!
Miguel
June 4, 2023
de todas maneras, se entiende aunque al comienzo deberias de hacer una introduccion a la maquetacion con algo como digamos para darle forma a un menu cuantos div hay que tener para darle forma o al contenido por ejemplo y div contenedor y despues cuantos mas adentro para darle forma a todo lo que vas a poner algo asi.
Leonardo
May 31, 2023
Es un curso muy completo aprendí bastante y muy claro. El Bootstrap usado es el 4 pero aún así es fácil de utilizarlo actualmente en el 5, además de que el tutor contesta rápidamente las preguntas.

Coupons

DateDiscountStatus
1/24/202093% OFF
expired
2/11/202095% OFF
expired
5/20/202094% OFF
expired
6/30/202094% OFF
expired
9/3/202095% OFF
expired
9/10/202094% OFF
expired
10/19/202094% OFF
expired
10/20/202094% OFF
expired
11/20/202092% OFF
expired
12/20/202092% OFF
expired
12/28/202094% OFF
expired
1/12/202194% OFF
expired
3/11/202194% OFF
expired
3/21/202192% OFF
expired
3/23/202194% OFF
expired
3/31/202192% OFF
expired
4/7/202194% OFF
expired
4/21/202194% OFF
expired
5/13/202194% OFF
expired
5/23/202192% OFF
expired
5/25/202194% OFF
expired
6/21/202192% OFF
expired
7/5/202194% OFF
expired
7/25/202388% OFF
expired
11/23/202384% OFF
expired
12/3/202379% OFF
expired
12/23/202384% OFF
expired

Charts

Price

Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap - Price chart

Rating

Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap - Ratings chart

Enrollment distribution

Master en CSS: Responsive, SASS, Flexbox, Grid y Bootstrap - Distribution chart
2060911
udemy ID
12/1/2018
course created date
12/25/2019
course indexed date
Bot
course submited by