HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid

20h 55m 14s
English
Paid
May 15, 2024

Hi and welcome to the HTML/CSS Bootcamp course, where we'll walk through the same course I teach code bootcamp students around the world. My name is Jordan Hudgens, and I'll be your instructor for the course.

More

In this course, you're going to learn all of the key skills that you're going to need in order to start building out professional websites. Before building this new course out, I interviewed hiring managers at companies around the world and asked them what HTML/CSS skills they expected developers to know and that's how I came up with the list of concepts that you're going to learn.

Some of the skills that you're going to learn are going to be:

  • HTML5

  • CSS3

  • Flexbox

  • CSS Grid

  • Animations

  • Media queries for building responsive layouts from scratch

  • CSS Selectors

  • Navigation

  • Fonts

  • Forms

  • How to integrate and style images

  • Front end development best practices

  • And much more!

As we go through the course material, you'll notice that I'm going to teach you my own process that I use whenever I'm building out a website.

My goal for this entire course isn't just to teach you how to build a single website, but instead my goal is to be able to leverage this project build that we're going to put together, teach you the fundamentals as we implement every single feature, and then by the end of it, you're not just going to be able to build the single website and follow along with what I do, but you'll be able to build any type of website.

There are no technical prerequisites for going through this course. This is the perfect course to go through if you want to learn how to build websites completely from scratch.

The ideal student is someone who is dedicated, wants to learn, and also wants to learn how to build websites using the most modern and up to date technologies. So, thank you for spending the time and going through this material, and good luck with the coding.

Requirements:
  • Basic computer skills
Who this course is for:
  • Anyone interested in learning what it takes to build websites with HTML and CSS

What you'll learn:

  • Build websites using HTML and CSS
  • Use Flexbox to easily align content on the page
  • Work with CSS Grid to build a website's layout
  • Create responsive websites that render custom layouts for smartphones, tablets and desktops
  • Work with images
  • Integrate custom fonts
  • Using CSS based animations
  • Build real world projects
  • Create HTML forms for getting user input

Watch Online HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid

