Outlecture
Home
About
Technology
Design
Video
Contact
Official
日本語
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Technology

Top 9 Recommended HTML CSS Self-Study Materials! [September 2023]

Last updated: Sep 8th, 2023

This page introduces the best in educational materials for beginners who are trying to learn HTML CSS on their own.

Table of Contents:

1. Description of this page

1. Description of this page

We introduce 9 recommended video courses on various platforms for those who want to learn HTML CSS on their own.

What is HTML CSS?

HTML is a language used for marking up content on the web, allowing computers to understand and display it correctly. CSS, on the other hand, is used to add styling and visual design to web pages created using HTML and other web technologies. Together, HTML and CSS are essential for creating visually appealing and functional web pages.

Our site, "Outlecture," evaluates courses using our proprietary algorithm that balances course rating, freshness of information, number of purchasers and viewers, and recent rate of increase, in order to extract only the most suitable courses for users.

In addition, we will explain the features of each video platform and provide use cases such as "this is better for people in this situation."

We hope this will be a reference for everyone who is going to learn HTML CSS.

2. Top 5 Recommended Udemy Courses

Here are Outlecture's top 5 recommended Udemy courses, carefully selected for you.

Title Ratings Subscribers Subscribers last month
(August 2023)
Level Video Duration Created Last updated Price

Build Responsive Real-World Websites with HTML and CSS

thumbnail
4.71 391,551 4,345 all 37 hours 26 minutes Mar 3rd, 2015 Jun 5th, 2023 $139.99

Complete JAVASCRIPT with HTML5,CSS3 from zero to Expert-2023

thumbnail
4.21 323,615 3,018 beginner 16 hours 50 minutes Dec 25th, 2020 Aug 2nd, 2023 $59.99

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

thumbnail
4.76 198,170 1,974 intermediate 28 hours 8 minutes Nov 29th, 2016 Jun 5th, 2023 $129.99

The HTML & CSS Bootcamp 2023 Edition

thumbnail
4.8 9,573 882 beginner 37 hours 12 minutes Jan 16th, 2023 Apr 17th, 2023 $84.99

50 Projects In 50 Days - HTML, CSS & JavaScript

thumbnail
4.61 71,564 1,778 beginner 18 hours 29 minutes Nov 30th, 2020 Dec 8th, 2020 $89.99

Udemy, Inc. is an education technology company that provides the world's largest online learning and teaching platform.

The features of Udemy include:

  • Over 155,000 course
  • Instructors who are leading experts in their fields
  • Affordable prices range from tens to hundreds of dollars per course, with discounts of up to 70-90% during campaigns
  • Courses can be viewed without expiration after purchase, and come with a 30-day money-back guarantee
  • Courses can be taken at the student's own pace, with playback speeds of 0.5 to 2 times normal speed, and can be viewed offline on a smartphone with a dedicated app
  • Students can ask questions directly to the instructor on the course discussion board, allowing them to resolve any doubts and receive support for self-study

These are some of the benefits of using Udemy.

The management team at Outlecture consists of active software engineers, creators, and web designers. We often catch up on learning new programming languages and products by taking courses on Udemy.
As for our experience, we find that Udemy offers courses of very high quality. The instructors are all leading figures in their fields, and they teach cutting-edge knowledge and practical know-how in a clear and detailed manner. You can acquire the knowledge and skills that are actually used in the field and in practical projects, rather than just knowledge for exams.

We highly recommend Udemy courses, especially for those who want to apply what they learn in practical situations or for those who want to start self-studying. Once you purchase a course, you can take it without a time limit, and there is a 30-day money-back guarantee, so you can start learning with peace of mind.

Recommended for

  • Planning to use HTML CSS in actual projects
  • Wanting to learn the know-how of professionals who are active in the world's cutting-edge fields
  • Hesitant to use a subscription service
  • Having basic IT knowledge

The details of each course are as follows:


Build Responsive Real-World Websites with HTML and CSS

Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid

thumbnail
Ratings
4.71
Subscribers
391,551
Subscribers last month
(August 2023)
4,345
Level
all
Video Duration
37 hours 26 minutes
Created
Mar 3rd, 2015
Last updated
Jun 5th, 2023
Price
$139.99

*** The #1 bestselling HTML and CSS course on Udemy! ***

*** Completely re-built from scratch in July 2021 (35+ hours video) ***

"Having gone through other related courses on other platforms, I can say this course is the most practical and readily applicable course on web design and development I have taken." — Bernie Pacis


Open a new browser tab, type in www.omnifood.dev, and take a look around. I will wait here...

...

Amazing, right? What if you knew exactly how to design and build a website like that, completely from scratch? How amazing would that be?

Well, I'm here to teach you HTML, CSS, and web design, all by building the stunning website that you just saw, step-by-step.

So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website just like Omnifood, by following a 7-step process. And it will even look great on any computer, tablet, and smartphone.

But what if you want to build a completely different website? Well, no problem! I designed the course curriculum with exactly this goal: to enable you to design and build any website that you can think of, not just copy the course project.


So, in order to become a confident and independent developer, capable of building your own websites in the future, you will learn:

  • The fundamentals of modern and semantic HTML, CSS, and building layouts in a small separate project, which will prepare you for the main course project (www.omnifood.dev). This includes modern flexbox and CSS Grid!

  • How to design beautiful websites, by learning a web design framework I created just for this course. It consists of easy-to-use guidelines for design aspects like typography, colors, images, spacing, and more (this is like a small standalone course!).

  • How to use well-established website components and layout patterns in order to come up with professional-looking designs

  • How to make any website work on any mobile device, no matter the design and layout (responsive design)

  • How to use the 7 steps of building a professional website in practice: planning, sketching, designing, building, testing, optimizing, and launching

  • How to find and use free design assets such as images, fonts, and icons

  • Important developer skills such as reading documentation, fixing code errors on your own, and using professional web development tools

Does this sound like fun? Then join me and 200,000+ other developers and start building websites today!

Or are you not sold yet and need to know more? No problem, just keep reading...


[01] Why should you learn HTML and CSS in the first place?

Building websites allows you to do fun and creative work, from anywhere in the world, and it even pays well. Web development is one of the most future-proof and highest-paying industries in the world. And HTML and CSS is the entry point to this world!

But you already know all this, that's why you want to learn HTML and CSS too. Well, you came to the right place!

This is the best and most complete course for starting your web development journey that you will find on Udemy. It's an all-in-one package that takes you from knowing nothing about HTML and CSS, to building beautiful websites using tools and technologies that professional web developers use every single day.


[02] Why is this course so unique and popular?

Reason #1: The course is completely project-based

Simple demos are boring, and therefore you're gonna learn everything by building actual projects! In the final project (www.omnifood.dev), together we hand-code a beautiful and responsive landing page for a fictional company that I made up just for the course.


