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

HTML/CSS Bootcamp – Learn HTML, CSS, Flexbox, and CSS Grid, available at $79.99, has an average rating of 4.35, with 150 lectures, 2 quizzes, based on 796 reviews, and has 3056 subscribers.

You will learn about 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 This course is ideal for individuals who are Anyone interested in learning what it takes to build websites with HTML and CSS It is particularly useful for Anyone interested in learning what it takes to build websites with HTML and CSS.

Enroll now: HTML/CSS Bootcamp – Learn HTML, CSS, Flexbox, and CSS Grid

Summary

Title: HTML/CSS Bootcamp – Learn HTML, CSS, Flexbox, and CSS Grid

Price: $79.99

Average Rating: 4.35

Number of Lectures: 150

Number of Quizzes: 2

Number of Published Lectures: 150

Number of Published Quizzes: 2

Number of Curriculum Items: 152

Number of Published Curriculum Objects: 152

Original Price: $64.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Anyone interested in learning what it takes to build websites with HTML and CSS

Target Audiences

Anyone interested in learning what it takes to build websites with HTML and CSS

Update April 2021:Added a guide showing how to create a custom cursor in HTML/CSS. Also added a one hour live coding workshop that teaches how to build out tooltips on a website.

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. In addition to being the lead instructor for devCamp I’ve also been building web applications for over a decade for organizations such as Eventbrite and Quip.

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.

Course Curriculum

Chapter 1: Course Introduction and Source Materials

Lecture 1: HTML, CSS, Flexbox, and CSS Grid Course Introduction

Lecture 2: What are HTML and CSS?

Lecture 3: The Website We're Going to Build in the HTML/CSS Course

Lecture 4: Source Code and Course Assets

Chapter 2: HTML and CSS Basics

Lecture 1: Tools We'll Use in the Course and Basic HTML Structure Overview

Lecture 2: Introduction to Using CSS Styles

Lecture 3: Deep Dive: How the CSS Cascading Process Works

Lecture 4: Guide to HTML Links

Lecture 5: Working with the div Tag in HTML

Lecture 6: Guide to HTML Classes and IDs

Chapter 3: Flexbox, CSS Grid, Animations, and Images

Lecture 1: Introduction to Flexbox

Lecture 2: Guide to Padding in CSS

Lecture 3: Guide to Margin in CSS

Lecture 4: Course Update: FontAwesome Import Fix

Lecture 5: Integrating Icons with Font Awesome

Lecture 6: How to Select and Style Child Tag Elements

Lecture 7: Introduction to CSS Grid

Lecture 8: How to Import and Use Custom Fonts in HTML

Lecture 9: How to Import and Style Images in HTML

Lecture 10: Refactoring the CSS Code to Use More Specific Selectors

Lecture 11: Integrating Flexbox Inside of a CSS Grid Container to Align Items

Lecture 12: Introduction to CSS Animations

Lecture 13: Styling the Right Column of the Navigation Bar

Lecture 14: Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev

Lecture 15: How to Build a Parallax Scrolling Feature

Lecture 16: Adding Text Overlays On Top of the Parallax Image

Lecture 17: Adding the HTML Structure and Icons for the Feature Section of the Homepage

Lecture 18: How to Create Columns with Animated Hover Effects in CSS

Lecture 19: Working with nth Child Selectors in CSS

Lecture 20: How to Work with Box Shadows in CSS

Lecture 21: How to Embed a Google Map into a Website

Lecture 22: Building the Footer's HTML Structure

Lecture 23: Controlling the Flex Direction to Layout the Footer Styles

Lecture 24: How to Apply Filters and Control an Image's Opacity with CSS

Lecture 25: Finalizing the Footer Styles

Chapter 4: Transforming Image Styles, Box Layouts, and Content Integration

Lecture 1: Building the HTML Structure for the About Page Header

Lecture 2: How to Skew Images in CSS

Lecture 3: Using the CSS Float Property to Have Text Flow Around an Image

Lecture 4: Building the Square Grid HTML Structure

Lecture 5: Creating a Two Column Layout with CSS Grid and Flexbox

Lecture 6: Finalizing the About Page Styles and Review of Code Organization Best Practices

Chapter 5: Lists, Anchor Tags and Pseudo Elements

Lecture 1: Populating the Menu Page with the Two Column Grid

Lecture 2: Guide to HTML Bullet Point and Numbered LIsts

Lecture 3: How to Implement Anchor Tags in HTML

Lecture 4: Overview of the Before and After Pseudo Selectors in CSS

Chapter 6: HTML Forms

Lecture 1: Creating the Initial Structure for the Contact Page

Lecture 2: Building the Contact Page Layout with CSS Grid

Lecture 3: Introduction to HTML Form Elements

Lecture 4: How to Style Text Inputs with CSS

Lecture 5: Styling the Form Textarea and Button

Lecture 6: Building the Label and Form Element Drop Shadow Styles

Lecture 7: Integrating Custom Form Placeholder Text Styles

Lecture 8: How to Animate Form Labels

Lecture 9: Finalizing Contact Page Styles

Chapter 7: CSS Media Queries

Lecture 1: Introduction to CSS Media Queries

Lecture 2: Finalizing the Homepage Responsive Styles

Lecture 3: Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements

Chapter 8: Site Deployment

Lecture 1: How to Deploy a Static Site to the Web with Netlify

Chapter 9: HTML and CSS Tips and Tricks

Lecture 1: HTML and CSS Tips and Tricks Section

Lecture 2: How to Build Animated Flipping Cards Using Just CSS

Lecture 3: How to Create Custom Cursors in HTML and CSS

Lecture 4: Live Coding Webinar: Build out Tooltips with HTML and CSS

Chapter 10: Guide to HTML

Lecture 1: Archived Course

Lecture 2: Tools We'll Use in the Course

Lecture 3: Basic HTML Website Structure

Lecture 4: HTML5 Layout Cheat Sheet

Lecture 5: Working with the HTML Head Tag

Lecture 6: Creating Page Components with the Div Tag

Lecture 7: Implementing Inline Components with the Span Tag

Lecture 8: Integrate Headings into Web Pages

Lecture 9: Using Multi Line Content with Paragraph Tags

Lecture 10: Working with HTML Hyperlinks

Lecture 11: Adding Page Breaks with the Horizontal Rule Tag

Lecture 12: Integrating Line Breaks into HTML Pages

Lecture 13: Creating HTML Numbed Lists

Lecture 14: Working with Bullet Point Lists in HTML

Lecture 15: Working with Bold HTML Styles

Lecture 16: Using the Italic Style for Text

Lecture 17: Comprehensive Set of HTML Style Tags

Lecture 18: How to Add Images to Websites

Lecture 19: Mapping Links on Images

Lecture 20: How to work with Custom Tags in HTML

Lecture 21: Adding Comments to HTML Code

Lecture 22: Guide to Using Web Developer Tools

Lecture 23: Working with HTML IDs

Lecture 24: Working with HTML Classes

Chapter 11: Guide to CSS Styles

Lecture 1: Implementing Inline CSS Styles

Instructors

Jordan Hudgens
CTO at Bottega Code School

Rating Distribution

1 stars: 6 votes
2 stars: 9 votes
3 stars: 50 votes
4 stars: 240 votes
5 stars: 491 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu