CSS Desde Cero (2018)

Curso: CSS Desde Cero (2018)

Crea tus propios diseños y plantillas web con CSS, el lenguaje que convierte la web en arte.

CSS es el lenguaje que hace a la web hermosa. Sin CSS los sitios web y aplicaciones móviles se verían feos y aburridos. Con este curso aprenderás a diseñar para la web usando código CSS, entenderás como funciona el responsive web design y serás capaz de crear tus propios templates y dejar de descargarlos de internet. Además hemos actualizado el curso para incluir módulos nuevos de CSS (como variables, grid, etc).

Este curso forma parte de:

Introducción al Desarrollo Web Frontend Desde Cero
CSSFrontendDiseño web
402
Poster del curso
Avatar

Alvaro Felipe

Curso: CSS Desde Cero (2018)

Accede a todos los cursos, talleres y especialidades de EDteam

¿Qué aprenderás?

  • Comprender cómo funciona CSS.
  • Comprender el posicionamiento y modelo de caja.
  • Manejar el color, los fondos y textos
  • Utilizar buenas prácticas y variables CSS

¿Qué conocimientos necesitas?

Nivel

intermedio

+12 horas

Temario del curso

Inicia sesión o regístrate para ver completo este curso gratuito.

Introducción

  • 1.1. Introducción07:25
  • 1.2 - Historia11:20
  • 1.3 - Modulos CSS04:06
  • 1.4 - Conectar HTML y CSS11:07
  • 1.5 - Sintaxis de CSS08:52
  • 1.6 - Variables CSS05:16

Selectores

  • 2.1 Selectores level 1,2,3,402:58
  • 2.2 - Selectores de Etiqueta02:36
  • 2.3 - Estilos del navegador08:57
  • 2.4 - Selectores de clases08:57
  • 2.5 - Selectores de ID02:09
  • 2.6 - Selector universal05:23
  • 2.7 - Selectores case sensitive y case insensitive02:12
  • 2.8 - Selectores agrupados03:01
  • 2.9 - Selectores descendientes05:06
  • 2.10 - Selector hijo directo02:56
  • 2.11 - Selector hermano siguiente05:20
  • 2.12 - Selector hermanos siguientes05:38
  • 2.13 - Selector de atributo04:45
  • 2.14 - Selector de atributo comienza con06:05
  • 2.15 - Selector de atributo termina con03:26
  • 2.16 - Selector de atributo que contiene07:16

Especificidad, herencia y cascada

  • 3.1 - Introducción y arquitectura05:52
  • 3.2 - Especificidad14:32
  • 3.3 - Cascada08:18
  • 3.4 - Estilos computados por el navegador05:14
  • 3.5 - Herencia03:46
  • 3.6 - Initial inherit06:45

Box Model

  • 4.1 - Layout03:05
  • 4.2 - Elementos inline y de bloque10:54
  • 4.3 - Box model10:26
  • 4.4 - Margin15:57
  • 4.5 - Colapsado de margenes verticales05:34
  • 4.6 - Padding05:37
  • 4.7 - Dimensiones07:52

Bordes y sombras

  • 5.1 - Bordes05:51
  • 5.2 - Propiedades de border06:35
  • 5.3 - Shorthand de border07:14
  • 5.4 - Border radius05:15
  • 5.5 - Practica con border radius09:40
  • 5.6 - Outline02:37
  • 5.7 - Box shadow12:38

Fondos

  • 6.1 - Background color03:33
  • 6.2 - Background image y background repeat03:32
  • 6.3 - Background clip y background origin05:20
  • 6.4 - Background size05:01
  • 6.5 - Background position06:09
  • 6.6 - Background attachment05:17
  • 6.7 - Background multiples04:10
  • 6.8 - Shorthand background03:04

Texto I

  • 7.1 - Unidades em y rem06:53
  • 7.2 - Direction y text indent02:59
  • 7.3 - Text align03:47
  • 7.4 - Line height03:46
  • 7.5 - Vertical align03:00
  • 7.6 - Letter spacing y word spacing02:06
  • 7.7 - Text decoration03:32
  • 7.8 - Text shadow04:50
  • 7.9 - White space y desbordamiento06:30
  • 7.10 - Texto vertical y text rendering02:04
  • 7.11 - Text transform02:23

Textos II

  • 8.1 - Font family11:55
  • 8.2 - Font size04:10
  • 8.3 - Font weight y font style07:18
  • 8.4 - Tip: combinación de fuentes tipográficas02:21
  • 8.5 - Shorthand font y proveedores de fuentes17:28

Pseudoclases

  • 9. Pseudoclases01:23:05

Pseudoelementos

  • 10.1 - Introducción a pseudoelementos03:49
  • 10.2 - First line05:20
  • 10.3 - First letter03:52
  • 10.4 - Before y after03:36
  • 10.5 - Before y after e imprimir atributos04:07
  • 10.6 - Before y after e imprimir imagenes04:09
  • 10.7 - Quotes02:53
  • 10.8 -Ejercicio: formatear moneda02:52
  • 10.9 -Ejercicio: subrayado animado03:52
  • 10.10 - Ejercicio: aspect radio03:58
  • 10.11 - Ejercicio: dibujar corazón06:43

Listas y contadores

  • 11.1 - Estructura de las listas04:48
  • 11.2 - list-style-type03:53
  • 11.3 - list-style-image03:36
  • 11.4 - list-style-position06:59
  • 11.5 - Contador08:18
  • 11.6 - Contador en listas anidadas03:12
  • 11.7 - Ejemplo de contadores07:03

Color

  • 12.1 - Conceptos base de color05:57
  • 12.2 - Color keywords05:02
  • 12.3 - Modo de color RGB09:52
  • 12.4 - Modo de color HSL09:42
  • 12.5 - Degradados lineales06:44
  • 12.6 - Stops02:29
  • 12.7 - Ángulos y degradados lineales repetitivos04:06
  • 12.8 - Degradado radial05:50
  • 12.9 - Keywords y degradado radial repetitivo05:41
  • 12.10 - Ejercicio con degradados06:41

Position 1

  • 13.1 - Espacio reservado y flujo07:27
  • 13.2 - Propiedad offset07:19
  • 13.3 - Position relative04:12
  • 13.4 - Position absolute07:38
  • 13.5 - Ejercicio menú desplegable13:49
  • 13.6 - Ejercicio cart05:14

Clase final

  • 14.1 - Temas básicos de position04:51
  • 14.2 - Position fixed16:18
  • 14.3 - Position sticky05:50
  • 14.4 - Z index16:07
  • 14.5 - Z index II05:27

¿Por qué elegir EDteam?

Profesores reales

Profesores reales

Todos nuestros profesores tienen experiencia real en aulas.Porque no basta saber un tema, sino saber enseñarlo.

Especialidades

Especialidades

Las especialidades son rutas de aprendizaje detalladas que te llevan a traves de cursos cortos a tu objetivo.

Aprende con proyectos

Aprende con proyectos

Somos la primera plataforma en incluir un proyecto del mundo real (no un examen) para completar los cursos.

Comunidad

Comunidad

No te quedes con dudas, busca apoyo en la comunidad, ayuda a tus compañeros y gana reputación.

Seguimiento de aprendizaje

Seguimiento de aprendizaje

Lleva seguimiento de tus avances, tomar notas y obtén un certificado de culminación desde nuestra plataforma.

Clases en vivo

Clases en vivo

Toda la semana tenemos clases en vivo en las que nuestros estudiantes interactuan con los profesores y sus compañeros.