Reason #2: You will not just learn how to code

Coding is great, but it's not everything! That's why we will go through the entire 7-step process of building and launching our website project.

So the huge Omnifood project will teach you real-world skills to build real-world HTML and CSS websites: how to plan projects and page layouts, how to implement designs using HTML and CSS techniques, how to write clean and organized code, how to optimize websites for good speed performance, and many more.

On top of that, this course has a huge focus on beautiful design. In fact, this is the only course on the market that focuses on both coding and designing, together.


Reason #3: I'm the right teacher for you

With the right guidance and a well-structured curriculum, building websites can be quite easy and fun to learn. With a bunch of random tutorials and YouTube videos? Not so much. And that's where I come in.

My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I have been teaching this bestselling course since 2015 to over 200,000 developers, always listening to feedback and understanding exactly how students actually learn.

Using that feedback, I recently rebuilt this course from scratch and designed the ideal course curriculum for every type of student. It's a unique blend of projects, deep explanations, theory lectures, and challenges. I'm sure you're gonna love it!


[03] Why is this course so long?

Reason #1: I take time to explain every single concept that I teach, so that you actually learn, and not just copy code from the screen (this is a course, not a tutorial)

Reason #2: I go into topics that other HTML and CSS courses shy away from: professional web design, component and layout patterns, some CSS theory, website planning in theory and practice, and developer skills. I believe you need all of this to be successful!

Reason #3: There is a lot of repetition, so that you actually assimilate and practice what you learn. Practice is the single most important ingredient to learning, and therefore I provide plenty of opportunities for you to sharpen your skills


[04] Here is what's also included in the package:

  • Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)

  • Professional English captions (not the auto-generated ones)

  • Downloadable design assets + starter code and final code for each section

  • Downloadable slides for 20+ theory videos (not boring, I promise!)

  • Access to countless free design and development resources that I curated over many years

  • Free support in the course Q&A

  • 10+ coding challenges to practice your new skills (solutions included)


[05] This course is for you if...

  • ... you are a complete beginner with no idea of how to build a website.

  • ... you already know a bit of HTML and CSS from some tutorials or videos, but struggle to put together a good-looking, complete website.

  • ... you are a designer and want to expand your skills into HTML and CSS, because all your designer friends are learning how to code (they are smart!).

Basically, if you are an HTML and CSS master, and build the most beautiful websites in the world, then DON'T take the course. Everyone else: you should take the course, today.


So, does all of this sound great? Then join me and 200,000+ other developers and start your web development journey today!

  1. Welcome and First Steps
  2. Course Structure and Projects
  3. Read Before You Start!
  4. Migration Guide to v2
  5. A High-Level Overview of Web Development
  6. Setting Up Our Code Editor
  7. Your Very First Webpage!
  8. Downloading Course Material
  9. Watch Before You Start!
  10. HTML Fundamentals
  11. Section Intro
  12. Introduction to HTML
  13. HTML Document Structure
  14. Text Elements
  15. More Text Elements: Lists
  16. Images and Attributes
  17. Hyperlinks
  18. Structuring our Page
  19. A Note on Semantic HTML
  20. Installing Additional VS Code Extensions
  21. CHALLENGE #1
  22. CHALLENGE #2
  23. CSS Fundamentals
  24. Section Intro
  25. Introduction to CSS
  26. Inline, Internal and External CSS
  27. Styling Text
  28. Combining Selectors
  29. Class and ID Selectors
  30. Working With Colors
  31. Pseudo-classes
  32. Styling Hyperlinks
  33. Using Chrome DevTools
  34. CSS Theory #1: Conflicts Between Selectors
  35. CSS Theory #2: Inheritance and the Universal Selector
  36. CHALLENGE #1
  37. CSS Theory #3: The CSS Box Model
  38. Using Margins and Paddings
  39. Adding Dimensions
  40. Centering our Page
  41. CHALLENGE #2
  42. CSS Theory #4: Types of Boxes
  43. CSS Theory #5: Absolute Positioning
  44. Pseudo-elements
  45. Developer Skill #1: Googling and Reading Documentation
  46. Developer Skill #2: Debugging and Asking Questions
  47. CHALLENGE #3
  48. Layouts: Floats, Flexbox, and CSS Grid Fundamentals
  49. Section Intro
  50. The 3 Ways of Building Layouts
  51. Using Floats
  52. Clearing Floats
  53. Building a Simple Float Layout
  54. box-sizing: border-box
  55. CHALLENGE #1
  56. Introduction to Flexbox
  57. A Flexbox Overview
  58. Spacing and Aligning Flex Items
  59. The flex Property
  60. Adding Flexbox to Our Project
  61. Building a Simple Flexbox Layout
  62. CHALLENGE #2
  63. Introduction to CSS Grid
  64. A CSS Grid Overview
  65. Sizing Grid Columns and Rows
  66. Placing and Spanning Grid Items
  67. Aligning Grid Items and Tracks
  68. Building a Simple CSS Grid Layout
  69. CHALLENGE #3
  70. Web Design Rules and Framework
  71. Section Intro
  72. Project Overview
  73. Overview of Web Design and Website Personalities
  74. Web Design Rules #1: Typography
  75. Implementing Typography
  76. Web Design Rules #2: Colors
  77. Implementing Colors
  78. Web Design Rules #3: Images and Illustrations
  79. Web Design Rules #4: Icons
  80. Implementing Icons
  81. Web Design Rules #5: Shadows
  82. Implementing Shadows
  83. Web Design Rules #6: Border-radius
  84. Implementing Border-radius
  85. Web Design Rules #7: Whitespace
  86. Web Design Rules #8: Visual Hierarchy
  87. Implementing Whitespace and Visual Hierarchy
  88. Web Design Rules #9: User Experience (UX)
  89. The Website-Personalities-Framework
  90. The Missing Piece: Steal Like An Artist!
  91. Components and Layout Patterns
  92. Section Intro
  93. Web Design Rules #10 - Part 1: Elements and Components
  94. Building an Accordion Component - Part 1
  95. Building an Accordion Component - Part 2
  96. Building a Carousel Component - Part 1
  97. Building a Carousel Component - Part 2
  98. Building a Table Component - Part 1
  99. Building a Table Component - Part 2
  100. CHALLENGE #1: Building a Pagination Component
  101. Web Design Rules #10 - Part 2: Layout Patterns
  102. Building a Hero Section - Part 1
  103. Building a Hero Section - Part 2
  104. Building a Web Application Layout - Part 1
  105. Building a Web Application Layout - Part 2
  106. Omnifood Project – Setup and Desktop Version
  107. Section Intro
  108. The 7 Steps to a Great Website
  109. Defining and Planning the Project (Steps 1 and 2)
  110. Sketching Initial Layout Ideas (Step 3)
  111. First Design and Development Steps (Step 4)
  112. Responsive Design Principles
  113. How rem and max-width Work
  114. Building the Hero - Part 1
  115. Building the Hero - Part 2
  116. Building the Hero - Part 3
  117. Building the Header
  118. Building the Navigation
  119. Setting Up a Reusable Grid
  120. Building the How-It-Works Section - Part 1
  121. Building the How-It-Works Section - Part 2
  122. Building the Featured-In Section
  123. Building the Meals Section - Part 1
  124. Building the Meals Section - Part 2
  125. Building the Meals Section - Part 3
  126. Building the Testimonials Section - Part 1
  127. Building the Testimonials Section - Part 2
  128. Building the Pricing Section - Part 1
  129. Building the Pricing Section - Part 2
  130. Building the Features Part
  131. Building the Call-To-Action Section - Part 1
  132. Building the Call-To-Action Section - Part 2
  133. Building the Call-To-Action Section - Part 3
  134. Building the Footer - Part 1
  135. Building the Footer - Part 2
  136. Omnifood Project – Responsive Web Design
  137. Section Intro
  138. How Media Queries Work
  139. How to Select Breakpoints
  140. Responding to Small Laptops
  141. Responding to Landscape Tablets
  142. Responding to Tablets
  143. Building the Mobile Navigation
  144. Responding to Smaller Tablets
  145. Responding to Phones
  146. Omnifood Project – Effects, Optimizations and Deployment
  147. Section Intro
  148. A Short Introduction to JavaScript
  149. Making the Mobile Navigation Work
  150. Implementing Smooth Scrolling
  151. Implementing a Sticky Navigation Bar
  152. Browser Support and Fixing Flexbox Gap in Safari
  153. Testing Performance With Lighthouse
  154. Adding Favicon and Meta Description
  155. Image Optimizations
  156. Deployment to Netlify
  157. Making the Form Work With Netlify Forms
  158. The End!
  159. Where to Go from Here
  160. My Other Courses + Updates
  161. [LEGACY] Old Course Version 1
  162. Download the Old Course Version
Complete JAVASCRIPT with HTML5,CSS3 from zero to Expert-2023

Learn HTML5, CSS3, JavaScript by building a modern looking responsive website.

thumbnail
Ratings
4.21
Subscribers
323,615
Subscribers last month
(August 2023)
3,018
Level
beginner
Video Duration
16 hours 50 minutes
Created
Dec 25th, 2020
Last updated
Aug 2nd, 2023
Price
$59.99

Want to learn Web Design & Web Development Skills? Then this is the RIGHT course For you! Many languages came and disappear but JavaScript is language that is enjoying a high run and demand in the programming world. The very first things you need to learn HTML5, CSS3, JavaScript and JQuery to become a Web Developer and off-course some Web Design Guidelines. This course will exactly teach you all these New Skills to become a good Web Developer. In this course, you will also learn Web Design Guidelines, which you can apply to Real World Websites.


This course will first give basic understanding of HTML5, CSS3, JavaScript, JQuery and then by combining all these skills, you will Build a Modern Looking Responsive Website which will look Great on all the Small and Wide Screens.


JavaScript is THE most important programming language you need to learn as a web developer - and with this course, you make sure that you will not miss a single thing you have to know as a JavaScript developer!


This is the most comprehensive and modern course you can find on JavaScript - it's based on all my JavaScript knowledge AND teaching experience. It's both a complete guide, starting with the core basics of the language, as well as an extensive reference of the JavaScript language and environment, ensuring that both newcomers as well as experienced JavaScript developers get a lot out of this course!


It's a huge course because it's packed with important knowledge and helpful content. From the core basics, over advanced concepts and JavaScript specialties, all the way up to expert topics like performance optimization and testing - this course has it all. My goal was to create your go-to resource for the JavaScript language, which you can not just use for learning it but also as a resource you can come back to and look up important topics.

  1. Introduction of web design
  2. Basic requirements to build web applications
  3. Web terminology
  4. Web server
  5. Web site
  6. Web page
  7. Basics
  8. Introduction of HTML
  9. Brief discription on HTML
  10. Structure of Html document scope
  11. Body Section
  12. Headings,paragraph and Blockquotes
  13. Introduction of headings
  14. Example of headings
  15. Introduction of paragraph and blockquotes
  16. Example of paragraph and blockquotes
  17. Ordered list and unordered list
  18. Introduction of Ordered list
  19. Example of ordered list
  20. Introduction of Unordered list
  21. Example of Unordered list
  22. Blankspaces,pre-formatted text,Acronyms,Details and summary
  23. Line break in html
  24. Blankspaces in Html
  25. Pre-formatted text in Html
  26. Acronyms in Html
  27. Details and Summary in Html
  28. Datalist with terms and definitions
  29. Introduction of Datalist
  30. Example of Datalist with terms and definitions
  31. Text formatting in Html
  32. Introduction to text formatting in Html
  33. Explanation of font element with example
  34. Explanation of font styles with example
  35. Explanation of font effects with example
  36. Images in Html
  37. Explanation of Image Element in Html
  38. Example of image element
  39. Links in Html
  40. Explanation of Horizontal line
  41. Introduction to Links in Html
  42. Explanation of Intra links with Example
  43. Explanation of inter links with example
  44. Tables in Html
  45. Explanation of Tables in Html
  46. Example of Tables in Html
  47. Forms in Html
  48. Explanation of forms in Html
  49. Example of forms in Html
  50. Example of Dropdownlist and Listbox
  51. Fieldset,Radio Button and Checkbox with Examples
  52. Explanation of Progress and Meter
  53. Explanation on Textarea and buttons
  54. Marquee in HTML
  55. Styles in Html
  56. Explanation of styles in Html with examples
  57. Introduction of CSS
  58. Explanation on Type selectors in CSS
  59. Javascript
  60. javascript introduction
  61. Integrating Javascript into HTML page
  62. javascript Refering HTML elements
  63. javascript output properties and methods
  64. javascript output properties and methods part-2
  65. Handling inputs in javascript
  66. Javascript Variables
  67. Javascript Datatypes
  68. Non-primitive types in javascript
  69. Javascript Regular-expressions
  70. Javascript Operators
  71. javascript Operators part-2
  72. javascript Control-flow statements
  73. javascript Built-in objects
  74. javascript Browser objects
  75. Javascript Browser objects part-2
  76. Javascript Events
  77. Real-world food delivery application
Advanced CSS and Sass: Flexbox, Grid, Animations and More!

The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.

thumbnail
Ratings
4.76
Subscribers
198,170
Subscribers last month
(August 2023)
1,974
Level
intermediate
Video Duration
28 hours 8 minutes
Created
Nov 29th, 2016
Last updated
Jun 5th, 2023
Price
$129.99

Have you been coding CSS for some time, but want to take your game to the next level? Do you feel confused with CSS jargon like inheritance, specificity, or the cascade?

