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

20h 55m 14s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 146 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: HTML, CSS, Flexbox, and CSS Grid Course Introduction

All Course Lessons (146)

#Lesson TitleDurationAccess
1
HTML, CSS, Flexbox, and CSS Grid Course Introduction Demo
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

Unlock unlimited learning

Get instant access to all 145 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

10 Mega Responsive Websites with HTML, CSS, and JavaScript

10 Mega Responsive Websites with HTML, CSS, and JavaScript

Sources: udemy
Welcome to the brand new course where you can learn about how to create modern and beautiful design templates for your websites. If you want to build and customize your portfoli...
21 hours 54 minutes 19 seconds
Wizard zines. Zine 14 pack

Wizard zines. Zine 14 pack

Sources: Julia Evans
Wizard zines is a little different from other tech publications. Here’s my approach: stick to fundamentals: wizard zines focuses on fundamentals: things that...
The Ultimate HTML5 & CSS3 Series: Part 1

The Ultimate HTML5 & CSS3 Series: Part 1

Sources: codewithmosh (Mosh Hamedani)
Have you always wanted to learn web development but didn't know where to start? Tired of lengthy, boring and outdated courses? This course is for you. A fun...
2 hours 51 minutes 50 seconds
Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwind

Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 seconds