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:
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!
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.
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.
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.
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.
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.
This guide walks through how to add a background image to a website using the CSS background attribute.
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.
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.
This guide explains how to customize the height and width properties of div elements using custom CSS styles.
This guide explains how to integrate custom fonts into an HTML document and then call the fonts from within the CSS files.
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.
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.
In this lesson we will walk through CSS pseudo class selectors to implement custom styles based on stages of the user's interaction.
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.
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.
This guide examines how to utilize the float property. This style will let us align elements side by side on the page.
Learn what HTML tables are, when to use them, and how to create a basic table structure on a website.
Learn how to customize the look and feel of HTML table header, including how to select the color and background components.
In this guide you'll learn how to style table rows, including using the nth child selectors to dynamically style alternating rows.
This guide walks through how to customize the column spans to alter the structure of a table.
This lesson provides a step by step guide for customizing the size of rows in HTML tables.
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.
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.
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.
In this guide you will learn how to use HTML checkboxes into web forms to allow users to select multiple items on a form.
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.
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.
In this lesson you'll learn how to group drop down elements into organized categories for select boxes.
This guide examines the HTML 5 calculated field element that will perform math on form element values, this includes a basic project example.
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.
This guide gives an overview of the project requirements, including instructions for how to build the Google homepage with HTML and CSS.
In this guide you'll learn how to build out the Google homepage HTML structure, including adding the content and customizing the markup language.
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.
This guide walks through how to create the styles for the Google homepage buttons and footer.
In this guide you'll learn how to implement the CSS hover effects for the links on the Google homepage project.
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.
This guide walks through the project solution for building the HTML structure and content for the Pinterest homepage.
Walk through how to add the CSS styles for the navigation element for the Pinterest homepage project.
In this guide we'll walk through how to integrate the Font Awesome library in order to add icons to the Pinterest homepage website.
In this solution guide we examine the steps needed for styling Font Awesome icons in the Pinterest homepage project.
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.
This guide gives an overview of the project to build along with instructions on how to accomplish the features.
This solution guide walks through how to structure the HTML tags in order to integrate content and select tags prior to adding CSS styles.
In this solution guide you'll learn how to integrate CSS styles to customize the styles for the email template.
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.
In this solution we'll walk through how to build the HTML tag structure and integrate the content for the Tesla homepage project.
In this solution guide we'll walk through how to customize the navigation header styles for the Tesla homepage project using CSS.
This solution guides examines how to style the homepage content and buttons with CSS styles for the Tesla project.
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.
This solution guide walks through how to find and implement a custom font into an application using HTML calls and CSS font family attributes.
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.
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.
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.
This solution guide walks through how to integrate drop down components that are rendered differently based on the screen size viewing them.
This solution guide examines how to integrate and customize the content headings for the Social Network homepage.
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.
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.
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.
This guide walks through the final fixes for the code structure in order for all of the styles to work properly.
This guide examines how to integrate custom fonts that are embedded within an application and how to call them from the CSS style files.
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.
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.