cursos.
← Programación
Ficha 005.407YouTubeGRATIS

HTML and CSS - Full Course (11.5 Hours)

por John Smilga

Enseña HTML y CSS desde cero: estructura, formularios, un proyecto web de varias páginas, selectores, herencia, colores y unidades.

Recomendado, valoración editorial 4 de 5

verificado 2026-09-08 — sigue siendo gratis en YouTube

Empezar en YouTube

Respuesta rápida

Curso gratis de Programación de nivel principiante en YouTube impartido por John Smilga (11 h 31 min). Nuestra valoración: 4/5, recomendado. Comprobamos que sigue siendo gratis el 8 de septiembre de 2026.

Veredicto
4/5 · Recomendado
Para quién
Personas sin experiencia previa que quieren aprender HTML y CSS desde cero en un único curso largo.
Nivel
Principiante
Duración
11 h 31 min · 148 capítulos
Precio
Gratis en YouTube
Autor
John Smilga
Publicado
2019
Plan sugerido
5 sem. · 4 h/sem.
Verificado
el 8 de septiembre de 2026

Nuestro veredicto

Recomendado, valoración editorial 4 de 5

Curso muy completo y bien estructurado para empezar en HTML y CSS, con proyecto práctico y una progresión clara. Es ideal para principiantes que se sientan cómodos con el inglés; algo antiguo (2019), pero los fundamentos siguen siendo útiles.

Puntos fuertes

  • Progresión clara en más de 140 lecciones con capítulos cronometrados.
  • Incluye un proyecto HTML práctico antes de pasar a CSS.
  • Explica la instalación y configuración del entorno paso a paso.

A tener en cuenta

  • Está en inglés, sin adaptación al español.
  • Publicado en 2019: conviene contrastar prácticas actuales de CSS con documentación reciente.
  • Los capítulos disponibles llegan hasta las unidades CSS; el resto de las 11,5 h no está detallado en los datos.

De qué trata

Curso de unas 11,5 horas y 148 lecciones que enseña HTML y CSS desde cero. Empieza con la instalación de Google Chrome y Visual Studio Code, y sigue con la estructura de un documento, texto, imágenes, enlaces, listas, tablas y formularios.

Después propone un proyecto HTML con varias páginas. La segunda parte presenta CSS: formas de aplicarlo, sintaxis, selectores, herencia, especificidad, colores y unidades como px, %, em y rem. Los capítulos están cronometrados, lo que facilita retomar el curso por bloques.

  • Estructura HTML, imágenes, enlaces, listas y tablas
  • Formularios con input, textarea, radio y checkbox
  • Proyecto web de varias páginas en HTML
  • Selectores, herencia y especificidad en CSS
  • Colores y unidades: rgb, hex, px, em, rem

Para quién es este curso

  • Personas sin experiencia previa que quieren aprender HTML y CSS desde cero en un único curso largo.
  • Quien prefiere seguir un proyecto guiado (una web de varias páginas) tras aprender las etiquetas básicas de HTML.
  • Autodidactas que quieren preparar el entorno (Chrome, Visual Studio Code, Live Server) desde el primer minuto.

Mejor busca otro si…

  • Quien ya domina etiquetas HTML, formularios y selectores CSS y busca contenido avanzado.
  • Quien necesite explicaciones en español: el curso está en inglés.

Antes de empezar

  • Ninguno: el curso indica que cubre ambos lenguajes desde cero.
  • Un ordenador donde instalar Google Chrome y Visual Studio Code (se explica en el curso).

Qué sabrás hacer al terminar

  • Crear y estructurar páginas HTML con encabezados, párrafos, imágenes, enlaces, listas y tablas.
  • Construir formularios con inputs, textarea, radio y checkbox.
  • Montar una web sencilla de varias páginas (inicio, about, numbers, contacto).
  • Aplicar CSS en línea, interno y externo, y usar selectores de elemento, id y clase.
  • Entender la herencia, la especificidad y las unidades y colores en CSS (px, %, em, rem, rgb, hex).

Estructura del curso

  1. 01

    Preparación del entorno y primera página

    Desde 0:00. Introducción a HTML, instalación de Chrome y Visual Studio Code, creación del proyecto, ajustes del editor, Live Server y estructura básica del documento.

  2. 02

    Texto, imágenes y enlaces

    Desde 34:50. Emmet, encabezados, párrafos, espacios en blanco, Lorem Ipsum, imágenes (rutas, atributos, recorte), comentarios, enlaces externos, internos y dentro de la página.

  3. 03

    Listas, tablas y formularios

    Desde 1:32:39. Sup, sub, strong, em, caracteres especiales, listas (ordenadas, no ordenadas, anidadas), tabla y formularios con input, submit, textarea, radio y checkbox.

  4. 04

    Herramientas y proyecto HTML

    Desde 2:09:40. Prettier, atajos de teclado y elemento head; después un proyecto con página de inicio, About, Numbers y Contact (desde 2:30:15).

  5. 05

    Introducción a CSS y formas de aplicarlo

    Desde 3:16:03. Configuración del espacio de trabajo, CSS en línea, interno y externo, y el concepto de prioridad entre reglas (Power Struggle).

  6. 06

    Sintaxis y selectores

    Desde 3:44:17. Sintaxis básica, selectores de elemento, agrupados, id y clase, div y span, herencia, última regla, especificidad y selector universal.

  7. 07

    Colores y unidades

    Desde 4:27:33. Color y background-color, nombres, rgb, rgba, hex, opciones de color en VS Code; unidades px, porcentajes, em y rem (desde 4:55:39).

Capítulos del vídeo

  1. 0:00Intro
  2. 2:47What is HTML
  3. 5:11Google Chrome and Visual Studio Code
  4. 6:02Download Google Chrome
  5. 8:11Download Visual Studio Code
  6. 13:58Create A Project
  7. 16:09First Webpage
  8. 20:35Visual Code Settings
  9. 22:48Download Live Server Extension
  10. 26:59Basic HTML Document Structure
  11. 29:05Implementing Basic Document Structure
  12. 34:50Word Wrap and Emmet
Ver los 136 restantes
  1. 40:24Heading Elements
  2. 44:33Paragraph Elements
  3. 47:50White Space Collapsing
  4. 49:22Lorem Ipsum Dummy Text
  5. 51:17Images
  6. 57:15Multiple Path Options
  7. 1:00:06External Images
  8. 1:02:43Nice Images
  9. 1:05:49Width and Height Attribute
  10. 1:08:40Crop Images
  11. 1:12:07Proper Path
  12. 1:15:37Comments And Line Breaks
  13. 1:19:47External Links
  14. 1:23:32Internal Links
  15. 1:25:53Links Within Page
  16. 1:30:10Empty Links
  17. 1:32:39Sup And Sub Elements
  18. 1:34:39Strong And Em Elements
  19. 1:37:02Special Characters In Html
  20. 1:38:58Unordered Lists
  21. 1:41:25Ordered Lists
  22. 1:42:18Nested Lists
  23. 1:43:57Table Element
  24. 1:46:10Forms - Input And Submit Elements
  25. 1:58:12Forms - Textarea - Radio - Checkbox
  26. 2:09:40Prettier And Code Formatter
  27. 2:14:56Keyboard Shortcuts
  28. 2:26:06External Resources - Head Element
  29. 2:30:15Html Project Intro
  30. 2:32:16Project Setup
  31. 2:35:17Download Images
  32. 2:39:02Logo, Heading, Navigation
  33. 2:42:51Home Page Completed
  34. 2:54:30About Page
  35. 2:58:09Numbers Page
  36. 3:04:14Contact Page
  37. 3:09:11Resource Files
  38. 3:09:42Text Editor Setup
  39. 3:16:03Css Intro
  40. 3:17:35Workspace Setup
  41. 3:20:22Inline Css
  42. 3:23:40Course Resources
  43. 3:25:01Internal Css
  44. 3:28:00External Css
  45. 3:39:40Power Struggle
  46. 3:44:17Basic Css Syntax
  47. 3:52:27Element Selectors
  48. 3:55:15Grouping Selectors
  49. 3:57:27Id Selectors
  50. 4:02:09Class Selectors
  51. 4:06:17Id And Class Selector Summary
  52. 4:08:30Div And Span Elements
  53. 4:16:44CSS Inheritance
  54. 4:20:08More Info On Inheritance
  55. 4:22:30Last Rule, Specificity, Universal Selector
  56. 4:27:33Colors Intro
  57. 4:28:13Color And Background-Color Properties
  58. 4:32:33Color Names
  59. 4:33:30Rgb
  60. 4:37:46Rgba
  61. 4:44:33Hex
  62. 4:50:58Vs-Code Color Options
  63. 4:52:57External Resources
  64. 4:55:39Units Intro
  65. 4:56:18Pixels, Font-Size, Width, Height
  66. 5:02:13Percent Values
  67. 5:05:44Em Values
  68. 5:11:42Rem Values
  69. 5:14:41VH And VW
  70. 5:19:14Default Browser Syles
  71. 5:29:07Calc Function
  72. 5:33:38Typography Intro
  73. 5:34:07Font-Family
  74. 5:36:47Font-Stack Generic Fonts
  75. 5:39:23Google Fonts
  76. 5:46:00Font-Weight Font-Style
  77. 5:53:30Text-Align And Text-Indent
  78. 5:56:52More Text Properties
  79. 6:04:31Box-Model Intro
  80. 6:04:53Padding
  81. 6:13:28Margin
  82. 6:19:01Border
  83. 6:23:57Border-Radius, Negative Margin
  84. 6:27:24Outline Property
  85. 6:34:58Display Property Intro
  86. 6:35:19Display Property
  87. 6:43:26Basic Horizontal Centering
  88. 6:48:11Mobile Navbar Example
  89. 6:58:29Box-Sizing Border-Box
  90. 7:06:46Display Inline-Block
  91. 7:09:29Display:none, Opacity, Visibility
  92. 7:16:20Background-Image Intro
  93. 7:16:43Background Images Setup
  94. 7:19:43Background-Image-Property
  95. 7:27:45Background-Repeat
  96. 7:34:07Background-Size
  97. 7:36:58Background-Position
  98. 7:41:18Background-Attachment
  99. 7:47:04Linear-Gradients
  100. 7:56:49Background Image Shortcuts Combined
  101. 8:06:56Linear-Gradient Colorzilla
  102. 8:11:08Float Position Intro
  103. 8:11:47Float Property
  104. 8:19:18Float Property Column Layout Example
  105. 8:25:59Position Static
  106. 8:30:44Position Relative
  107. 8:33:18Position Absolute
  108. 8:38:42Position Fixed
  109. 8:42:30Media Quries
  110. 8:57:07Z-Index
  111. 9:06:04::Before And ::After Pseudo Elements
  112. 9:27:14Css Selectors Intro
  113. 9:28:26Basic Selectors
  114. 9:31:07Descendant Child Selectors
  115. 9:35:50First Line And First Letter
  116. 9:36:56:Hover Pseudo-Class Selector
  117. 9:40:03Link Pseudo-Class Selectors
  118. 9:44:36Root Preudo-Class Selectors
  119. 9:51:01Transform,Transition,And Animations
  120. 9:52:17Transform:transition()
  121. 9:58:52Transform:scale()
  122. 10:01:20Transform:rotate()
  123. 10:04:47Transform:skew()
  124. 10:06:31Transition Property
  125. 10:09:13Multiple Transition
  126. 10:11:11Transition Delay
  127. 10:16:36Transition-Timing Function
  128. 10:25:51Animation
  129. 10:35:51Animation-Fill-Mode
  130. 10:40:53Last Module Intro
  131. 10:41:32Css Variables
  132. 10:56:19Font-Awesome Icons
  133. 11:07:55Text-Shadow Box-Shadow
  134. 11:14:44Browser Prefixes
  135. 11:19:23Semantic Tags
  136. 11:24:11Emmet Workflow

Plan de estudio sugerido

5 semanas · unas 4 h por semana

  1. 1.Semana 1: entorno y HTML básico (0:00–1:32:39); crea tu primera página con imágenes y enlaces.
  2. 2.Semana 2: listas, tablas y formularios (1:32:39–2:30:15); haz un formulario propio.
  3. 3.Semana 3: proyecto HTML (2:30:15–3:16:03) y arranque de CSS (3:16:03–3:44:17); reconstruye el proyecto sin mirar.
  4. 4.Semana 4: sintaxis, selectores y herencia (3:44:17–4:27:33); practica id, clase y especificidad.
  5. 5.Semana 5: colores y unidades (4:27:33 en adelante) y el resto del curso; aplica estilos a tu proyecto.

El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.

Consejos para seguirlo

  • Escribe el código a la vez que el vídeo y pausa en cada capítulo de formularios (1:46:10 y 1:58:12) para crear tus propios campos.
  • Rehaz el proyecto HTML (2:30:15) por tu cuenta antes de empezar con CSS y luego estilízalo con lo aprendido.
  • Repasa el capítulo «Power Struggle» (3:39:40) y el de especificidad (4:22:30) tras practicar con selectores: son fáciles de confundir.
  • Prueba el mismo texto con px, %, em y rem (desde 4:55:39) para ver las diferencias en el navegador.

Antes y después de este curso

Cómo lo presenta John Smilga

HTML and CSS are essential skills to have for a career in web development.

In this course we will cover both languages from the scratch.

❤️ Try interactive in your browser: (Made possible by a grant from our friends at Scrimba)

Extracto de la descripción original en YouTube.

Preguntas frecuentes

+¿Necesito saber programar antes?

No. La descripción indica que cubre HTML y CSS desde cero, y empieza instalando Chrome y Visual Studio Code.

+¿Cuánto tiempo lleva completarlo?

El vídeo dura unas 11,5 horas. Con pausas y práctica, calcula entre 17 y 23 horas, por ejemplo unas 4 horas a la semana durante 5 semanas.

+¿Qué se construye durante el curso?

Tras la parte de HTML hay un proyecto con página de inicio, About, Numbers y Contact (desde 2:30:15).

+¿Está en español?

No, está en inglés. Los capítulos son claros y con nombres descriptivos, lo que ayuda a seguirlo.

+¿Está actualizado?

Se publicó en 2019. Los fundamentos de HTML y CSS cambian poco, pero conviene consultar documentación actual para novedades.

Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en YouTube, y revisado según nuestro método. El contenido del curso es obra de John Smilga; si ves algún error, avísanos.

Guías para sacarle partido

Más cursos de Programación

Ficha 005.006YouTubeGRATIS

Agentic AI – Complete Course for Beginners

Curso de unas 24 horas para construir sistemas de agentes de IA con LangChain y LangGraph: Pydantic, flujos de trabajo, memoria, RAG y despliegue en AWS y Render.

Muy recomendado, valoración editorial 5 de 5verificado 2026-10-05
Ficha 005.036UdemyGRATIS

Aprende Accesibilidad Web paso a paso

Introducción práctica a la accesibilidad web: pautas y leyes, contenido, navegación, diseño e interacción accesibles, relación con el SEO y evaluación de sitios.

Muy recomendado, valoración editorial 5 de 5Sergio Luján Mora, Ester Serna Berná, Olga Carreras, Armando Suárez Cueto, Antonio Ferrández Rodríguez, Cátedra Telefónica Universidad de Alicanteverificado 2026-10-01
Ficha 005.043YouTubeGRATIS

Aprende Godot - Curso completo desde cero

Crea tu primer videojuego 3D en Godot 4 desde cero: escenas, nodos, GDScript, físicas, animaciones, sonido y exportación a .exe.

Muy recomendado, valoración editorial 5 de 5verificado 2026-10-05
Ficha 005.050YouTubeGRATIS

Aprende JavaScript Ahora! curso completo desde cero para principiantes

Curso de JavaScript desde cero: entorno, variables, tipos, operadores, control de flujo, diez ejercicios y objetos con funciones constructoras.

Muy recomendado, valoración editorial 5 de 5HolaMundoverificado 2026-09-09