Join premium to watch
Go to premium
# Title Duration
1 HTML, CSS, Flexbox, and CSS Grid Course Introduction 02:02
2 What are HTML and CSS? 06:09
3 The Website We're Going to Build in the HTML/CSS Course 04:47
4 Tools We'll Use in the Course and Basic HTML Structure Overview 17:45
5 Introduction to Using CSS Styles 12:49
6 Deep Dive: How the CSS Cascading Process Works 10:30
7 Guide to HTML Links 16:14
8 Working with the div Tag in HTML 09:52
9 Guide to HTML Classes and IDs 08:34
10 Introduction to Flexbox 15:40
11 Guide to Padding in CSS 07:53
12 Guide to Margin in CSS 04:04
13 Course Update: FontAwesome Import Fix 03:07
14 Integrating Icons with Font Awesome 05:22
15 How to Select and Style Child Tag Elements 08:42
16 Introduction to CSS Grid 13:16
17 How to Import and Use Custom Fonts in HTML 10:08
18 How to Import and Style Images in HTML 07:40
19 Refactoring the CSS Code to Use More Specific Selectors 13:59
20 Integrating Flexbox Inside of a CSS Grid Container to Align Items 07:22
21 Introduction to CSS Animations 09:18
22 Styling the Right Column of the Navigation Bar 13:45
23 Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev 08:02
24 How to Build a Parallax Scrolling Feature 10:47
25 Adding Text Overlays On Top of the Parallax Image 07:13
26 Adding the HTML Structure and Icons for the Feature Section of the Homepage 09:14
27 How to Create Columns with Animated Hover Effects in CSS 13:38
28 Working with nth Child Selectors in CSS 08:18
29 How to Work with Box Shadows in CSS 09:28
30 How to Embed a Google Map into a Website 04:27
31 Building the Footer's HTML Structure 11:29
32 Controlling the Flex Direction to Layout the Footer Styles 09:47
33 How to Apply Filters and Control an Image's Opacity with CSS 02:57
34 Finalizing the Footer Styles 15:55
35 Building the HTML Structure for the About Page Header 06:05
36 How to Skew Images in CSS 16:18
37 Using the CSS Float Property to Have Text Flow Around an Image 14:52
38 Building the Square Grid HTML Structure 08:14
39 Creating a Two Column Layout with CSS Grid and Flexbox 13:01
40 Finalizing the About Page Styles and Review of Code Organization Best Practices 10:15
41 Populating the Menu Page with the Two Column Grid 05:04
42 Guide to HTML Bullet Point and Numbered LIsts 05:14
43 How to Implement Anchor Tags in HTML 07:13
44 Overview of the Before and After Pseudo Selectors in CSS 07:19
45 Creating the Initial Structure for the Contact Page 15:46
46 Building the Contact Page Layout with CSS Grid 09:46
47 Introduction to HTML Form Elements 08:38
48 How to Style Text Inputs with CSS 10:41
49 Styling the Form Textarea and Button 07:30
50 Building the Label and Form Element Drop Shadow Styles 09:08
51 Integrating Custom Form Placeholder Text Styles 02:40
52 How to Animate Form Labels 06:05
53 Finalizing Contact Page Styles 08:45
54 Introduction to CSS Media Queries 13:36
55 Finalizing the Homepage Responsive Styles 06:59
56 Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements 16:06
57 How to Deploy a Static Site to the Web with Netlify 05:03
58 How to Build Animated Flipping Cards Using Just CSS 49:54
59 How to Create Custom Cursors in HTML and CSS 07:52
60 Live Coding Webinar: Build out Tooltips with HTML and CSS 01:06:50
61 Tools We'll Use in the Course 03:53
62 Basic HTML Website Structure 03:47
63 Working with the HTML Head Tag 06:56
64 Creating Page Components with the Div Tag 06:40
65 Implementing Inline Components with the Span Tag 04:55
66 Integrate Headings into Web Pages 05:02
67 Using Multi Line Content with Paragraph Tags 05:24
68 Working with HTML Hyperlinks 04:37
69 Adding Page Breaks with the Horizontal Rule Tag 02:12
70 Integrating Line Breaks into HTML Pages 02:59
71 Creating HTML Numbed Lists 03:48
72 Working with Bullet Point Lists in HTML 05:44
73 Working with Bold HTML Styles 04:12
74 Using the Italic Style for Text 02:28
75 Comprehensive Set of HTML Style Tags 09:04
76 How to Add Images to Websites 06:17
77 Mapping Links on Images 10:41
78 How to work with Custom Tags in HTML 02:59
79 Adding Comments to HTML Code 08:55
80 Guide to Using Web Developer Tools 12:34
81 Working with HTML IDs 05:46
82 Working with HTML Classes 04:11
83 Implementing Inline CSS Styles 07:51
84 Using Embedded CSS Styles 06:36
85 Using CSS Best Practices with External Stylesheets 07:21
86 How to Use CSS Selectors 10:05
87 Using CSS Webkit Animations 05:16
88 How to Add a Background Image to a Website 06:46
89 Adding CSS Border Styles to HTML Elements 04:08
90 Rounding Div Corners with Border Radius Styles 05:44
91 Customizing Height and Width Attributes in CSS 05:15
92 How to Implement Custom Fonts in HTML and CSS 07:04
93 How to Add Custom Font Styles in CSS 06:54
94 How to Properly Center Div Elements on a Page 09:36
95 Working with CSS Pseudo Class Selectors 06:51
96 Implementing Ease In Animations with CSS 06:21
97 Customizing Bullet Points Using CSS 02:33
98 Using the CSS Float Property to Align Page Elements 04:55
99 Introduction to HTML Tables 06:25
100 How to Style HTML Headers 03:10
101 Styling Table Rows 05:54
102 Working with Column Spans 04:23
103 How to Customize Row Sizes in HTML Tables 04:55
104 Introduction to HTML forms 07:58
105 Working with HTML Text Input Fields 11:35
106 How to Use the Text Area HTML Element for Large Amounts of Text Input 06:21
107 How to Use HTML Form Checkboxes 04:37
108 Working with HTML Form Radio Buttons 03:44
109 How to Use Select Boxes in an HTML Form 08:29
110 How to Group Drop Down Form Elements into Categories 04:24
111 Working with HTML Form Calculated Fields 06:50
112 How to Use HTML Entities for Custom Character Values 11:08
113 Google Homepage Project Overview and Instructions 03:01
114 Project Solution: Building the HTML Structure 15:10
115 Project Solution: Integrating the CSS Header and Content Styles 12:14
116 Project Solution: Building the Styles for the Buttons and Footer 08:57
117 Project Solution: CSS Hover Effects for Links 10:39
118 Project Solution: JavaScript Auto Focus and Summary 04:40
119 Pinterest Project Overview and Instructions 04:18
120 Project Solution: Creating the HTML structure for the Pinterest homepage 13:43
121 Project Solution: Customizing the Navigation Header Styles with CSS 11:26
122 Project Solution: Integrating Font Awesome for Website Icons 04:42
123 Project Solution: Styling Font Awesome Icons 04:18
124 Project Solution: Styling Pinterest Pins 14:15
125 Project Solution: Pinterest Homepage Summary 02:49
126 HTML Email Project Overview and Instructions 02:02
127 Project Solution: HTML Email Tag Structure 06:42
128 Project Solution: HTML Email Integration of CSS Styles 10:26
129 Tesla Homepage Clone Overview and Instructions 04:18
130 Project Solution: Tesla Homepage HTML Structure 15:33
131 Project Solution: Customizing the Tesla Homepage Navigation Styles with CSS 08:17
132 Project Solution: Implementing Content Styles and Buttons 10:26
133 Project Solution: Styling the Footer of the Tesla Homepage 03:23
134 Project Solution: Integrating Custom Fonts 03:03
135 Project Solution: Final Project Fixes and Summary 04:44
136 Twitter Bootstrap + Social Network Project Overview and Instructions 06:58
137 Project Solution: Implementing Responsive Tags into the Head Tag 11:27
138 Project Solution: Building the Social Network Navigation Bar 15:10
139 Project Solution: Integrating Responsive Dropdowns with Bootstrap Components 11:47
140 Project Solution: Customizing Content Headings 10:01
141 Project Solution: Final Content Integrations for the Homepage 06:03
142 Project Solution: Implementing CSS Styles 11:58
143 Project Solution: Responsive Media Queries 07:03
144 Project Solution: Bug Fixes 06:58
145 Project Solution: Integrating Custom Fonts 08:40
146 Project Solution: Favicon Integration and Social Network Summary 04:43

Similar courses to HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid

Pixel Perfect Figma to Tailwind
The Ultimate HTML5 & CSS3 Series: Part 3
Modern HTML & CSS From The Beginning Course

Modern HTML & CSS From The Beginning CourseBrad Traversy

Duration 24 hours 21 minutes 52 seconds
Beginner Tailwind

Beginner TailwindChris Sev

Duration 9 hours 33 minutes 19 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2022
100 Days Of Code: The Complete Web Development Bootcamp 2024
The Ultimate HTML5 & CSS3 Series: Part 1
50 Projects In 50 Days - HTML, CSS & JavaScript