What if there was one resource, one place, where you could learn all the advanced and modern CSS techniques and properties you've been reading about?

Good news: there is!

Welcome to "Advanced CSS and Sass", the most advanced, the most modern, and the most complete CSS course on the internet. It's everything you want in an advanced CSS course, and more.

You will learn complex CSS animations, advanced responsive design techniques, flexbox layouts, Sass, CSS architecture, fundamental CSS concepts, and so much more.

Like in all my courses, you will build beautiful and carefully designed projects, that will make you proud of yourself and leave you ready to build complex projects on your own.

After finishing this course, you will:

1) Be up to speed with the most modern and advanced CSS properties and techniques;

2) Have mastered the cutting-edge layout technologies Flexbox and CSS Grid;

3) Be ready to build responsive layouts for all kinds of devices and situations;

4) Truly understand how CSS works behind the scenes;

5) Be able to architect large CSS codebases for reusability and maintainability using Sass.

Please note that this course is NOT for absolute beginners, so you should already be at an intermediate level in HTML and CSS (please check out my other course if that's not the case).

 

This course is massive, coming in at 28+ hours. Here is exactly what you will learn:

  • Tons of modern cutting-edge CSS techniques to create stunning designs and effects: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties;

  • Advanced CSS animations with @keyframes, animation, and transition;

  • Advanced CSS selectors, pseudo-classes, and pseudo-elements required for modern CSS development;

  • How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, and stacking contexts;

  • CSS architecture: The 7-1 rule, component-based design, the BEM methodology, writing reusable, maintainable, and scalable code;

  • Introduction to Sass: variables, nesting, partials, imports, mixins, functions, extends, and more;

  • Using Sass in real-world projects: setting global variables, building for reusability, architecting CSS, and managing media queries;

  • The NPM ecosystem: setting up a development process to compile Sass and automatic browser reload, and creating a build process to concatenate, prefix, and compress CSS files;

  • Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities, and touch capabilities;

  • Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support;

  • Responsive images in HTML and CSS for faster pageloads: resolution switching, density switching, art direction;

  • SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colors in CSS and best practices;

  • Videos in HTML and CSS: building a background video effect;

  • Flexbox layouts: main concepts, introduction to both flex container and flex item-specific properties, advanced positioning techniques applied to a huge real-world project;

  • CSS Grid layouts: main concepts, CSS grid vs flexbox, and layout techniques applied to a real-world project. This part alone could be an entire course!

 

Why should you take this course?

So you saw that the course is absolutely full-packed with content. But maybe you're still not sure if you should actually learn advanced CSS?

That's probably because CSS is so easy to get started with. In fact, most developers highly underestimate the importance and power of CSS. But nothing could be further away from the truth!

CSS is what makes our design come to life. And there is so much we can do with it! Mastering advanced techniques like flexbox, CSS grid, and animations, will give you an edge over many CSS developers out there who still use outdated methods.

Plus, CSS can become a real nightmare when you try to master it, and when you have to maintain large projects. So having a good grasp on fundamental concepts is an absolute must for any serious front-end developer.

And this course will help you with all that!

So, should you take this course? The answer is most likely a big YES!

And I packed so much content into this course, that no matter if you're just starting out, or if you're already an experienced front-end developer, there is definitely gonna be something for you in this course.

 

And this is what you get by signing up today:

  • 28h of Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)

  • Professional English captions (not the auto-generated ones)

  • Downloadable design assets + starter code and final code for each section

  • Downloadable slides for theory videos (not boring, I promise!)

  • Free support in the course Q&A

  • Lots of small challenges are included in the videos so you can track your progress.

 

If you're still with me at this point, then please watch the promo video to take a look at the course projects, and I promise you will be amazed :)

After that, I hope to welcome you as a new student in my course. I'm sure you're gonna love it!

  1. Welcome, Welcome, Welcome!
  2. Welcome to the Most Advanced CSS Course Ever!
  3. READ BEFORE YOU START!
  4. Setting up Our Tools
  5. Natours Project — Setup and First Steps (Part 1)
  6. Section Intro
  7. Project Overview
  8. Building the Header - Part 1
  9. Building the Header - Part 2
  10. Creating Cool CSS Animations
  11. Building a Complex Animated Button - Part 1
  12. Building a Complex Animated Button - Part 2
  13. How CSS Works: A Look Behind the Scenes
  14. Section Intro
  15. Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
  16. How CSS Works Behind the Scenes: An Overview
  17. How CSS is Parsed, Part 1: The Cascade and Specificity
  18. Specificity in Practice
  19. How CSS is Parsed, Part 2: Value Processing
  20. How CSS is Parsed, Part 3: Inheritance
  21. Converting px to rem: An Effective Workflow
  22. How CSS Renders a Website: The Visual Formatting Model
  23. CSS Architecture, Components and BEM
  24. Implementing BEM in the Natours Project
  25. Introduction to Sass and NPM
  26. Section Intro
  27. What is Sass?
  28. First Steps with Sass: Variables and Nesting
  29. First Steps with Sass: Mixins, Extends and Functions
  30. A Brief Introduction to the Command Line
  31. NPM Packages: Let's Install Sass Locally
  32. NPM Scripts: Let's Write and Compile Sass Locally
  33. The Easiest Way of Automatically Reloading a Page on File Changes
  34. Natours Project — Using Advanced CSS and Sass (Part 2)
  35. Section Intro
  36. Converting Our CSS Code to Sass: Variables and Nesting
  37. Implementing the 7-1 CSS Architecture with Sass
  38. Review: Responsive Design Principles and Layout Types
  39. Building a Custom Grid with Floats
  40. Building the About Section - Part 1
  41. Building the About Section - Part 2
  42. Building the About Section - Part 3
  43. Building the Features Section
  44. Building the Tours Section - Part 1
  45. Building the Tours Section - Part 2
  46. Building the Tours Section - Part 3
  47. Building the Stories Section - Part 1
  48. Building the Stories Section - Part 2
  49. Building the Stories Section - Part 3
  50. Building the Booking Section - Part 1
  51. Building the Booking Section - Part 2
  52. Building the Booking Section - Part 3
  53. Building the Footer
  54. Building the Navigation - Part 1
  55. Building the Navigation - Part 2
  56. Building the Navigation - Part 3
  57. Building a Pure CSS Popup - Part 1
  58. Building a Pure CSS Popup - Part 2
  59. Natours Project — Advanced Responsive Design (Part 3)
  60. Section Intro
  61. Mobile-First vs Desktop-First and Breakpoints
  62. Let's Use the Power of Sass Mixins to Write Media Queries
  63. Writing Media Queries - Base, Typography and Layout
  64. Writing Media Queries - Layout, About and Features Sections
  65. Writing Media Queries - Tours, Stories and Booking Sections
  66. An Overview of Responsive Images
  67. Responsive Images in HTML - Art Direction and Density Switching
  68. Responsive Images in HTML - Density and Resolution Switching
  69. Responsive Images in CSS
  70. Testing for Browser Support with @supports
  71. Setting up a Simple Build Process with NPM Scripts
  72. Wrapping up the Natours Project: Final Considerations
  73. Trillo Project — Master Flexbox!
  74. Section Intro
  75. Why Flexbox: An Overview of the Philosophy Behind Flexbox
  76. A Basic Intro to Flexbox: The Flex Container
  77. A Basic Intro to Flexbox: Flex Items
  78. A Basic Intro to Flexbox: Adding More Flex Items
  79. Project Overview
  80. Defining Project Settings and Custom Properties
  81. Building the Overall Layout
  82. Building the Header - Part 1
  83. Building the Header - Part 2
  84. Building the Header - Part 3
  85. Building the Navigation - Part 1
  86. Building the Navigation - Part 2
  87. Building the Hotel Overview - Part 1
  88. Building the Hotel Overview - Part 2
  89. Building the Description Section - Part 1
  90. Building the Description Section - Part 2
  91. Building the User Reviews Section
  92. Building the CTA Section
  93. Writing Media Queries - Part 1
  94. Writing Media Queries - Part 2
  95. Wrapping up the Trillo Project: Final Considerations
  96. A Quick Introduction to CSS Grid Layouts
  97. Section Intro
  98. Why CSS Grid: A Whole New Mindset
  99. Quick Setup for This Section
  100. Creating Our First Grid
  101. Getting Familiar with the fr Unit
  102. Positioning Grid Items
  103. Spanning Grid Items
  104. Grid Challenge
  105. Grid Challenge: A Basic Solution
  106. Naming Grid Lines
  107. Naming Grid Areas
  108. Implicit Grids vs. Explicit Grids
  109. Aligning Grid Items
  110. Aligning Tracks
  111. Using min-content, max-content and the minmax() function
  112. Responsive Layouts with auto-fit and auto-fill
  113. Nexter Project — Master CSS Grid Layouts!
  114. Project Overview and Setup
  115. Building the Overall Layout - Part 1
  116. Building the Overall Layout - Part 2
  117. Building the Features Section - Part 1
  118. Building the Features Section - Part 2
  119. Building the Story Section - Part 1
  120. Building the Story Section - Part 2
  121. Building the Homes Section - Part 1
  122. Building the Homes Section - Part 2
  123. Building the Gallery - Part 1
  124. Building the Gallery - Part 2
  125. Building the Footer
  126. Building the Sidebar
  127. Building the Header - Part 1
  128. Building the Header - Part 2
  129. Building the Realtors Section
  130. Writing Media Queries - Part 1
  131. Writing Media Queries - Part 2
  132. Browser Support for CSS Grid
  133. Wrapping up the Nexter Project: Final Considerations
  134. That's It, Everyone!
  135. See You Next Time, CSS Master!
  136. My Other Courses + Updates
