- 1

Container queries y pseudoclases modernas en CSS
00:59 - 2

Instalación de herramientas para curso de CSS avanzado
04:51 - 3

Pseudo clase :has() de CSS para seleccionar elementos padre
07:22 - 4

Pseudoclase :is() para agrupar selectores en CSS
04:59 - 5

Diferencias entre pseudo clases WHERE e IS en especificidad CSS
03:49 - 6

Selector CSS not para excluir elementos específicos
02:34 - 7

Pseudo clase NTH Child con of-type en CSS
03:08 quiz de Selectores y funciones avanzadas en CSS
Instalación de herramientas para curso de CSS avanzado
Clase 2 de 34 • Curso de CSS Avanzado y Responsive Design
Contenido del curso
- 8

Media Queries vs Container Queries en CSS Responsivo
07:40 - 9

Container Queries: adaptar estilos según el tamaño del contenedor
06:36 - 10

Container queries para componentes responsivos en CSS
09:53 - 11

Variables CSS para optimizar y reutilizar estilos
04:57 - 12

Función calc() para mezclar unidades en CSS
04:06 - 13

Función Clamp CSS: valores mínimos, máximos y preferidos dinámicos
03:19 - 14

Funciones Min y Max en CSS para diseño responsive
03:30 - 15

Propiedades CSS personalizadas con @property para animaciones
04:09 quiz de Container Queries - Adiós a los Media Queries tradicionales
- 28

Estructuración de landing page con HTML
08:02 - 29

Variables CSS como sistema de diseño consistente
10:59 - 30

Estilización de sección Hero con CSS y efectos hover interactivos
05:16 - 31

Creación de sección de proyectos con grid y efectos hover
08:39 - 32

Animaciones CSS con scroll para sección de habilidades
03:58 - 33

Diseño de formulario de contacto y pie de página con CSS
06:39 - 34

Diseño responsivo con container queries y media queries
07:04
Para llevar a cabo un curso práctico de CSS avanzado, es importante tener instaladas ciertas herramientas necesarias. Estas instalaciones permiten seguir las clases y poner en práctica los contenidos de manera efectiva.
¿Qué navegador es recomendable usar?
Una herramienta importante para seguir cómodamente este curso es el navegador. El más recomendado, en este caso, es Google Chrome, dado que facilita seguir las instrucciones. Aunque existe la opción de utilizar otros navegadores, mantener uniformidad permite un aprendizaje más sencillo.
¿Cómo instalar Git y para qué sirve?
Git es un software imprescindible en el desarrollo de proyectos, especialmente cuando se trabaja en equipo o se necesitan diferentes versiones del contenido. Permite:
- Descargar el material utilizado durante las clases.
- Mantener un control efectivo sobre los cambios realizados.
Para instalarlo, sigue estos pasos:
- Visita el repositorio GitHub de Platzi y busca "css advanced".
- Desde allí mismo accede a Git haciendo clic con el botón medio del ratón para que se abra en una pestaña nueva.
- La página reconoce automáticamente tu sistema operativo y te muestra la versión adecuada para descargar.
- Descarga la versión más reciente etiquetada como compatible con tu sistema operativo.
- Ejecuta el instalador, siguiendo los pasos que aparezcan (generalmente será presionar siguiente repetidas veces y luego instalar).
- Una vez terminado el proceso, puedes eliminar el instalador.
¿Qué es Visual Studio Code y cómo se instala?
Visual Studio Code es el editor de código que se utiliza durante el curso. Facilita la edición y organización de los archivos que se vayan a crear o modificar durante las clases prácticas.
La instalación consiste en:
- Acceder nuevamente desde el repositorio "css advanced" del GitHub de Platzi y buscar Visual Studio Code.
- Descargar la versión específica del sistema operativo que utiliza la computadora.
- El proceso de instalación también es sencillo: basta con aceptar los términos y avanzar continuamente hasta finalizar la instalación.
- Finalmente, se puede eliminar el archivo instalador para mantener el escritorio libre de ficheros innecesarios.
¿Para qué sirve la extensión Live Server?
Por último, dentro de Visual Studio Code, se requerirá instalar la extensión Live Server. Esta herramienta es bastante útil porque permite:
- Visualizar en tiempo real los cambios realizados en el código del curso.
- Facilitar el proceso de aprendizaje mediante la actualización instantánea de los contenidos modificados.
La instalación de Live Server es sencilla y se realiza directamente desde el editor Visual Studio Code. Basta con dirigirse a la sección de extensiones del editor, escribir el nombre "Live Server" y pulsar instalar.
Si tienes alguna pregunta o quieres comentar algo sobre estas herramientas esenciales para tu desarrollo práctico, deja tu comentario abajo.