HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
- 18.5 hours on-demand video
- 2 articles
- 2 coding exercises
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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.
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.
In this video, we're going to walk through the website that we're going to build throughout this course.
In this lesson, we're going to start building out this navbar component.
In this tutorial, we're going to walk through how we can implement animations in HTML and CSS.
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.
In this guide, we're going to walk through how we can build a parallax image feature into a website completely from scratch.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This guide walks through how to use Inline CSS styles. This approach allows developers to add styles to a specific element on a web site. While this is an easy approach it's main purpose is for testing out styles, using inline CSS styles in a production application is considered a poor practice.
Learn how to utilize embedded stylesheets to organize your styles in the same file as the HTML code. This is a helpful tool when building websites, however this is still considered a poor practice for production applications and should only be used for debugging and development.
- Basic computer skills
Update December 2019: Added an update for students running into issues importing FontAwesome.
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:
Media queries for building responsive layouts from scratch
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.
- Anyone interested in learning what it takes to build websites with HTML and CSS