The HTML & CSS Bootcamp 2023 Edition

Brand New Course! Covers Flexbox, CSS Grid, Animations, Responsive Design and More! Tons of Exercises & Projects.

thumbnail
Ratings
4.8
Subscribers
9,573
Subscribers last month
(August 2023)
882
Level
beginner
Video Duration
37 hours 12 minutes
Created
Jan 16th, 2023
Last updated
Apr 17th, 2023
Price
$84.99

**Brand new HTML & CSS course, just released in February 2023**

** 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!

  1. Introduction
  2. Welcome & Curriculum Overview
  3. Join Our Chat Community
  4. Important Note On Leaving Feedback!
  5. A First Taste of HTML & CSS
  6. How The Web Works
  7. The Roles of HTML, CSS, and JS
  8. Quick Quiz On The Roles of HTML & CSS
  9. Installing The Tools We Need
  10. Configuring VSCode
  11. Important Note On The Course Exercises
  12. HTML Basics
  13. Introducing HTML
  14. The Basic HTML Workflow
  15. The Paragraph Element
  16. Mozilla Developer Network
  17. Chrome Developer Tools
  18. Document Structure
  19. Creating HTML Comments
  20. Creating Headings
  21. HTML Basics Exercise
  22. More HTML
  23. Working With HTML Lists
  24. The Em, Strong, B, and I Elements
  25. Nesting Elements
  26. Superscript and Subscript
  27. Inline Vs. Block Elements
  28. Creating Links
  29. Other Types of Links
  30. Creating Images
  31. Pasta Recipe Exercise
  32. Working With Forms
  33. Creating Text Inputs and Buttons
  34. The Form Element
  35. Name and Placeholder Attributes
  36. Properly Labelling Form Controls
  37. Other Types of Inputs
  38. Checkboxes, Textareas, and Range Inputs
  39. Selects and Radio Button Groupings
  40. Course Landing Page Form Exercise
  41. Other Elements
  42. Spans
  43. Divs
  44. Tables
  45. Semantic Markup
  46. Semantic Elements
  47. CSS Basics
  48. Getting Our Starter Code
  49. Working Within Inline Styles
  50. Writing Internal Styles
  51. External Styles: The Best Way To Write Styles
  52. Quick Note on Codepen
  53. Anatomy of CSS
  54. The Element Selector
  55. CSS Basics Exercise
  56. The World of CSS Colors
  57. Working with background-color
  58. Quick Tip: MDN & Comments
  59. Named Colors
  60. Understanding RGB Colors
  61. Hexadecimal Colors
  62. RGBA Colors and Opacity
  63. Colors Quiz
  64. CSS Inheritance
  65. CSS Colors Exercise
  66. Styling Text
  67. Changing Fonts with Font-Family
  68. Font-size, font-weight, and font-style
  69. Changing Text Alignment
  70. Line-height, letter-spacing, and word-spacing
  71. Adding Custom Fonts With Google Fonts
  72. Styling Text Exercise
  73. Creating Text Shadows
  74. Our First Mini Project: Cantilever
  75. More Text Styling
  76. Text-transform & text-decoration
  77. The ID Selector
  78. The Class Selector
  79. Styling Lists
  80. Styling Links and :hover Pseudo-Class
  81. The Font Shorthand Property
  82. Leafy Seadragon Exercise
  83. Selectors Pt. 1
  84. The Universal Selector
  85. The Attribute Selector
  86. Grouping Selectors
  87. Descendant & Child Combinators
  88. Compound Selectors
  89. CSS Selectors Exercise
  90. The Box Model
  91. Introducing The Box Model
  92. Working With Borders
  93. Width, Height, and Percentages
  94. Adding Padding to Elements
  95. Working With Margins
  96. The Alternate Box Model
  97. The Display Property
  98. Display: None
  99. Negative Margin & Margin Auto
  100. Margin Collapsing: WTF?
  101. A Common Layout Pattern
  102. Min and Max Width
  103. Rounding Elements With Border Radius
  104. Box Shadows
  105. Working With Overflow
  106. Ski Resort Exercise
  107. Artist Portfolio Project
  108. Introducing Our Project
  109. Basic Project Setup
  110. Writing The Navbar Markup
  111. Styling The Navbar
  112. Finishing Up The Navbar
  113. Creating The Photo Grid
  114. Continuing The Photo Grid
  115. Finishing The Photo Grid
  116. Adding The Footer Content
  117. Specificity and The Cascade
  118. Section Introduction
  119. The Sibling Combinator
  120. Working With Pseudo-Classes
  121. Styling Pseudo-Elements
  122. CSS Selectors Pt. 2 Exercise
  123. The Basics of Specificity
  124. Inline Styles and Specificity
  125. Calculating Specificity Values
  126. !important and The Cascade
  127. Wrapping Up The Cascade
  128. Cascade & Specificity Quiz
  129. Blog Post Project
  130. Introducing Our Blog Post Project
  131. Centering The Main Content
  132. Working on Typography
  133. Creating the Headline Section
  134. Implementing Our Headings
  135. Adding In Code Styles
  136. Creating the Footer
  137. Writing The Full Size Hero
  138. CSS Units
  139. Absolute Units: Pixels, Centimeters, and More!
  140. Working With Percentages
  141. The Joy of Rem Units
  142. Understanding The Em Unit
  143. Vw and Vh Units
  144. CSS Units Quiz
  145. Which Units Should You Use?
  146. Working With Floats
  147. Hazel CV Project
  148. Introducing The Project
  149. Setting Up The Navbar
  150. Finishing The Navbar
  151. Starting The Hero Content
  152. Making The Skills Section
  153. Creating The Blog Section
  154. Adding The Events Section
  155. Making A Simple Footer
  156. Backgrounds, Gradients, & Filters
  157. Working With Background Images
  158. Controlling Background-Repeat
  159. Sizing Our Background
  160. Positioning Background
  161. Working With Background-Clip
  162. Background Exercise
  163. An Important Note About Gradients!
  164. Creating Linear Gradients
  165. Radial, Conic, and Repeating Gradients
  166. The Background Shorthand Property
  167. Fancy CSS Filters
  168. Positioning
  169. Introducing Positioning
  170. Relative Positioning
  171. Controlling Layers With Z-Index
  172. Absolute Positioning Pt 1
  173. Absolute Positioning Pt 2
  174. Creating A Button Badge
  175. Fixed Positioning
  176. Positioning Exercise #1
  177. Positioning Exercise #2
  178. Positioning Exercise #3
  179. Transitions and Transforms
  180. Introducing Transitions
  181. The Basic Transition Syntax
  182. Working With Multiple Transitions
  183. Transition Timing Functions
  184. Transition Delays
  185. Understanding Animation Performance
  186. Introducing Transforms
  187. Other Types of Transformations
  188. Transform Origin
  189. Building Fancy Button Hover Effects
  190. Flexbox: Part 1
  191. Introducing Flexbox
  192. Display: Flex and Flex Axis
  193. Working With Flex-Direction
  194. Flexbox Exercise 1
  195. Flex-Wrap
  196. Justify-Content
  197. Flexbox Exercise 2
  198. Align-Items
  199. Flexbox Exercise 3
  200. Align-Content
