HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
4.6 (413 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,600 students enrolled

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

Learn HTML, CSS, Flexbox, and CSS Grid by building a professional website with modern front end development techniques.
4.6 (413 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,600 students enrolled
Created by Jordan Hudgens
Last updated 6/2020
English
English [Auto]
Current price: $51.99 Original price: $74.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 18.5 hours on-demand video
  • 2 articles
  • 2 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 144 lectures 18:42:52
+ Course Introduction and Source Materials
4 lectures 12:59

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.

Preview 02:01

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.

Preview 06:08

In this video, we're going to walk through the website that we're going to build throughout this course.

Preview 04:46
Source Code and Course Assets
00:04
+ HTML and CSS Basics
6 lectures 01:15:38

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

Tools We'll Use in the Course and Basic HTML Structure Overview
17:44

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.

Introduction to Using CSS Styles
12:48

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.

Deep Dive: How the CSS Cascading Process Works
10:29

In this tutorial, we're going to walk through how links work in HTML.

Guide to HTML Links
16:13

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.

Working with the div Tag in HTML
09:51

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

Guide to HTML Classes and IDs
08:33
+ Flexbox, CSS Grid, Animations, and Images
25 lectures 03:51:05

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

Preview 15:39

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.

Guide to Padding in CSS
07:52

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

Guide to Margin in CSS
04:03

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

Course Update: FontAwesome Import Fix
03:06

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

Integrating Icons with Font Awesome
05:21

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.

How to Select and Style Child Tag Elements
08:41

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

Introduction to CSS Grid
13:15

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.

How to Import and Use Custom Fonts in HTML
10:06

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.

How to Import and Style Images in HTML
07:39

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.

Refactoring the CSS Code to Use More Specific Selectors
13:58

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.

Integrating Flexbox Inside of a CSS Grid Container to Align Items
07:21

In this tutorial, we're going to walk through how we can implement animations in HTML and CSS.

Preview 09:17

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.

Styling the Right Column of the Navigation Bar
13:44

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

Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev
08:01

In this guide, we're going to walk through how we can build a parallax image feature into a website completely from scratch.

Preview 10:46

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.

Adding Text Overlays On Top of the Parallax Image
07:12

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.

Adding the HTML Structure and Icons for the Feature Section of the Homepage
09:13

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.

How to Create Columns with Animated Hover Effects in CSS
13:37

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.

Working with nth Child Selectors in CSS
08:17

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.

How to Work with Box Shadows in CSS
09:27

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.

How to Embed a Google Map into a Website
04:26

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.

Building the Footer's HTML Structure
11:28

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.

Controlling the Flex Direction to Layout the Footer Styles
09:46

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.

How to Apply Filters and Control an Image's Opacity with CSS
02:56

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.

Preview 15:54
+ Transforming Image Styles, Box Layouts, and Content Integration
6 lectures 01:08:39

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.

Building the HTML Structure for the About Page Header
06:04

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.

How to Skew Images in CSS
16:17

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.

Using the CSS Float Property to Have Text Flow Around an Image
14:51

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.

Building the Square Grid HTML Structure
08:13

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.

Creating a Two Column Layout with CSS Grid and Flexbox
13:00

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.

Preview 10:14
+ Lists, Anchor Tags and Pseudo Elements
4 lectures 24:46

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.

Populating the Menu Page with the Two Column Grid
05:03

In this lesson we're going to walk through two different types of lists that you can use in HTML.

Guide to HTML Bullet Point and Numbered LIsts
05:13

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.

How to Implement Anchor Tags in HTML
07:12

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.

Preview 07:18
+ HTML Forms
9 lectures 01:18:50

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.

Creating the Initial Structure for the Contact Page
15:45

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.

Building the Contact Page Layout with CSS Grid
09:45

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.

Introduction to HTML Form Elements
08:37

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.

How to Style Text Inputs with CSS
10:40

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.

Styling the Form Textarea and Button
07:29

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.

Building the Label and Form Element Drop Shadow Styles
09:07

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.

Integrating Custom Form Placeholder Text Styles
02:39

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.

How to Animate Form Labels
06:04

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.

Preview 08:44
+ CSS Media Queries
3 lectures 36:38

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.

Preview 13:35

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.

Finalizing the Homepage Responsive Styles
06:58

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.

Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements
16:05
+ Guide to HTML
23 lectures 02:02:36

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.

Tools We'll Use in the Course
03:51

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

Basic HTML Website Structure
03:46
HTML5 Layout Cheat Sheet
00:01

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.

Working with the HTML Head Tag
06:55

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.

Creating Page Components with the Div Tag
06:39

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.

Implementing Inline Components with the Span Tag
04:54

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.

Integrate Headings into Web Pages
05:00

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

Using Multi Line Content with Paragraph Tags
05:23

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.

Working with HTML Hyperlinks
04:36

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

Adding Page Breaks with the Horizontal Rule Tag
02:11

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

Integrating Line Breaks into HTML Pages
02:58

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

Creating HTML Numbed Lists
03:46

Learn how to use HTML bullet points, including tips on how to give your bullets a unique set of styles.

Working with Bullet Point Lists in HTML
05:43

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.

Working with Bold HTML Styles
04:11

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

Using the Italic Style for Text
02:26

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.

Comprehensive Set of HTML Style Tags
09:03

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.

How to Add Images to Websites
06:15

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

Mapping Links on Images
10:40

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

How to work with Custom Tags in HTML
02:57

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

Adding Comments to HTML Code
08:54

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

Guide to Using Web Developer Tools
12:33

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.

Working with HTML IDs
05:45

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

Working with HTML Classes
04:09
HTML Headings
1 question
Working with Classes and IDs
1 question
+ Guide to CSS Styles
16 lectures 01:42:56

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.

Implementing Inline CSS Styles
07:50

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.

Using Embedded CSS Styles
06:35

This guide walks through how to use external CSS stylesheets to properly organize a website codebase. This includes a discussion on system and server paths to ensure that the HTML pages properly call the stylesheet.

Using CSS Best Practices with External Stylesheets
07:19

Learn how to work with the various CSS selectors in this guide. This will give you the ability to target specific elements on a page to add custom styles.

How to Use CSS Selectors
10:04

Learn how to use the powerful Webkit animation library to add animated background colors to HTML div elements on a page. I also discuss the design best practices associated with when to use this approach.

Using CSS Webkit Animations
05:15

This guide walks through how to add a background image to a website using the CSS background attribute.

How to Add a Background Image to a Website
06:44

In this guide we'll walk through how to add custom border elements to HTML page elements, including how to give a custom look and feel to elements in addition to working with standard border styling.

Adding CSS Border Styles to HTML Elements
04:07

In this guide we'll walk through how to use the border radius style element to give divs rounded corners, including using an online tool that gives an instant preview and automated code snippets.

Rounding Div Corners with Border Radius Styles
05:43

This guide explains how to customize the height and width properties of div elements using custom CSS styles.

Customizing Height and Width Attributes in CSS
05:14

This guide explains how to integrate custom fonts into an HTML document and then call the fonts from within the CSS files.

How to Implement Custom Fonts in HTML and CSS
07:03

This guide gives a step by step guide for adding custom font style options in a CSS file to give the text in an HTML document a unique look and feel.

How to Add Custom Font Styles in CSS
06:53

This guide walks through one of the more challenging tasks presented to developers: centering divs on a page. In this lesson we'll examine the proper way to accomplish this task.

How to Properly Center Div Elements on a Page
09:34

In this lesson we will walk through CSS pseudo class selectors to implement custom styles based on stages of the user's interaction.

Working with CSS Pseudo Class Selectors
06:49

This guide gives a step by step approach for implementing the CSS Ease In effect to alter the look and feel of page elements based on user interaction.

Implementing Ease In Animations with CSS
06:20

Learn how to change the look and feel of bullet points (ul items), including various styles that can be selected instead of the default disc option.

Customizing Bullet Points Using CSS
02:32

This guide examines how to utilize the float property. This style will let us align elements side by side on the page.

Using the CSS Float Property to Align Page Elements
04:54
+ Guide to HTML Tables
5 lectures 24:38

Learn what HTML tables are, when to use them, and how to create a basic table structure on a website.

Introduction to HTML Tables
06:23

Learn how to customize the look and feel of HTML table header, including how to select the color and background components.

How to Style HTML Headers
03:08

In this guide you'll learn how to style table rows, including using the nth child selectors to dynamically style alternating rows.

Styling Table Rows
05:53

This guide walks through how to customize the column spans to alter the structure of a table.

Working with Column Spans
04:21

This lesson provides a step by step guide for customizing the size of rows in HTML tables.

How to Customize Row Sizes in HTML Tables
04:53
Requirements
  • Basic computer skills
Description

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:

  • 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.

Who this course is for:
  • Anyone interested in learning what it takes to build websites with HTML and CSS