HTML/CSS Bootcamp
4.2 (29 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
206 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML/CSS Bootcamp to your Wishlist.

Add to Wishlist

HTML/CSS Bootcamp

Learn HTML5 and CSS3 from scratch, starting with the basics and finishing by building five projects from scratch.
4.2 (29 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
206 students enrolled
Created by Jordan Hudgens
Last updated 10/2016
English
Curiosity Sale
Current price: $10 Original price: $40 Discount: 75% off
30-Day Money-Back Guarantee
Includes:
  • 10 hours on-demand video
  • 1 Article
  • 2 Coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build websites using HTML and CSS
  • Working with HTML5 code elements
  • Use CSS styles to design websites
  • Create responsive websites that render custom layouts for smartphones, tablets and desktops
  • Work with images
  • Learning how to lay out elements on a web page
  • Integrate custom fonts
  • Using CSS based animations
  • Use links with various options
  • Build real world projects
  • Create HTML forms for getting user input
View Curriculum
Requirements
  • Basic computer skills
Description

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.

After you have completed this course you will be able to build real world websites and learn the same concepts taught at the devCamp code camps. Additionally, because this is a project based course, after you've gone through the lessons you will have a full website portfolio.

We'll start out by working through the syntax and best practices for HTML and CSS, including a strong focus on industry practices that are expected by web developers. After traversing the basics we're going to build five real world websites. By taking a project based approach you will learn practical skills that you can translate directly into your own applications. For the project sections of the course we'll: build the Google, Pinterest, and Tesla homepages, completely from scratch. Additionally, we'll walk through how to build an HTML email. And our final project will be a social network homepage that I hired a designer to create specifically for this course.

Additionally you will learn concepts such as:

  • How to create a responsive website that renders a different layout for smartphones, tablets and desktop browsers.
  • Building HTML forms for getting user input.
  • Creating CSS based animations for adding a unique design to websites.
  • Work with the Twitter Bootstrap HTML/CSS framework to build modern websites.

As helpful as it is to follow along with step by step guides, I have higher expectations for this course. My goal is that you will learn, not only how to follow along, but that you'll learn how the principles of HTML and CSS work at their core. This is a vital point of differentiation between this course and other front end tutorials I've come across.

There are no technical pre-requisites to this course. The ideal student is an individual who wants to learn how to build and style websites, with a focus on real world development. Throughout the lessons I switch between a Mac and PC and you can use either operating system to follow along with the course material.

Each lesson of the course is paired with the source code that I used in the lecture so you can check your work. Additionally, the course has quizzes and coding challenges that will help reinforce your knowledge.

Please feel free to review the course curriculum and I look forward to going through the material with you on your development journey!

Who is the target audience?
  • Anyone interested in learning what it takes to build websites with HTML and CSS
Students Who Viewed This Course Also Viewed
Curriculum For This Course
87 Lectures
09:54:16
+
Guide to HTML
23 Lectures 02:02:37

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.

Preview 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:02

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.

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

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

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

Preview 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
+
Guide to HTML Forms
9 Lectures 01:04:51

This guide walks through HTML form basics, including a discussion on how forms work and what code needs to be implemented for a basic form structure.

Introduction to HTML forms
07:57

In this guide you will learn how to integrate HTML text input fields, including a discussion for how to nest input fields inside of an HTML form structure.

Working with HTML Text Input Fields
11:34

This guide gives a step by step set of instructions for how to add HTML text area fields to a form, including an explanation on how to customize the size of text area fields.

How to Use the Text Area HTML Element for Large Amounts of Text Input
06:19

In this guide you will learn how to use HTML checkboxes into web forms to allow users to select multiple items on a form.

How to Use HTML Form Checkboxes
04:36

This guide gives a step by step set of instructions for how to integrate radio buttons into an HTML form. This will allow users to select boolean value types.

Working with HTML Form Radio Buttons
03:42

This guide explains how to integrate a select drop down box into an HTML form, including a number of the options available to select box elements.

How to Use Select Boxes in an HTML Form
08:27

In this lesson you'll learn how to group drop down elements into organized categories for select boxes.

How to Group Drop Down Form Elements into Categories
04:22

This guide examines the HTML 5 calculated field element that will perform math on form element values, this includes a basic project example.

Working with HTML Form Calculated Fields
06:48

In this lesson you will learn how to use HTML entities in order to safely render special characters on a webpage, along with the reason why entities are important.

How to Use HTML Entities for Custom Character Values
11:06
+
Project: Create the Google Homepage
6 Lectures 54:35

This guide gives an overview of the project requirements, including instructions for how to build the Google homepage with HTML and CSS.

Google Homepage Project Overview and Instructions
03:00

In this guide you'll learn how to build out the Google homepage HTML structure, including adding the content and customizing the markup language.

Project Solution: Building the HTML Structure
15:09

This lesson examines how the CSS header and content styles can be implemented in order to build out the navigation component for the Google homepage.

Project Solution: Integrating the CSS Header and Content Styles
12:13

This guide walks through how to create the styles for the Google homepage buttons and footer.

Project Solution: Building the Styles for the Buttons and Footer
08:56

In this guide you'll learn how to implement the CSS hover effects for the links on the Google homepage project.

Project Solution: CSS Hover Effects for Links
10:38

This final video in the Google homepage project section walks through how to add a JavaScript auto focus solution and examines a summary of the project.

Preview 04:39
+
Project: Create the Pinterest Homepage
7 Lectures 55:23

This guide describes the website that we'll be building, including a discussion of the tools to utilize and some recommendations on how to build out the project using HTML5, CSS3, and Font Awesome icons.

Pinterest Project Overview and Instructions
04:17

This guide walks through the project solution for building the HTML structure and content for the Pinterest homepage.

Project Solution: Creating the HTML structure for the Pinterest homepage
13:42

Walk through how to add the CSS styles for the navigation element for the Pinterest homepage project.

Project Solution: Customizing the Navigation Header Styles with CSS
11:25

In this guide we'll walk through how to integrate the Font Awesome library in order to add icons to the Pinterest homepage website.

Project Solution: Integrating Font Awesome for Website Icons
04:41

In this solution guide we examine the steps needed for styling Font Awesome icons in the Pinterest homepage project.

Project Solution: Styling Font Awesome Icons
04:17

In this guide we will walk through how to style the Pinterest pins to allow them to fit into each other in a grid style format using CSS styles.

Project Solution: Styling Pinterest Pins
14:14

This guide walks through a summary of the Pinterest homepage project and discusses the code elements that made the solution possible.

Preview 02:47
+
Project: Create HTML Email Template
3 Lectures 19:07

This guide gives an overview of the project to build along with instructions on how to accomplish the features.

HTML Email Project Overview and Instructions
02:01

This solution guide walks through how to structure the HTML tags in order to integrate content and select tags prior to adding CSS styles.

Project Solution: HTML Email Tag Structure
06:41

In this solution guide you'll learn how to integrate CSS styles to customize the styles for the email template.

Project Solution: HTML Email Integration of CSS Styles
10:25
+
Project: Create Tesla Homepage
7 Lectures 49:37

This guide walks through the project requirements for the Tesla homepage clone project, including the overview of what we are going to build along with how to get resources such as the SVG image.

Tesla Homepage Clone Overview and Instructions
04:17

In this solution we'll walk through how to build the HTML tag structure and integrate the content for the Tesla homepage project.

Project Solution: Tesla Homepage HTML Structure
15:32

In this solution guide we'll walk through how to customize the navigation header styles for the Tesla homepage project using CSS.

Project Solution: Customizing the Tesla Homepage Navigation Styles with CSS
08:16

This solution guides examines how to style the homepage content and buttons with CSS styles for the Tesla project.

Project Solution: Implementing Content Styles and Buttons
10:25

This solution guide examines how to integrate the styles for the Tesla homepage footer, including how to update the links styles to function like a secondary navigation bar located on the bottom of the page.

Project Solution: Styling the Footer of the Tesla Homepage
03:22

This solution guide walks through how to find and implement a custom font into an application using HTML calls and CSS font family attributes.

Project Solution: Integrating Custom Fonts
03:02

This guide walks through the final project fixes and gives a final walk through of all the systems utilized in order to build out the Tesla homepage project.

Preview 04:43
+
Project: Using Bootstrap and a Website Template to Design a Social Network
11 Lectures 01:40:33

In this guide I walk through the project that we're going to build along with instructions on how to work with the source files. This project is different than the other projects since it's too extensive to build completely from scratch. Instead we're going to follow a real world project build process where we work with outside libraries such as the Twitter Bootstrap framework and a design sent over from a UI designer. And we'll walk through each of the key components for building responsive HTML/CSS websites.

Twitter Bootstrap + Social Network Project Overview and Instructions
06:57

This guide walks through how to integrate responsive meta data components into the head tag to allow the website to render a different layout based on screen size.

Project Solution: Implementing Responsive Tags into the Head Tag
11:26

This solution guide examines how to implement a navigation bar into the social network project, including how to work with the Twitter Bootstrap grid system.

Project Solution: Building the Social Network Navigation Bar
15:08

This solution guide walks through how to integrate drop down components that are rendered differently based on the screen size viewing them.

Project Solution: Integrating Responsive Dropdowns with Bootstrap Components
11:45

This solution guide examines how to integrate and customize the content headings for the Social Network homepage.

Project Solution: Customizing Content Headings
09:59

In this guide we'll walk through adding the final content items for the social network, spending specific time to analyzing how it works within the grid layout provided by Twitter Bootstrap.

Project Solution: Final Content Integrations for the Homepage
06:01

This solution guide walks through how to copy over the CSS styles for the social network, including how to organize the file structure and call the items from within the HTML file.

Project Solution: Implementing CSS Styles
11:57

In this guide we walk through how to use media queries in order to customize how a website responds when accessed by smartphones, tablets, and desktop browsers.

Project Solution: Responsive Media Queries
07:02

This guide walks through the final fixes for the code structure in order for all of the styles to work properly.

Project Solution: Bug Fixes
06:57

This guide examines how to integrate custom fonts that are embedded within an application and how to call them from the CSS style files.

Project Solution: Integrating Custom Fonts
08:39

In this guide we'll walk through how to integrate a custom favicon into a website along with examining all of the tools we used to build the website.

Preview 04:42
About the Instructor
Jordan Hudgens
4.5 Average rating
2,764 Reviews
30,675 Students
19 Courses
CTO at devCamp

Jordan Hudgens is the CTO and Founder of DevCamp where he leads instruction and curriculum development for all of the DevCamp and Bottega code schools around the US.

As a developer for over the past decade, Jordan has traveled the world building applications and training individuals on a wide variety of topics, including: Ruby development, big data analysis, and software engineering.

Jordan focuses on project driven education, as opposed to theory based development. This style of teaching is conducive to learning how to build real world products that adhere to industry best practices.

Additionally Jordan has published multiple books on programming and computer science, along with developing training curriculum for Learn.co, devCamp, and AppDev on the topics of Ruby on Rails, Java, AngularJS, NoSQL, API development, and algorithms.