HTML & CSS Full Course

(Premium Version with Certificate)

Enroll ~~$99~~ $33 Free Preview

Premium Highlights

Enhanced Learning Experience

An ad-free learning experience with progress tracking, easy-to-navigate content.
Certificate of Completion

Earn a Certificate of Completion from a course with 9.8 million+ views. Add a competitive edge to your resume.
Detailed Course Breakdown

Easily find and revisit specific skills with our detailed course breakdown and search feature.
Support SuperSimpleDev

Your purchase supports SuperSimpleDev, helping us to continue producing high-quality educational videos and content.

Certificate

https://supersimple.dev/certificates/html-css

Course Curriculum

1. Introduction
  FREE PREVIEW
1. 1.1 What is HTML
  FREE PREVIEW
2. 1.2 First HTML Code
  FREE PREVIEW
3. 1.3 HTML Syntax
  FREE PREVIEW
4. 1.4 The Link Element
5. 1.5 HTML Attributes
6. 1.6 Spaces in HTML
7. 1.7 Indents in HTML
8. 1.8 Conclusion & Exercises
1. 2.1 What Is CSS
2. 2.2 CSS Syntax
3. 2.3 General Technique for CSS
4. 2.4 Colors & RGB
5. 2.5 Finish Styling the Subscribe Button
6. 2.6 How to Search on Google
7. 2.7 The class Attribute
8. 2.8 Style the Join Button
9. 2.9 Create the Tweet Button
10. 2.10 Exercises
1. 3.1 Hovers
2. 3.2 Opacity
3. 3.3 Hover Styles for the Join Button
4. 3.4 Transitions
5. 3.5 Shadows
6. 3.6 Shadows With Hover
7. 3.7 Conclusion & Exercises
1. 4.1 Intro to Chrome DevTools
2. 4.2 Hex Colors
3. 4.3 Exact Colors for the Join Button
4. 4.4 CSS Box Model
5. 4.5 CSS Box Model With Chrome DevTools
6. 4.6 Use Box Model With Subscribe Button
7. 4.7 The vertical-align Property
8. 4.8 CSS Box Model With Join Button
9. 4.9 Conclusion & Exercises
1. 5.1 Intro & Setup
2. 5.2 CSS Text Styles
3. 5.3 Style the Video Title
4. 5.4 HTML Entities
5. 5.5 Style the Video Stats
6. 5.6 Finish Styling the YouTube Text
7. 5.7 Remove Duplication in CSS Code
8. 5.8 CSS Specificity
9. 5.9 Create the Apple Text
10. 5.10 Text Elements
11. 5.11 The span Element
12. 5.12 Finish the Apple Text
13. 5.13 Multiple Spaces Between Text
14. 5.14 Conclusion & Exercises
1. 6.1 Intro to the HTML Structure
2. 6.2 The title Element
3. 6.3 Live Server Extension
4. 6.4 Add the HTML Structure to website.html and buttons.html
5. 6.5 Separate CSS Into Its Own File
6. 6.6 Filepaths
7. 6.7 Add the HTML Structure to text.html
8. 6.8 Add New Fonts to the Website
9. 6.9 Conclusion & Exercises
1. 7.1 Project Intro & Setup
2. 7.2 The img Element
3. 7.3 How to Style img Elements
4. 7.4 The input Element
5. 7.5 Exercises
1. 8.1 The display Property
2. 8.2 Block Elements
3. 8.3 Inline-Block Elements
4. 8.4 Inline Elements
5. 8.5 Switch From Block to Inline-Block
6. 8.6 Switch from Inline-Block to Block
7. 8.7 Use display Property in the YouTube Project
8. 8.8 Conclusion & Exercises
1. 9.1 The div Element
2. 9.2 div is a Container
3. 9.3 Why Containers Are Useful
4. 9.4 Create Multiple Video Previews
5. 9.5 Finish the Second Video Preview
6. 9.6 Conclusion and Exercises
1. 10.1 Nested Layouts Technique
2. 10.2 Another Example of Nested Layouts Technique
3. 10.3 Create a Vertical Layout With Code
4. 10.4 Create a Horizontal Layout With Code
5. 10.5 Viewing Nested Layouts in the Chrome DevTools
6. 10.6 Style the Profile Picture and Video Title
7. 10.7 Finish Styling the Video Preview
8. 10.8 Conclusion & Exercises
1. 11.1 Problems With inline-block
2. 11.2 Set Up CSS Grid Practice File
3. 11.3 Intro to CSS Grid
4. 11.4 Create Columns and Rows
5. 11.5 fr Values
6. 11.6 Multiple fr Values
7. 11.7 Use Grid in the YouTube Project
8. 11.8 Create a Bigger Grid
9. 11.9 column-gap & row-gap
10. 11.10 Create a Grid of Video Previews
11. 11.11 Conclusion and Exercises
1. 12.1 Set Up Flexbox Practice File
2. 12.2 Intro to Flexbox
3. 12.3 The flex Property
4. 12.4 Multiple flex Properties
5. 12.5 Difference Between Flexbox and Grid
6. 12.6 More Setup in the Flexbox Practice File
7. 12.7 Align Horizontally With justify-content
8. 12.8 Align Vertically With align-items
9. 12.9 Start Creating the Header
10. 12.10 Separate CSS Into Multiple Files
11. 12.11 Start Styling the Header
12. 12.12 Position the Sections of the Header
13. 12.13 Set max-width on the Middle Section
14. 12.14 Conclusion & Exercises
1. 13.1 Download the Icons for the Header
2. 13.2 Create the Left Section of the Header
3. 13.3 Create the Search Box and Buttons in the Middle Section
4. 13.4 Style the Search Box in the Middle Section
5. 13.5 Style the Buttons in the Middle Section
6. 13.6 Create the Right Section of the Header
7. 13.7 The flex-shrink Property
8. 13.8 Exercises
1. 14.1 Intro to Position & Position Static
2. 14.2 Position Fixed
3. 14.3 Move and Resize Position Fixed Elements
4. 14.4 Make the Header Position Fixed
5. 14.5 How to Position a Sidebar
6. 14.6 Position the Sidebar in the YouTube Project
7. 14.7 Conclusion & Exercises
1. 15.1 Position Absolute
2. 15.2 The z-index Property
3. 15.3 Position Absolute Inside Position Fixed
4. 15.4 Position Absolute Inside Position Relative
5. 15.5 Create the Video Time in the YouTube Project
6. 15.6 Style the Video Time
7. 15.7 Add z-index to the Thumbnails
8. 15.8 Create the Notification Count
9. 15.9 Conclusion & Exercises
1. 16.1 Create the Sidebar Structure
2. 16.2 Add Icons to the Sidebar
3. 16.3 Style the Icons and Text in the Sidebar
4. 16.4 Finish Styling the Sidebar
5. 16.5 Finish Styling the Video Previews
6. 16.6 Create Tooltip for the Search Button
7. 16.7 Make Tooltip Appear When Hovering
8. 16.8 Create Tooltip for the Voice Search Button
9. 16.9 Center the Tooltip With the Button
10. 16.10 Create Tooltip for the Create Button
11. 16.11 Conclusion & Exercises
1. 17.1 Intro to Responsive Design
2. 17.2 Shorthand Properties
3. 17.3 Inheritance
4. 17.4 Inheritance With CSS Specificity
5. 17.5 Semantic Elements
6. 17.6 Comments in HTML & CSS
7. 17.7 Continue Learning by Using Google
8. 17.8 Exercises
1. Final Test
2. Double check your completion & name before receiving your certificate!

About this course

155 lessons
6.5 hours of video content
Certificate of Completion
~~$99~~ $33

Unlock your superior learning experience NOW

Elevate your learning and support quality education today.

Certificate of Completion
Detailed course breakdown
Ad-free, easy-to-navigate content

HTML & CSS Full Course

Premium Highlights

Enhanced Learning Experience

Certificate of Completion

Detailed Course Breakdown

Support SuperSimpleDev

Certificate

Course Curriculum

Introduction

1. HTML Basics

2. CSS Basics

3. Hovers, Transitions, Shadows

4. Chrome DevTools & CSS Box Model

5. Text Styles

6. The HTML Structure

7. Images & Text Boxes

8. CSS Display Property

9. The div Element

10. Nested Layouts Technique

11. CSS Grid

12. Flexbox

13. Nested Flexbox

14. CSS Position

15. Position Absolute & Position Relative

16. Finish the Project

17. More CSS Features

Final Test

About this course

Unlock your superior learning experience NOW