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.
HTML and CSS Basics
-
1HTML, CSS, Flexbox, and CSS Grid Course Introduction
Welcome to this HTML-CSS Bootcamp course, where you are going to learn how to build a real-world website, and along the way, you're going to be able to learn all about HTML and CSS.
-
2What are HTML and CSS?
In this guide, we're going to answer the question of what are HTML and the CSS. I'm going to give you a very high-level view of them first, and then we're going to talk about each on independently and how they work together, including a small demo at the end so that you can see how vital both of them are.
-
3The Website We're Going to Build in the HTML/CSS Course
In this video, we're going to walk through the website that we're going to build throughout this course.
-
4Source Code and Course Assets
Flexbox, CSS Grid, Animations, and Images
-
5Tools We'll Use in the Course and Basic HTML Structure Overview
Let's walk through what you need in order to start building out websites.
-
6Introduction to Using CSS Styles
Now that you know what an HTML document is, let's get into the role that CSS plays in building out websites. We're also going to build out our structure for the website that we're going to build throughout this course.
-
7Deep Dive: How the CSS Cascading Process Works
If you're new to building websites, the name cascading style sheet may a little bit confusing, so in this guide, I want to go through that just to give you an idea of how important it is.
-
8Guide to HTML Links
In this tutorial, we're going to walk through how links work in HTML.
-
9Working with the div Tag in HTML
In this guide, our goal is going to be to add all of the content in the nav bar, and we're going to be doing that by utilizing the div HTML tag. This will allow us to add in and organize our data in a much more professional manner.
-
10Guide to HTML Classes and IDs
Learn how to use CSS selectors and work with HTML classes and IDs.
Transforming Image Styles, Box Layouts, and Content Integration
-
11Introduction to Flexbox
In this lesson, we're going to start building out this navbar component.
-
12Guide to Padding in CSS
This is going to be a relatively short guide, but we're going to discuss a very important topic in CSS. That topic is padding.
-
13Guide to Margin in CSS
In the last guide, we talked about padding. I think it is a natural progression to now talk about margin.
-
14Course Update: FontAwesome Import Fix
If you run into any issues with the FontAwesome import, this updated version should take care of it.
-
15Integrating Icons with Font Awesome
In this lesson, we're going to walk through how we can import Font Awesome to start integrating icons into our website.
-
16How to Select and Style Child Tag Elements
In this guide, we're going to work more on our icon and hours of operation. The way that we'll do this is utilizing something called "Parent-Child relationships", which will give us greater control in our styles.
-
17Introduction to CSS Grid
In this tutorial, we're going to walk through how to work with CSS Grid, and explore some of the functionality it brings.
-
18How to Import and Use Custom Fonts in HTML
Our navbar is coming along nicely. Along the way, you are learning a lot about HTML and CSS. The next thing that we're going to learn is how to integrate custom fonts.
-
19How to Import and Style Images in HTML
Now let's dive into how we can use images in HTML. Specifically, we are going to take a logo and we're going to place it here at the top of this navbar.
-
20Refactoring the CSS Code to Use More Specific Selectors
In this lesson, we're going to perform some refactoring. If you've never heard of what refactoring is, what it essentially means is when you have code that can be improved.
-
21Integrating Flexbox Inside of a CSS Grid Container to Align Items
In this guide, we're going to work on centering the column element on the page here and we're going to see how we can use CSS grid combined with Flexbox in order to get the type of behavior that we're looking for.
-
22Introduction to CSS Animations
In this tutorial, we're going to walk through how we can implement animations in HTML and CSS.
-
23Styling the Right Column of the Navigation Bar
So you're making great progress and you're learning a lot along the way. You now have about 75% of this nav bar done, and it's just gonna take a couple more tutorials to get us 100% done, and then we can finish off the home page, and I promise you the rest of the site will not take as long as what we've done right here.
-
24Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev
Nice job in making it this far. We are just about done with the navbar.
-
25How to Build a Parallax Scrolling Feature
In this guide, we're going to walk through how we can build a parallax image feature into a website completely from scratch.
-
26Adding Text Overlays On Top of the Parallax Image
In this lesson, we are going to finish out the styles for this hero unit. We're going to style up these two heading elements.
-
27Adding the HTML Structure and Icons for the Feature Section of the Homepage
In this lesson, we are gonna add the HTML content and structure for these three elements. So, we're gonna set it up so that we can create a grid, and then from there we can set up these columns however we want. We can use Flex box. We could use CSS Grid. But, the behavior is gonna be what we have right here where we essentially have one big wrapper div and then we have three columns inside of that.
-
28How to Create Columns with Animated Hover Effects in CSS
In this lesson, we're going to walk through how we can implement the feature section styles. Just as a quick refresher, we want them to look something like this. Now, I'm not going to implement the shadow because I'm going to do that in a dedicated guide because working with box shadows is not as easy as you may think, especially if it's the first time you've done it, so I want to spend an entire section just dedicated to that. We're just going to implement the styles. We're going to use Flexbox, and we're going to see how we can align these all and style them properly.
-
29Working with nth Child Selectors in CSS
One of the more confusing aspects of working with CSS is the nth child selector, and if you have never even heard of that, that's perfectly fine. The way that it looks is nth, as in nth child. Like this. Now, if you've never seen it, never worked with it before, it's perfectly fine. I'm going to teach it a little bit different than I've seen before. Many of the tutorials that I've seen that try to explain it in a sense almost confuse it even more, and I think that that's a mistake, because at the end of the day the nth child selector just gives you very granular control on a numerical basis on which items you want to select, and if hearing that definition just makes you even more confused, let's just kind of walk through a visual way of doing it.
-
30How to Work with Box Shadows in CSS
In this tutorial, we're going to walk through how we can add a box shadow in CSS and, specifically, we're going to add a shadow that looks like this, where we have a box shadow. It's called an inset box shadow. What it does is it can give a little bit of depth to elements on the page. Right here, you can see how we have the map, and because it has the box shadow inset, inside of this section, it almost looks like we have a real world map that is sitting on top of this.
-
31How to Embed a Google Map into a Website
In this lesson, we're going to walk through how we can add a Google map to our application and how we can embed it. So, I'm going to go back to our project. If you go to maps.google.com, this is going to be a relatively straightforward process, even if you've never done it before. If you go and search for an address or some business ... I'll pick out one of my favorites, Diego Pops in Scottsdale, Arizona. If you search for that, and then go and click the Share icon here, and Google at some point will most likely change the look and feel, and so the Share icon may not be in this spot or it may look a little bit different. But, they will have some way of sharing and embedding the map, because this is a very popular feature.
-
32Building the Footer's HTML Structure
Now that we have our map in-place, let's start by building our footer. Now, as you may have guessed, we're going to follow the same pattern we've been following for this entire course, where we add all of the HTML code that we need and build the structure. And then, after that, we will go and we'll add the styles. So, right here, we can see that we have an image, and then we have a phone number, a set of hours, our knav links, and then some social media sharing icons and then a little copyright symbol down at the bottom. Now, I'm going to ask you to do something, and it's completely up to you if you want to do it or not. But, by now, we have covered all of the skills that you will need in order to implement what I'm showing you right here.
-
33Controlling the Flex Direction to Layout the Footer Styles
Now that we have the HTML structure all in place, now let's start adding the styles. So right here you can see that we have a footer class wrapper right here, so this is gonna be I think the best place to start. I'm gonna come into the common styles because these footer styles are gonna be common and I think it'll be good later on to refactor it out into it's own little module. So I'm gonna here say footer styles and we'll start off with our main footer class.
-
34How to Apply Filters and Control an Image's Opacity with CSS
This is gonna be a fun and pretty quick tutorial on how we can control the brightness of an image using just CSS. So as you can see right there for this logo, right now it is just the basic white that came in from the image. But what we wanna do is if you come here and see the finished version, we want to have a little bit of a light gray color and you may think that you need to just get another image, redo it in Photoshop or something like that but using CSS we actually have the ability to manage this and that's what we're gonna go through and I'm gonna show you two different ways that you can manage the brightness or kind of the coloring for images in HTML. So what I'm gonna do here is I've selected the image and I am going to start off using one process.
-
35Finalizing the Footer Styles
Now that we have our image style the way we want it to be, it's time to finish the rest of the styles, here on the footer, and this is actually the second time I've filmed this. I filmed the entire episode and finished out the rest of the homepage only to discover that the microphone was not plugged in, so that wasn't a fun discovery. But anyway, we are back here.
Lists, Anchor Tags and Pseudo Elements
-
36Building the HTML Structure for the About Page Header
In this lesson, we're gonna walk through how we can start building the "About Us" page. So, we're gonna start with this header element, and we're also gonna bring in all of the common styles, fonts, and all of those types of dependencies into the project. So, I have the "About" page here, which right now is pretty boring but that is about to change. So, let's open up our file system. And moving to the "About" page, we're going to be able to reuse quite a bit of what we have in the index. So, let's actually get rid of everything here, and I'm going to grab the first content here at the top of the index page.
-
37How to Skew Images in CSS
In this tutorial, we're going to walk through how we can leverage CSS's transform property in order to create these types of skewed images. We're also going to walk through how we can work with the absolute and relative positioning, so that we can have page elements, such as this heading and this nav bar, to sit on top of this image.
-
38Using the CSS Float Property to Have Text Flow Around an Image
With our skewed image complete, or next task is going to be to add the page content here. And we're also going to learn how we can have a featured image and have the content flowing around it. So this is gonna be another really good guide. Because this is gonna be a task that you're most likely gonna have to implement in some form or another.
-
39Building the Square Grid HTML Structure
Moving our way down the about us page, you can see the next component that we're going to build is going to be this box grid. There is a very important reason why I picked out this specific type of layout and I did it for multiple pages. I did it on the about page and the menu page is pretty much this entire set of images and then right next to the images are the content elements. The reason why I did that was because one, I've been asked to build this type of layout many times and so I'm assuming that at some point in your career you'll be asked to work on this kind of system as well. In addition to that, this type of layout will force you to really reinforce a lot of the concepts that we've learned so far.
-
40Creating a Two Column Layout with CSS Grid and Flexbox
Now that we have all of our content here, I think we are ready to add our square styles, and I think you'll also be pleasantly surprised by how little amount of code you're going to have to write in order to get this working.
-
41Finalizing the About Page Styles and Review of Code Organization Best Practices
So, now that we have our two column grid layout finished and that's looking good, and everything else on the page is really coming along nicely. The last element that we wanna integrate is the footer. We wanna have the same exact footer that we had here on the home page. So, we can simply bring that in, and let's see how that works.
HTML Forms
-
42Populating the Menu Page with the Two Column Grid
In this section of the course, we are gonna walk through how to build out the menu page. Now, this is gonna be a pretty quick section. And, like I mentioned in the previous video, we actually are gonna build out all of the real functionality for the menu page all in a single video. So that should be pretty cool. That's what we're gonna do right now. And then, later on, we're gonna learn about things like bullet points and some of the other features that are on this page.
-
43Guide to HTML Bullet Point and Numbered LIsts
In this lesson we're going to walk through two different types of lists that you can use in HTML.
-
44How to Implement Anchor Tags in HTML
In this lesson we're gonna learn how to work with Anchor Links inside of HTML. Now if you've never heard of what an Anchor Link is that's perfectly fine, we're gonna do a little demo to see what an Anchor Link does and that may also help explain why you'd want to use them.
-
45Overview of the Before and After Pseudo Selectors in CSS
The common question I get from students relates to the before and after pseudo selectors. And so in this guide, I want to walk through a dead simple explanation for how they work. And what we're gonna do is, we have our links right here on the menu and I want to add a little link icon right to the right of each one of them. Now technically I could just go to Font Awesome and then we could put an icon, place it inside of that H1 tag, but then we'd have to do it for each one of these elements. But what if we want to have every anchor tag in the entire application to have a link there? Well that is a perfect scenario for using an after, or a before pseudo selectors. Let's talk about what they are because they can look a little bit confusing if you've never seen them. But I think that after we walk through this demo, it's gonna make a lot more sense.
CSS Media Queries
-
46Creating the Initial Structure for the Contact Page
You've done an amazing job making it this far through the course, and you've built out a pretty cool website in a relatively short period of time and we're on our final page. Right here I saved one of the coolest features we were gonna build for the very end. So right here you can see this form for the contact page and we're also gonna learn how we can integrate some really neat animations.
-
47Building the Contact Page Layout with CSS Grid
Now that we have all of our HTML in place, let's start styling this. So right now we have this gigantic log, we have our sidebar content and then we have what's gonna be the form kind of all sitting on top of each other.
-
48Introduction to HTML Form Elements
In this lesson we are going to build out our HTML form. We're not going to try to style it or anything like that. Forms can be one of the more confusing topics in the world of web development and so I want to take it nice and slow so that you are completely familiar with everything that we're working on.
-
49How to Style Text Inputs with CSS
Now that we have all of the HTML that we're gonna need in order to build out our form, now we can start styling it.
-
50Styling the Form Textarea and Button
So now that we have some of the base styles for our two text inputs, I think it's natural to move to the text area. Then we'll do the button and then after that we're going to circle back and that's where we'll start polishing things up.
-
51Building the Label and Form Element Drop Shadow Styles
Now that we have the base styles for our text inputs, our message text area, and then our button all in place, I think it is time to work on the next major item, which is going to be the label.
-
52Integrating Custom Form Placeholder Text Styles
We're making great progress on this form. We're getting pretty close to being done. The next item that we're going to take care of is how to update the placeholder value. Right here, we're increasing the font, but we're not really stylizing the placeholder the way that we'd like to. If you want to see the difference right here, you see how we're using that dark blue color for the text area and the input, that is what we're going to do in this guide, so let's switch to the code, and I'm going to come down below the text area and the input because this is going to be shared. This is going to be one where we're going to be able to update the input placeholder for the text area and the input all at the same time.
-
53How to Animate Form Labels
Okay, it is time for the moment of truth here. We are going to build out this full animation, so that when we click on anyone one of the form inputs, the place holder is going to go away, and then our little label is going to slide down. So, our current state right now is it works as far as the animation on the box shadow, but we are currently showing the label. We want to hide that by default, and then we want to show it, and reveal it, make it look like it's sliding down whenever the user clicks on the input, or the text area.
-
54Finalizing Contact Page Styles
In this video we are going to finalize the styles on the contact page and I've seen three items that I'd like to clean up. The first one is that, if you notice, whenever you click on one of these elements do you notice how we have duplicate labels? We have the place holder here and then we have the label moving down and I'm not really a fan of that. I'd rather have the entire place holder disappear whenever this focus event occurs, so that's one item. Then I also want to move the send button in the center and move it down a little bit, and then each one of these icons should be our gold color. Let's address each one of those items and we'll be done with the desktop version of the application.
Site Deployment
-
55Introduction to CSS Media Queries
Let's talk about media queries. And if you've never heard of what a media query is, that's perfectly fine. We're going to start from the ground up. A media query is a tool in CSS that allows for us to implement responsive design elements. When I say responsive, what I mean is what I'm going to show you right here. I have two nearly identical sites. One is responses and uses media queries, and the other one is not. We're going to walk through, after this demo, we're going to walk through the code and we're going to implement a full media query for this homepage. Let's first look at a media query based site. If I open this up, what I can do is it looks good on desktop and then if I were to access this on a mobile device, which I can mimic by just bringing this down here, you can see that the entire site readjusts. This is what someone coming on an Android or an iPhone would see. You notice how we have the logo has readjusted. It's now at the top. And then we have the navigation elements are stacked on top of each other. And then the same thing with the contact information.
-
56Finalizing the Homepage Responsive Styles
In this lesson we are going to continue adding media query styles, and so the way that I like to think about this, if media queries are still a little bit foreign or hard to understand, is I like to think about media query as almost as if they are a site within your site, and so think about these styles as being these styles that you would build if you had to design a page that would live just inside of this size screen. That's the way that media queries really made sense to me.
-
57Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements
Now that we have the homepage completed, let's move down the line and work on the about page. Now this looks quite a bit different because it doesn't have any other responsive elements yet, and the very first step that we need to take is to open up that about file, and import our media queries. So I'm going to pull this down, and import the media queries file, if you hit save, now you can see that it's adjusted and you have the Nav element stacked on top of each other, but now we need to update this entire skewed header component.
HTML and CSS Tips and Tricks
Guide to HTML
-
59HTML and CSS Tips and Tricks Section
-
60How to Build Animated Flipping Cards Using Just CSS
Learn how to build animated flipping cards using only HTML and CSS. After going through this code tutorial, you'll be able to:
Implement a website layout using both Flexbox and CSS Grid elements
Work with CSS variables
Build animated styles into websites
-
61How to Create Custom Cursors in HTML and CSS
This deep dive on HTML/CSS cursors explains how to work with the various cursor options in websites, along with how you can create and implement your own custom cursor.
-
62Live Coding Webinar: Build out Tooltips with HTML and CSS
In this live coding workshop, you'll learn how to:
Design a pricing table
Utilize object-fit to get images of varied sizes to fit in a layout
Utilize advanced techniques for managing border radius styles
Implement media queries for mobile responsive behavior
Build a tooltip feature using HTML and CSS
Guide to CSS Styles
-
63Archived Course
-
64Tools We'll Use in the Course
In this guide I walk through the tools that we'll use in this course, including a discussion on what IDEs and Text Editors are best for HTML/CSS Development. I also examine the Espresso editor that I will use for demonstration purposes.
-
65Basic HTML Website Structure
This guide explains how to build a basic HTML website, including the HTML5 syntax that works with all modern browsers.
-
66HTML5 Layout Cheat Sheet
-
67Working with the HTML Head Tag
This tutorial explains how to use the HTML <head> tag to encapsulate meta data that is processed by the browser, including the website title, SEO data, and encoding.
-
68Creating Page Components with the Div Tag
This guide examines one of the tools that you will use constantly when working with HTML projects: the <div> tag. In this material you will learn how to structure a site and organize page components using the div tag syntax.
-
69Implementing Inline Components with the Span Tag
This guide explains how to use the <span> tag to customize the look and feel of inline content and organize code components inside of divs.
-
70Integrate Headings into Web Pages
In this guide you will learn how to add headings to a web site, including working with all the heading options that will automatically alter the size and emphasis for content.
-
71Using Multi Line Content with Paragraph Tags
This guide explains how you can add multi line content into a website by implementing paragraph (<p>) tags into a website.
-
72Working with HTML Hyperlinks
This guides examines how to add HTML hyperlinks to web pages, including options that include linking to 3rd party website and opening up new tabs when a link it clicked.
-
73Adding Page Breaks with the Horizontal Rule Tag
This guide shows you how to add a horizontal rule to a web page that separate page components with a horizontal line.
-
74Integrating Line Breaks into HTML Pages
This guide walks through how to use the <br> break tag to add line breaks on a website.
-
75Creating HTML Numbed Lists
This guide walks you through how to use the HTML Ordered List tag to create numbered lists on a website.
-
76Working with Bullet Point Lists in HTML
Learn how to use HTML bullet points, including tips on how to give your bullets a unique set of styles.
-
77Working with Bold HTML Styles
This guide explains how to make text bold by using the <b> and <strong> HTML tags, including walking through when you should choose one tag over the other.
-
78Using the Italic Style for Text
This guide walks through how to add italics to text components using multiple HTML5 style tag options.
-
79Comprehensive Set of HTML Style Tags
This guide walks through how to use the full list of built in HTML style tags, including tags for showcasing mathematical equations, highlighting text, and many more.
-
80How to Add Images to Websites
This guide walks through how to add images to websites with the <img> tag, including an examination of the various style options you can apply to the pictures.
-
81Mapping Links on Images
This guide walks through how to mapping feature in HTML to place multiple links on an image based on coordinate values.
-
82How to work with Custom Tags in HTML
This guide walks through how to use custom HTML tags that will allow for explicitly declaring how your code is organized.
-
83Adding Comments to HTML Code
In this guide you will learn how to use HTML comments to add documentation to your code base.
-
84Guide to Using Web Developer Tools
Learn how to analyze code in the browser by leveraging the web developer tools provided by Chrome.
-
85Working with HTML IDs
This guide examines how to set and work with an HTML ID, this is a key concept to learn because IDs will be one of the ways that you can select page elements to apply styles.
-
86Working with HTML Classes
This guides explains how to work with HTML classes, which are selector attributes that can be used multiple times on the same page.
-
87HTML Headings
-
88Working with Classes and IDs