50 Projects In 50 Days - HTML, CSS & JavaScript

Sharpen your skills by building 50 quick, unique & fun mini projects

thumbnail
Ratings
4.61
Subscribers
71,564
Subscribers last month
(August 2023)
1,778
Level
beginner
Video Duration
18 hours 29 minutes
Created
Nov 30th, 2020
Last updated
Dec 8th, 2020
Price
$89.99

This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HTML, CSS & JavaScript that relate to the DOM (Document Object Model). Here is a list of what we will create in this course:


  1. Expanding Cards

  2. Progress Steps

  3. Rotating Navigation Animation

  4. Hidden Search Widget

  5. Blurry Loading

  6. Scroll Animation

  7. Split Landing Page

  8. Form Wave

  9. Sound Board

  10. Dad Jokes

  11. Event Keycodes

  12. Faq Collapse

  13. Random Choice Picker

  14. Animated Navigation

  15. Incrementing Counter

  16. Drink Water

  17. Movie App

  18. Background Slider

  19. Theme Clock

  20. Button Ripple Effect

  21. Drag N Drop

  22. Drawing App

  23. Kinetic Loader

  24. Content Placeholder

  25. Sticky Navbar

  26. Double Vertical Slider

  27. Toast Notification

  28. Github Profiles

  29. Double Click Heart

  30. Auto Text Effect

  31. Password Generator

  32. Good Cheap Fast

  33. Notes App

  34. Animated Countdown

  35. Image Carousel

  36. Hoverboard

  37. Pokedex

  38. Mobile Tab Navigation

  39. Password Strength Background

  40. 3d Background Boxes

  41. Verify Account UI

  42. Live User Filter

  43. Feedback UI Design

  44. Custom Range Slider

  45. Netflix Mobile Navigation

  46. Quiz App

  47. Testimonial Box Switcher

  48. Random Image Feed

  49. Todo List

  50. Insect Catch Game


Many people jump into a frontend framework too early. Learning vanilla JavaScript and understanding how the document object model works are essential before moving to a framework. This course teaches you this by creating real-world projects of all types.


You will also learn more about HTML5 and CSS including semantic tags in your markup, basic CSS properties such as colors, alignment, flexbox, and shadows as well as creating responsive layouts with CSS media queries, CSS custom properties, animations/transitions, and more.


