The HTML & CSS Bootcamp 2026 Edition
Brand New Course! Covers Flexbox, CSS Grid, Animations, Responsive Design and More! Tons of Exercises & Projects.
Lo que serás capaz de hacer
**Modern in-depth HTML & CSS course!** ** Check out the promo video to see the beautiful, responsive projects we build in this course! ** This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll learn how to structure and build any website you can think of . My background is in teaching in-person bootcamp programs around the world, where I work directly with students to help them learn web development and change careers. This course is based on all my experience in the classroom. Unlike most Udemy courses, this course includes dozens of exercises and challenges which ask you to recreate components, build layouts, and practice HTML and CSS. Practice is the most important tool I have to help you learn, and this course includes lots of it! This course covers a huge amount of information, but it’s designed to be approachable for complete beginners and intermediate developers alike. We start with the basics of HTML : structuring documents, creating text elements, tables, and forms. Then we learn about semantic markup and creating accessible webpages Next, we cover the basics of CSS : working with selectors, color systems, and styling text elements. From there, we cover critical CSS concepts including the box model, specificity, the cascade, and CSS units. Next you’ll learn all about backgrounds, gradients, filters, positioning elements , working with transitions and transformations, and many other more intermediate CSS properties. We then spend nearly 10 hours learning how to create complex CSS layouts using Flexbox and CSS Grid . We then build multiple projects with complicated layouts. You’ll learn how to build responsive layouts that look good on all screen sizes, from large desktops to tablets and mobile devices. Finally, we wrap up the course with our massive final project that we build together from scratch. This project combines everything we’ve learned in the course into one huge website built with thousands of lines of HTML & CSS. Check out the promo video to learn more about the final project. This course includes: Over 37 hours of high quality videos Downloadable assets, starter coder, and solutions for all sections Dozens of exercises, challenges, and quizzes Downloadable slides and cheatsheets, including beautiful diagrams and syntax references Included support in the course Q&A forums Access to our exclusive discord community with thousands of students About me (your instructor) I’m a teacher with extensive real-world teaching experience. I’ve taught thousands of students how to code at my in-person coding bootcamps around the globe. My graduates work at companies including Google, Tesla, Apple, Airbnb , and pretty much any big company you can name. My in-person teaching background informs the online experiences I create for students. Unlike most Udemy instructors, I’ve actually taught this material in a classroom full of students for nearly a decade. I know what works and what doesn’t work!
- Master HTML & CSS and build massive real-world projects, with no prior knowledge needed!
- How to write well-structured and semantic HTML documents
- Master tricky CSS concepts including the cascade, inheritance, and specificity
- Work with CSS animations, transitions, pseudo-elements, gradients, and more
- Get practice with dozens of exercises, quizzes, and challenges
- Design beautiful websites from the ground up that look good on all screen sizes
Temario
UNIDAD 1 - Introduction · 11 leccionesUNIDAD 1 - Introduction
UNIDAD 1 - Introduction
- Welcome & Curriculum Overview
- Join Our Chat Community
- Important Note On Leaving Feedback!
- A First Taste of HTML & CSS
- How The Web Works
- The Roles of HTML, CSS, and JS
- Quick Quiz On The Roles of HTML & CSS
- Installing The Tools We Need
- IMPORTANT: About The Visual Studio Code Color Theme
- Configuring VSCode
- Important Note On The Course Exercises
UNIDAD 2 - HTML Basics · 9 leccionesUNIDAD 2 - HTML Basics
UNIDAD 2 - HTML Basics
- Introducing HTML
- The Basic HTML Workflow
- The Paragraph Element
- Mozilla Developer Network
- Chrome Developer Tools
- Document Structure
- Creating HTML Comments
- Creating Headings
- HTML Basics Exercise
UNIDAD 3 - More HTML · 9 leccionesUNIDAD 3 - More HTML
UNIDAD 3 - More HTML
- Working With HTML Lists
- The Em, Strong, B, and I Elements
- Nesting Elements
- Superscript and Subscript
- Inline Vs. Block Elements
- Creating Links
- Other Types of Links
- Creating Images
- Pasta Recipe Exercise
UNIDAD 4 - Working With Forms · 8 leccionesUNIDAD 4 - Working With Forms
UNIDAD 4 - Working With Forms
- Creating Text Inputs and Buttons
- The Form Element
- Name and Placeholder Attributes
- Properly Labelling Form Controls
- Other Types of Inputs
- Checkboxes, Textareas, and Range Inputs
- Selects and Radio Button Groupings
- Course Landing Page Form Exercise
UNIDAD 5 - Other Elements · 5 leccionesUNIDAD 5 - Other Elements
UNIDAD 5 - Other Elements
- Spans
- Divs
- Tables
- Semantic Markup
- Semantic Elements
UNIDAD 6 - CSS Basics · 8 leccionesUNIDAD 6 - CSS Basics
UNIDAD 6 - CSS Basics
- Getting Our Starter Code
- Working Within Inline Styles
- Writing Internal Styles
- External Styles: The Best Way To Write Styles
- Quick Note on Codepen
- Anatomy of CSS
- The Element Selector
- CSS Basics Exercise
UNIDAD 7 - The World of CSS Colors · 9 leccionesUNIDAD 7 - The World of CSS Colors
UNIDAD 7 - The World of CSS Colors
- Working with background-color
- Quick Tip: MDN & Comments
- Named Colors
- Understanding RGB Colors
- Hexadecimal Colors
- RGBA Colors and Opacity
- Colors Quiz
- CSS Inheritance
- CSS Colors Exercise
UNIDAD 8 - Styling Text · 8 leccionesUNIDAD 8 - Styling Text
UNIDAD 8 - Styling Text
- Changing Fonts with Font-Family
- Font-size, font-weight, and font-style
- Changing Text Alignment
- Line-height, letter-spacing, and word-spacing
- Adding Custom Fonts With Google Fonts
- Styling Text Exercise
- Creating Text Shadows
- Our First Mini Project: Cantilever
UNIDAD 9 - More Text Styling · 7 leccionesUNIDAD 9 - More Text Styling
UNIDAD 9 - More Text Styling
- Text-transform & text-decoration
- The ID Selector
- The Class Selector
- Styling Lists
- Styling Links and :hover Pseudo-Class
- The Font Shorthand Property
- Leafy Seadragon Exercise
UNIDAD 10 - Selectors Pt. 1 · 6 leccionesUNIDAD 10 - Selectors Pt. 1
UNIDAD 10 - Selectors Pt. 1
- The Universal Selector
- The Attribute Selector
- Grouping Selectors
- Descendant & Child Combinators
- Compound Selectors
- CSS Selectors Exercise
UNIDAD 11 - The Box Model · 16 leccionesUNIDAD 11 - The Box Model
UNIDAD 11 - The Box Model
- Introducing The Box Model
- Working With Borders
- Width, Height, and Percentages
- Adding Padding to Elements
- Working With Margins
- The Alternate Box Model
- The Display Property
- Display: None
- Negative Margin & Margin Auto
- Margin Collapsing: WTF?
- A Common Layout Pattern
- Min and Max Width
- Rounding Elements With Border Radius
- Box Shadows
- Working With Overflow
- Ski Resort Exercise
UNIDAD 12 - Artist Portfolio Project · 9 leccionesUNIDAD 12 - Artist Portfolio Project
UNIDAD 12 - Artist Portfolio Project
- Introducing Our Project
- Basic Project Setup
- Writing The Navbar Markup
- Styling The Navbar
- Finishing Up The Navbar
- Creating The Photo Grid
- Continuing The Photo Grid
- Finishing The Photo Grid
- Adding The Footer Content
UNIDAD 13 - Specificity and The Cascade · 11 leccionesUNIDAD 13 - Specificity and The Cascade
UNIDAD 13 - Specificity and The Cascade
- Section Introduction
- The Sibling Combinator
- Working With Pseudo-Classes
- Styling Pseudo-Elements
- CSS Selectors Pt. 2 Exercise
- The Basics of Specificity
- Inline Styles and Specificity
- Calculating Specificity Values
- !important and The Cascade
- Wrapping Up The Cascade
- Cascade & Specificity Quiz
UNIDAD 14 - Blog Post Project · 8 leccionesUNIDAD 14 - Blog Post Project
UNIDAD 14 - Blog Post Project
- Introducing Our Blog Post Project
- Centering The Main Content
- Working on Typography
- Creating the Headline Section
- Implementing Our Headings
- Adding In Code Styles
- Creating the Footer
- Writing The Full Size Hero
UNIDAD 15 - CSS Units · 8 leccionesUNIDAD 15 - CSS Units
UNIDAD 15 - CSS Units
- Absolute Units: Pixels, Centimeters, and More!
- Working With Percentages
- The Joy of Rem Units
- Understanding The Em Unit
- Vw and Vh Units
- CSS Units Quiz
- Which Units Should You Use?
- Working With Floats
UNIDAD 16 - Hazel CV Project · 8 leccionesUNIDAD 16 - Hazel CV Project
UNIDAD 16 - Hazel CV Project
- Introducing The Project
- Setting Up The Navbar
- Finishing The Navbar
- Starting The Hero Content
- Making The Skills Section
- Creating The Blog Section
- Adding The Events Section
- Making A Simple Footer
UNIDAD 17 - Backgrounds, Gradients, & Filters · 11 leccionesUNIDAD 17 - Backgrounds, Gradients, & Filters
UNIDAD 17 - Backgrounds, Gradients, & Filters
- Working With Background Images
- Controlling Background-Repeat
- Sizing Our Background
- Positioning Background
- Working With Background-Clip
- Background Exercise
- An Important Note About Gradients!
- Creating Linear Gradients
- Radial, Conic, and Repeating Gradients
- The Background Shorthand Property
- Fancy CSS Filters
UNIDAD 18 - Positioning · 10 leccionesUNIDAD 18 - Positioning
UNIDAD 18 - Positioning
- Introducing Positioning
- Relative Positioning
- Controlling Layers With Z-Index
- Absolute Positioning Pt 1
- Absolute Positioning Pt 2
- Creating A Button Badge
- Fixed Positioning
- Positioning Exercise #1
- Positioning Exercise #2
- Positioning Exercise #3
UNIDAD 19 - Transitions and Transforms · 10 leccionesUNIDAD 19 - Transitions and Transforms
UNIDAD 19 - Transitions and Transforms
- Introducing Transitions
- The Basic Transition Syntax
- Working With Multiple Transitions
- Transition Timing Functions
- Transition Delays
- Understanding Animation Performance
- Introducing Transforms
- Other Types of Transformations
- Transform Origin
- Building Fancy Button Hover Effects
UNIDAD 20 - Flexbox: Part 1 · 13 leccionesUNIDAD 20 - Flexbox: Part 1
UNIDAD 20 - Flexbox: Part 1
- Introducing Flexbox
- Display: Flex and Flex Axis
- Working With Flex-Direction
- Flexbox Exercise 1
- Flex-Wrap
- Justify-Content
- Flexbox Exercise 2
- Align-Items
- Flexbox Exercise 3
- Align-Content
- Flexbox Exercise 4
- Align-Self
- Flexbox Exercise 5
UNIDAD 21 - Flexbox Pt 2: Flex Items & Patterns! · 9 leccionesUNIDAD 21 - Flexbox Pt 2: Flex Items & Patterns!
UNIDAD 21 - Flexbox Pt 2: Flex Items & Patterns!
- The Flex-Grow Property
- Controlling Shrinkage With Flex-Shrink
- Flex-Basis: Important & Confusing
- The Flex Shorthand Property
- The Order Flex-Item Property
- Flexbox Patterns: Building A Simple Navbar
- Flexbox Patterns: Nested Flex Containers
- Flexbox Patterns: Centering Content
- Flexbox Patterns: Building A Card Layout
UNIDAD 22 - Cost Estimator Project · 10 leccionesUNIDAD 22 - Cost Estimator Project
UNIDAD 22 - Cost Estimator Project
- Introducing The Cost Estimator Project
- Building Our Container
- Creating The Top Tabs
- Positioning The Tabs Underline
- Creating The Active Tab Styles
- Adding The Toggle Section
- Building The Sessions Card
- Creating The Slider
- Creating The Two Price Cards
- Finishing Up The Price Cards
UNIDAD 23 - Making Responsive Websites With Media Queries · 12 leccionesUNIDAD 23 - Making Responsive Websites With Media Queries
UNIDAD 23 - Making Responsive Websites With Media Queries
- Introducing Responsive Design
- Our First Media Query
- More On Media Queries
- Working With Media Features
- Media Query Logical Operators
- Media Queries Exercise
- Media Queries Level 4 & 5
- Common Responsive Breakpoints
- Creating a Simple Responsive Navbar
- Responsive Flexbox Grid Demo
- Mobile First vs. Desktop First Design
- Building a Simple Mobile-First Layout
UNIDAD 24 - Making Our Projects Responsive · 4 leccionesUNIDAD 24 - Making Our Projects Responsive
UNIDAD 24 - Making Our Projects Responsive
- Making Cantilever Responsive
- Making Potter Portfolio Responsive
- Making Hazel CV Project Responsive
- Making Cost Estimator Responsive
UNIDAD 25 - CSS Grid Part 1 · 11 leccionesUNIDAD 25 - CSS Grid Part 1
UNIDAD 25 - CSS Grid Part 1
- Introducing CSS Grid
- Enabling CSS Grid
- Grid-Template-Columns
- Grid-Template-Rows
- Grid Exercise 1
- Grid-Template Shorthand Property
- The Minmax() Function
- Working With Repeat()
- Fit-Content
- Controlling Grid Gaps
- Grid Exercise 2
UNIDAD 26 - CSS Grid Part 2 · 10 leccionesUNIDAD 26 - CSS Grid Part 2
UNIDAD 26 - CSS Grid Part 2
- Working with Grid Lines
- Positioning Grid Items
- The Span Keyword
- The Grid-Area Shorthand Property
- Naming Our Grid Lines
- Grid-Template-Areas
- Using Grid-Template-Areas With Rows & Cols
- Grid-Auto-Flow
- Grid Auto Columns & Rows
- Autofit and Autofill
UNIDAD 27 - Grid Project · 10 leccionesUNIDAD 27 - Grid Project
UNIDAD 27 - Grid Project
- Introducing Our Grid Project
- Creating Image Overlay Pt 1
- Creating Image Overlay Pt 2
- Adding In Our Images
- Positioning Our Images On The Grid
- Making Our Grid Layout Responsive
- Fixing Our Image Overlays
- Building The Navbar
- Finalizing The Navbar and Footer
- Creating The Hamburger Button
UNIDAD 28 - Building Animations · 9 leccionesUNIDAD 28 - Building Animations
UNIDAD 28 - Building Animations
- Introducing Keyframes Animations
- Defining @keyframes
- More Practice With @Keyframes
- Animation Delay, Repeat, and More!
- Reusing Animations
- Animation Shorthand Property
- Building A Simple Spinner Animation
- Creating a More Complex Loader
- The Animation Fill Mode Property
UNIDAD 29 - Building A Mobile Drawer Navbar · 6 leccionesUNIDAD 29 - Building A Mobile Drawer Navbar
UNIDAD 29 - Building A Mobile Drawer Navbar
- Introducing Our Animated Drawer
- Writing The Individual Bar Animations
- A Lightspeed Crash Course In JavaScript
- Making Our Hamburger Button Work
- Creating The Mobile Drawer Menu
- Animating The Drawer Slide-Out
UNIDAD 30 - ::before and ::after Pseudo-Elements · 6 leccionesUNIDAD 30 - ::before and ::after Pseudo-Elements
UNIDAD 30 - ::before and ::after Pseudo-Elements
- Introducing Before and After
- Creating Decorative Quotes With Pseudo-Elements
- Gradient Borders With Pseudo-Elements
- Fancy Animated Buttons With Pseudo-Elements
- Super Fancy Animated Spinner With Pseudo-Elements
- Custom Form Controls With Pseudo-Elements
UNIDAD 31 - Modern CSS · 8 leccionesUNIDAD 31 - Modern CSS
UNIDAD 31 - Modern CSS
- Introducing CSS Variables
- Writing CSS Variables
- The :root pseudo-class
- Variables and Media Queries
- Using Variables For Sizes
- Introducing Calc()
- The Rules of Calc()
- Another Example of Using Calc()
UNIDAD 32 - Swipe Mega Project · 8 leccionesUNIDAD 32 - Swipe Mega Project
UNIDAD 32 - Swipe Mega Project
- Introducing Swipe
- Setting Up Our Font Variables
- Defining Basic Heading Styles
- Writing General Link Styles
- Defining Body Styles
- Creating our Text Classes - Subtitle, Secondary Text
- Defining Our Button Styles - Primary & Secondary Buttons
- Creating Our Buttons With Animated Icons
UNIDAD 33 - Swipe Project Pt 2 · 10 leccionesUNIDAD 33 - Swipe Project Pt 2
UNIDAD 33 - Swipe Project Pt 2
- Building The Navbar
- Defining Our Two-Column Layout Classes
- Writing The Hero Markup
- Styling The Page Hero
- Building The Partners Grid Section
- Adding The Unified Platform Section
- Creating Our Graphic Photos Grid
- Writing Our Reusable Card Class
- Adding The Integrations Section
- Defining The Why Swipe Section
UNIDAD 34 - Swipe Pt 3 · 11 leccionesUNIDAD 34 - Swipe Pt 3
UNIDAD 34 - Swipe Pt 3
- Creating The Global Section
- Positioning The Globe Image
- Adding The Virtual Events Section Markup
- Styling The Virtual Events Section
- Building The Getting Started Section
- Writing The Page Footer Markup
- Styling The Page Footer
- Adding The First Angled Stripe
- Finishing The Angled Stripes
- Creating The Animated Gradient Hero Background
- Fixing An Issue With Our Angled Stripes
UNIDAD 35 - Swipe Pt 4: Making It Responsive · 14 leccionesUNIDAD 35 - Swipe Pt 4: Making It Responsive
UNIDAD 35 - Swipe Pt 4: Making It Responsive
- Starting To Make Swipe Responsive
- Making The Partners Grid Responsive
- Making The Unified Platform Section Responsive
- Making The Integrations Section Responsive
- Making The Why Swipe Section Responsive
- Making The Global Section Responsive
- Making The Virtual Events Section Responsive
- Making The Bottom of The Page Responsive
- Making The Page Hero Responsive
- Adding Our Responsive Navbar
- Responsive Tweaks To Background Stripes
- Cleaning Up Our CSS
- Fixing A Minor Issue With Border Radius
- Fixing Another Minor Issue With Partners Grid
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
35 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
3 cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Colt Steele.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 35 unidades · 322 lecciones · 60 h
- 12 meses de acceso
- 3 cuestionarios de evaluación
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Colt Steele; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.


