Curso de CSS
Bienvenido a este curso de CSS, si quieres aprender todo sobre el diseño web, seguro que este curso gratuito de CSS te vendrá perfecto para comprender la base del diseño de las páginas web ¡El CSS!
Pero ¿Qué aprenderemos en este curso de CSS?
Para empezar, lo primero que aprenderemos será a entender bien qué es realmente CSS (os adelanto que no es ni un lenguaje de programación ni de estructuras), una vez entendamos qué es (correctamente), podremos entender muchas más cosas, como su alcance.
Pero esto es solamente la parte teórica, en la parte práctica nos meteremos de lleno en CSS, veremos cómo lo podemos ejecutar (de diferentes formas),
Además veremos tanto los selectores (que nos permiten seleccionar algo de la web), como los propios atributos, que nos permitirán cambiar el tamaño, color, fondo, altura, etc.
En definitiva, este curso intenta ser un curso transversal pensando para que podamos tener una fuerte base de CSS para empezar ya mismo con el desarrollo web.
Por otra parte, tendremos una clase únicamente dedicada a la documentación ¡Es importante saber buscar! ¡Al igual que saber encontrar!
Esperamos que te guste este curso.
1. ¿Qué es CSS? ¿Cómo usarlo?
Antes que nada, permíteme que te dé la bienvenida a esta primera clase del curso de CSS, estoy seguro que lo disfrutarás.
Como en todas las primeras clases, la primera parte de la clase la dedicaremos a la teoría (prometo hacerlo divertido), pero ¡Esto es sólo la primera parte!
Una vez pasaremos la teoría y conozcamos qué es realmente CSS (un lenguaje de diseño/estilos), pasaremos a la práctica, para ello veremos hasta tres formas diferentes de ejecutar código CSS.
Como veremos en la clase, tenemos que entender que alguna de las formas que veremos de ejecutar CSS, aunque se permite, no siguen las buenas prácticas. En este curso, intentaremos ver, tanto las buenas prácticas, como las malas (y la razón por las cuales son malas).
Gracias a esto, cuando os encontréis con un código CSS en internet, podréis entender porqué lo están haciendo de esa forma y si es una buena práctica o una mala.
¡Veamos la clase para comprenderlo todo mucho mejor!
Video: https://www.youtube.com/watch?v=ukrh08rbFsY
Perfecto, ahora que hemos visto la clase, podemos seguir a la segunda clase, donde aprenderemos a utilizar selectores.
2. Selectores en CSS
Bienvenido a esta segunda clase del curso de CSS.
Como ya sabemos por la clase anterior, CSS es un lenguaje de estilos o diseño, lo que quiere decir que simplemente le tenemos que decir qué queremos modificar y cómo lo queremos modificar.
Pues bien, en esta segunda clase aprenderemos a realizar esa primera parte, es decir “seleccionar qué queremos modificar”, parece poco, pero los selectores ¡Son la mitad de CSS!
Para ello tendremos que aprender que existen diferentes clases de selectores, veremos que existen los básicos que son los de etiqueta, los de clase y los de ID que nos van a servir para el 99% de nuestro código.
No obstante veremos los avanzados, para todos los alumnos que quieran un código más limpio y realizar algunas acciones un poco más avanzadas (como seleccionar todas las etiquetas que cumplan unos requerimientos).
Video: https://www.youtube.com/watch?v=QcbP2-6xj7w
Como hemos podido ver en esta clase, los selectores son realmente sencillos, no obstante nos permiten hacer virguerías si los entendemos bien.
Ahora que ya hemos visto la clase, podemos dar por finalizada la parte de los selectores y sólo nos quedaría ¡Dar color a nuestra web!
Para ello os espero en la tercera clase donde analizaremos cómo podemos modificar textos con CSS.
3. Modificando textos en CSS
Gracias a la clase anterior de este curso de CSS, ya conocemos los selectores, por lo que nos toca ponernos manos a la obra para ir conociendo todas las opciones que nos da CSS.
En esta ocasión empezaremos aprendiendo los principales atributos que tiene CSS a la hora de modificar texto, ya sea un título (H1), un párrafo (p) o cualquier otro tipo de texto.
Como veremos más adelante en el vídeo podemos realizar casi cualquier modificación, desde el tipo de letra (también llamada fuente), hasta añadirle negrita o cursiva o incluso modificar el color.
Sobre la modificación del color, haremos una pausa y veremos que existen diferentes formas de especificar un color, algunas opciones son poco recomendadas y otras son mucho más avanzadas (cuando añadimos el canal alpha), no obstante, veremos que existen dos que son muy sencillas.
¡Veamos la clase!
Video: https://www.youtube.com/watch?v=rGW0KDUlPxM
Perfecto, ahora que ya hemos visto la clase, podemos entender perfectamente dos cosas.
Para empezar el funcionamiento completo de CSS (tanto los selectores que vimos la clase anterior como los atributos) y por otra, algo fundamental y es el registro hexadecimal para seleccionar los colores.
Así pues, en la próxima clase analizaremos cómo podemos montar estructuras flexibles con CSS3.
4. Flex
Bienvenido a esta cuarta clase del curso de CSS. En esta clase aprenderemos una de las cosas que personalmente me parecen más alucinantes de CSS3 ¡Flex!
Cuando digo que Flex es una de las cosas más alucinantes de Flex no lo digo por decir, como aprenderemos en la clase, la historia de Flex se remonta un par de décadas atrás, cuando no existían los teléfonos móviles (y mucho menos inteligentes) ni las tablets.
En aquella época (años 90 y algo del 2000), para crear la estructura de las páginas webs se utilizaban tablas con filas y columnas, al fin y al cabo, todas las pantallas tenían más o menos las mismas medidas, por lo que se podía controlar bastante bien.
No obstante, con la aparición de los smartphones, todas las webs hasta el momento no funcionaron ya que las pantallas de los móviles eran pequeñas, por lo que en esos años (2000) se tuvo que crear dos webs, una para móviles y otra para ordenadores.
Con el tiempo se vio que eso no podía ser y se utilizó una tecnología llamada “float” que permitía hacer las webs responsives. ¿Problema? ¡Es horrible utilizarla! ¡No estaba pensando para eso! ¡A la mínima se descuadraba todo!
Por ello, con el tiempo (no hace mucho) apareció Flex ¡La solución para desarrollar webs responsive! Es nativo y es fácil de utilizar, así que ¡Veamos la clase!
Video: https://www.youtube.com/watch?v=kxKOX3wcHok
¡Perfecto! Ahora que ya hemos visto la clase ya sabemos lo fácil que es hacer la estructura de páginas webs ¡Nos vemos en la siguiente clase!
5. Documentación de CSS
Bienvenido a esta quinta clase del curso de CSS.
Esta clase será muy especial ya que no nos centraremos tanto en el código de CSS sino que aprenderemos a solventar los problemas que nos vayan saliendo buscando información.
Video: https://www.youtube.com/watch?v=EZQCj-MiK-0