50 projects may seem like a lot, but we were able to make them small enough to where you can complete a project in just a few hours. Of course, this depends on your skill level.

  1. Introduction
  2. Welcome
  3. My Environment & Setup
  4. Project Starter Boilerplate
  5. Course Projects Code & Demos
  6. Day 1 - Expanding Cards
  7. Project Intro
  8. Initial Cards
  9. Expanding Effect
  10. Day 2 - Progress Steps
  11. Project Intro
  12. Creating The Steps
  13. Step Functionality
  14. Day 3 - Rotating Navigation
  15. Project Intro
  16. Content & Circle Styling
  17. Rotate & Slide Effect
  18. Day 4 - Hidden Search Widget
  19. Project Intro
  20. Hidden Search Widget
  21. Day 5 - Blurry Loading
  22. Project Intro
  23. Background Image & Loading Text
  24. Load Blur Effect
  25. Day 6 - Scroll Animation
  26. Project Intro
  27. Scroll Animation
  28. Day 7 - Split Landing Page
  29. Project Intro
  30. Split Landing Page HTML & CSS
  31. Adding The Hover Effect
  32. Day 8 - Form Wave Animation
  33. Project Intro
  34. Styling The Form
  35. Adding The Wave Effect
  36. Day 9 - Sound Board
  37. Project Intro
  38. Sound Board Project
  39. Day 10 - Dad Jokes
  40. Project Intro
  41. Jokes HTML & CSS
  42. Working With Fetch & HTTP Requests/Responses
  43. Fetching & Displaying Jokes
  44. Day 11 - Event KeyCodes
  45. Project Intro
  46. Key Boxes HTML & CSS
  47. Display Key Codes
  48. Day 12 - FAQ Collapse
  49. Project Intro
  50. FAQ Boxes
  51. Toggle Buttons
  52. Day 13 - Random Choice Picker
  53. Project Intro
  54. Choice Picker UI
  55. Create Tags
  56. Select Random Tag
  57. Day 14 - Animated Navigation
  58. Project Intro
  59. Nav Styling
  60. Icon Styling & Active Toggle
  61. Day 15 - Incrementing Counter
  62. Project Intro
  63. Counters HTML & CSS
  64. Create & Display Increment
  65. Day 16 - Drink Water
  66. Project Intro
  67. Create & Style The Cups
  68. Fill Small Cups
  69. Update Big Cup
  70. Day 17 - Movie App
  71. Project Intro
  72. Movies UI Layout
  73. Fetching Data From The API
  74. Adding Movies To The DOM
  75. Day 18 - Background Slider
  76. Project Intro
  77. HTML & CSS
  78. Changing Slides
  79. Day 19 - Theme Clock
  80. Project Intro
  81. Starting The Clock
  82. Finish Clock Styling
  83. Mode & Clock Function
  84. Day 20 - Button Ripple Effect
  85. Project Intro
  86. Button Style & Animation
  87. Button Click Effect
  88. Day 21 - Drag N Drop
  89. Project Intro
  90. Create Drop Boxes
  91. Drag Drop Events
  92. Day 22 - Drawing App
  93. Project Intro
  94. Drawing Pad UI
  95. Canvas Shapes
  96. Mouse Events & Drawing
  97. Toolbox Controls
  98. Day 23 - Kinetic CSS Loader
  99. Project Intro
  100. Kinetic CSS Loader
  101. Day 24 - Content Placeholder
  102. Project Intro
  103. Card HTML
  104. Card CSS
  105. Animation Timeout Effect
  106. Day 25 - Sticky Navbar
  107. Project Intro
  108. Website Content & Style
  109. Navbar CSS & JS
  110. Day 26 - Double Vertical Slider
  111. Project Intro
  112. Vertical Slider UI
  113. Vertical Slider Function
  114. Day 27 - Toast Notification
  115. Project Intro
  116. Create Toast Notifications
  117. Day 28 - Github Profiles
  118. Project Intro
  119. Github Profile Card
  120. Fetching Profile Data With Axios
  121. Dynamic Profile Cards
  122. Adding Repos To Card
  123. Day 29 - Double Heart Click
  124. Project Intro
  125. HTML & CSS
  126. Show Heart Based On Click Position
  127. Day 30 - Auto Text Effect
  128. Project Intro
  129. Auto Text Effect
  130. Day 31 - Password Generator
  131. Project Intro
  132. Password Generator UI
  133. Random Functions
  134. Generate Password
  135. Copy Password To Clipboard
  136. Day 32 - Good, Cheap, Fast Checkboxes
  137. Project Intro
  138. Style Checkboxes
  139. Check Ball Animation
  140. JavaScript Logic
  141. Day 33 - Notes App
  142. Project Intro
  143. Notes HTML & CSS
  144. Adding Notes To The DOM
  145. Save Notes To Local Storage
  146. Day 34 - Animated Countdown
  147. Project Intro
  148. Counter & Final Sections
  149. In & Out Animations
  150. Dynamic Animation With JS
  151. Day 35 - Image Carousel
  152. Project Intro
  153. Carousel UI
  154. Carousel Functionality
  155. Day 36 - Hoverboard
  156. Project Intro
  157. Styling The Board Squares
  158. Hoverboard Effect
  159. Day 37 - Pokedex
  160. Project Intro
  161. Pokedex UI & Styling
  162. Fetching Pokemon Data
  163. Creating The Pokemon Cards
  164. Day 38 - Mobile Tab Navigation
  165. Project Intro
  166. Create & Style UI
  167. Navigation Effect
  168. Day 39 - Password Strength Background
  169. Project Intro
  170. Creating The Form & Background
  171. Change Blur On Input
  172. Day 40 - 3D Background Boxes
  173. Project Intro
  174. Creating The Button & Boxes
  175. Background Position & Rotate Event
  176. Day 41 - Verify Account UI
  177. Project Intro
  178. Verify Account UI Project
  179. Day 42 - Live User Filter
  180. Project Intro
  181. User List UI
  182. Fetch & Filter Users
  183. Day 43 - Feedback UI Design
  184. Project Intro
  185. Feedback Boxes
  186. Select & Submit Feedback
  187. Day 44 - Custom Range Slider
  188. Project Intro
  189. Styling The Range
  190. Label Value & Movement
  191. Day 45 - Netflix Navigation
  192. Project Intro
  193. Netflix Nav - Part 1
  194. Netflix Nav - Part 2
  195. Day 46 - Quiz App
  196. Project Intro
  197. Quiz UI
  198. Quiz Functionality
  199. Day 47 - Testimonial Box Switcher
  200. Project Intro

3. Top 3 Recommended YouTube Videos

Here are Outlecture's top 3 recommended YouTube videos, carefully selected for you.

Title View count View count last month
(August 2023)
Like count Publish date

HTML & CSS Full Course for free 🌎 (2023)

thumbnail

Channel: Bro Code

494,049 182,528 17,559 May 31st, 2023

HTML & CSS Full Course - Beginner to Pro

thumbnail

Channel: SuperSimpleDev

6,197,978 473,942 136,971 Feb 5th, 2022

Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)

thumbnail

Channel: freeCodeCamp.org

1,022,411 95,147 30,077 Nov 1st, 2022

YouTube has become a familiar platform for everyday use, where viewers can watch videos for free, although they may contain advertisements. Recently, there has been an increase in the availability of high-quality educational materials on this platform. It is an excellent option for those who want to learn without paying or simply obtaining a quick understanding of a topic.
We highly recommend utilizing YouTube as a valuable learning resource.

Recommended for

  • Wanting to learn without spending money
  • Wanting to quickly understand the overview of HTML CSS

The details of each course are as follows:

HTML & CSS Full Course for free 🌎 (2023)

Bro Code

View count
494,049
View count last month
(August 2023)
182,528
Like count
17,559
Publish date
May 31st, 2023
#HTML #CSS #course

⭐ TIME STAMPS ⭐
#1 00:00:00 Introduction to HTML 🌎
00:01:56 VSCode download
00:02:38 project folder setup
00:02:57 index.html
00:03:16 live server extension
00:03:35 html basics
#2 00:11:07 hyperlinks 👈
#3 00:15:15 images 🖼️
#4 00:21:33 audio 🔊
#5 00:26:49 video 🎥
#6 00:31:20 favicons 🗿
#7 00:34:19 text formatting 💬
#8 00:38:10 span & div 🏁
#9 00:42:57 lists 📄
#10 00:49:31 tables 📊
#11 00:54:13 buttons 🔘
#12 00:59:28 forms 📝
#13 01:17:22 headers & footers 🤯
#14 01:23:10 Introduction to CSS 🎨
#15 01:31:10 colors 🖌️
#16 01:35:22 fonts 🔤
#17 01:42:42 borders 🖼
#18 01:47:09 shadows 👥
#19 01:50:27 margins ↔️
#20 01:55:41 float 🎈
#21 02:00:08 overflow 🌊
#22 02:03:31 display property 🧱
#23 02:07:43 height and width 📏
#24 02:14:37 positions 🎯
#25 02:21:00 background images 🏙️
#26 02:24:15 combinators ➕
#27 02:29:12 pseudo-classes ☟
#28 02:36:50 pseudo-elements ✔
#29 02:42:46 pagination 🕮
#30 02:51:44 dropdown menus 🔻
#31 02:58:19 navigation bar 🧭
#32 03:04:46 website layout 🗺️
#33 03:14:13 image gallery 📷
#34 03:19:50 icons 🐤
#35 03:28:23 flexbox 💪
#36 03:38:23 transformations 🔄
#37 03:47:23 animations 🎬
HTML & CSS Full Course - Beginner to Pro

SuperSimpleDev

View count
6,197,978
View count last month
(August 2023)
473,942
Like count
136,971
Publish date
Feb 5th, 2022
Certificates are now available! https://courses.supersimple.dev/courses/html-css
🎓 Enroll to get a Certificate of Completion and an elevated learning experience (breakdown into smaller videos covering specific topics, ad-free content, and progress tracking).
✅ Don't worry if you're halfway through the course or finished the course, you can skip the lessons you already finished and take the final test to get your Certificate.
❤️ Thanks for supporting SuperSimpleDev!

In this full course, we learn how to build websites with HTML and CSS, and get started as a software engineer.
Exercise solutions: https://supersimple.dev/courses/html-css-course#exercises
Copy of the code: https://supersimple.dev/courses/html-css-course#code
HTML and CSS reference: https://supersimple.dev/html

Lessons:
0:00 Intro
1:02 1. HTML Basics
17:42 2. CSS Basics
44:39 3. Hovers, Transitions, Shadows
1:03:10 4. Chrome DevTools & CSS Box Model
1:17:30 5. Text Styles
1:52:18 6. The HTML Structure
2:11:08 7. Images and Text Boxes
2:25:42 8. CSS Display Property
2:34:58 9. The div Element
2:46:55 10. Nested Layouts Technique
3:16:58 11. CSS Grid
3:43:58 12. Flexbox
4:15:21 13. Nested Flexbox
4:44:36 14. CSS Position
5:07:14 15. Position Absolute and Relative
5:33:49 16. Finish the Project
6:07:46 17. More CSS Features
6:30:21 Outro

Additional Information:
This HTML CSS full course is a series of HTML CSS tutorials, teaching the major skills that we need to create complex websites. Each HTML CSS tutorial builds on a project and provides some HTML CSS exercises to practice what we learned. By the end, we'll learn the basics of web development and we'll be on our way to becoming a web developer and software engineer.

#htmltutorial #csstutorial #htmlcssfullcourse #html #css #tutorial #fullcourse #course #htmltutorial #csstutorial #htmlcsstutorial #htmlfullcourse #cssfullcourse #webdevelopment #advancedhtmltutorial #advancedcsstutorial #coding #codingtutorial #softwareengineer #softwareengineering #learntocode #supersimpledev
Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)

freeCodeCamp.org

View count
1,022,411
View count last month
(August 2023)
95,147
Like count
30,077
Publish date
Nov 1st, 2022
Learn full-stack web development in this full course for beginners. First, you will learn the basics of HTML, CSS, and JavaScript. Then, you will learn how to put everything together to create a frontend movie search app. Finally, you will learn how to create a backend API to create movie reviews and connect the frontend to the backend. The backend uses Node.js, Express, and MongoDB.

🔗 Get started with Replit: https://join.replit.com/web-students

✏️ Tomi Tokko and Beau Carnes developed this course.
Tomi's channel: https://www.youtube.com/CodeWithTomi
Beau's channel: https://www.youtube.com/zizyo

⭐️ Code ⭐️
JavaScript RPG Starter: https://replit.com/@BeauCarnes/JavaScript-RPG-Starter
JavaScript RPG Complete: https://replit.com/@BeauCarnes/JavaScript-RPG

Frontend Movie App (and starter for connecting to backend): https://replit.com/@TomiTokko/MoviesApp
Live demo of frontend app: https://moviesapp.tomitokko.repl.co/

Backend Reviews API: https://replit.com/@BeauCarnes/review-backend
Frontend connected to backend: https://replit.com/@BeauCarnes/htmlfrontend

🏗 Replit provided a grant to make this course possible.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:42) Learn HTML
⌨️ (1:26:27) Learn CSS
⌨️ (3:15:49) Learn JavaScript
⌨️ (4:52:01) Create Frontend Movie App
⌨️ (5:44:04) Create Backend Reviews API
⌨️ (6:49:32) Connect Frontend with Backend

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

4. Progate

You can learn HTML CSS on Progate.

Progate is a programming learning service that is available in over 100 countries and has been used by more than 2.8 million people. Its features include:

  • You can write code on Progate's service, so there is no need for a local development environment setup
  • Intuitive understanding through illustration-centered explanations
  • A low cost of $9.99 per month
  • You can take courses other than React without additional fees

For those who are struggling with setting up a local development environment (especially IT beginners), these features can be a big advantage.
Additionally, this subscription payment model also provides cost-effectiveness for those who want to take courses other than React.

Recommended for

  • Lacking basic IT knowledge
  • Wanting to take courses other than HTML CSS
Progate's HTML CSS Learning Course

5. Wrap-up

We introduced recommended courses for HTML CSS. If you are interested in learning other related courses, please refer to the following.

Tailwind CSS
TypeScript
React
Tailwind CSS
TypeScript
React

If you want to further explore and learn after taking one of the courses we introduced today, we recommend visiting the official website or community site.

If you want to stay up-to-date on the latest information, we suggest following the official Twitter account.

Furthermore, We highly recommend utilizing General AI such as ChatGPT as a study aid. This can enable more effective learning, so please give it a try.

We hope you found our website and article helpful. Thank you for visiting.

Back to list
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2023 outlecture.com All Rights Reserved.