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

Let's walk through what you need in order to start building out websites.

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.

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.

In this tutorial, we're going to walk through how links work 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.

Learn how to use CSS selectors and work with HTML classes and IDs.

In this lesson, we're going to start building out this navbar component.

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.

In the last guide, we talked about padding. I think it is a natural progression to now talk about margin.

If you run into any issues with the FontAwesome import, this updated version should take care of it.

In this lesson, we're going to walk through how we can import Font Awesome to start integrating icons into our website.

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.

In this tutorial, we're going to walk through how to work with CSS Grid, and explore some of the functionality it brings.

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.

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.

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.

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.

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.

Nice job in making it this far. We are just about done with the navbar.

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 going to finish out the styles for this hero unit. We're going to style up these two heading elements.

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.

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.

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 going to walk through two different types of lists that you can use 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.

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.

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.

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.

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.

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.

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.

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.

A popular feature that we've been asked for is to show you how you can deploy and share your front end applications with others by using the Netlify platform.

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

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.

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

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.

This guide explains how to build a basic HTML website, including the HTML5 syntax that works with all modern browsers.

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.

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.

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.

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.

This guide explains how you can add multi line content into a website by implementing paragraph (<p>) tags into a website.

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.

This guide shows you how to add a horizontal rule to a web page that separate page components with a horizontal line.

This guide walks through how to use the <br> break tag to add line breaks on a website.

This guide walks you through how to use the HTML Ordered List tag to create numbered lists on a website.

Learn how to use HTML bullet points, including tips on how to give your bullets a unique set of 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.

This guide walks through how to add italics to text components using multiple HTML5 style tag options.

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.

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.

This guide walks through how to mapping feature in HTML to place multiple links on an image based on coordinate values.

This guide walks through how to use custom HTML tags that will allow for explicitly declaring how your code is organized.

In this guide you will learn how to use HTML comments to add documentation to your code base.

Learn how to analyze code in the browser by leveraging the web developer tools provided by Chrome.

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.

This guides explains how to work with HTML classes, which are selector attributes that can be used multiple times on the same page.