English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 18.5 Hours | 6.49 GB
Learn HTML, CSS, Flexbox, and CSS Grid by building a professional website with modern front end development techniques.
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.
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
Table of Contents
Course Introduction and Source Materials
1 HTML, CSS, Flexbox, and CSS Grid Course Introduction
2 What are HTML and CSS
3 The Website We’re Going to Build in the HTMLCSS Course
4 Source Code and Course Assets
HTML and CSS Basics
5 Tools We’ll Use in the Course and Basic HTML Structure Overview
6 Introduction to Using CSS Styles
7 Deep Dive How the CSS Cascading Process Works
8 Guide to HTML Links
9 Working with the div Tag in HTML
10 Guide to HTML Classes and IDs
Flexbox, CSS Grid, Animations, and Images
11 Introduction to Flexbox
12 Guide to Padding in CSS
13 Guide to Margin in CSS
14 Course Update FontAwesome Import Fix
15 Integrating Icons with Font Awesome
16 How to Select and Style Child Tag Elements
17 Introduction to CSS Grid
18 How to Import and Use Custom Fonts in HTML
19 How to Import and Style Images in HTML
20 Refactoring the CSS Code to Use More Specific Selectors
21 Integrating Flexbox Inside of a CSS Grid Container to Align Items
22 Introduction to CSS Animations
23 Styling the Right Column of the Navigation Bar
24 Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev
25 How to Build a Parallax Scrolling Feature
26 Adding Text Overlays On Top of the Parallax Image
27 Adding the HTML Structure and Icons for the Feature Section of the Homepage
28 How to Create Columns with Animated Hover Effects in CSS
29 Working with nth Child Selectors in CSS
30 How to Work with Box Shadows in CSS
31 How to Embed a Google Map into a Website
32 Building the Footer’s HTML Structure
33 Controlling the Flex Direction to Layout the Footer Styles
34 How to Apply Filters and Control an Image’s Opacity with CSS
35 Finalizing the Footer Styles
Transforming Image Styles, Box Layouts, and Content Integration
36 Building the HTML Structure for the About Page Header
37 How to Skew Images in CSS
38 Using the CSS Float Property to Have Text Flow Around an Image
39 Building the Square Grid HTML Structure
40 Creating a Two Column Layout with CSS Grid and Flexbox
41 Finalizing the About Page Styles and Review of Code Organization Best Practices
Lists, Anchor Tags and Pseudo Elements
42 Populating the Menu Page with the Two Column Grid
43 Guide to HTML Bullet Point and Numbered LIsts
44 How to Implement Anchor Tags in HTML
45 Overview of the Before and After Pseudo Selectors in CSS
HTML Forms
46 Creating the Initial Structure for the Contact Page
47 Building the Contact Page Layout with CSS Grid
48 Introduction to HTML Form Elements
49 How to Style Text Inputs with CSS
50 Styling the Form Textarea and Button
51 Building the Label and Form Element Drop Shadow Styles
52 Integrating Custom Form Placeholder Text Styles
53 How to Animate Form Labels
54 Finalizing Contact Page Styles
CSS Media Queries
55 Introduction to CSS Media Queries
56 Finalizing the Homepage Responsive Styles
57 Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements
Guide to HTML
58 Archived Course
59 Tools We’ll Use in the Course
60 Basic HTML Website Structure
61 HTML5 Layout Cheat Sheet
62 Working with the HTML Head Tag
63 Creating Page Components with the Div Tag
64 Implementing Inline Components with the Span Tag
65 Integrate Headings into Web Pages
66 Using Multi Line Content with Paragraph Tags
67 Working with HTML Hyperlinks
68 Adding Page Breaks with the Horizontal Rule Tag
69 Integrating Line Breaks into HTML Pages
70 Creating HTML Numbed Lists
71 Working with Bullet Point Lists in HTML
72 Working with Bold HTML Styles
73 Using the Italic Style for Text
74 Comprehensive Set of HTML Style Tags
75 How to Add Images to Websites
76 Mapping Links on Images
77 How to work with Custom Tags in HTML
78 Adding Comments to HTML Code
79 Guide to Using Web Developer Tools
80 Working with HTML IDs
81 Working with HTML Classes
Guide to CSS Styles
82 Implementing Inline CSS Styles
83 Using Embedded CSS Styles
84 Using CSS Best Practices with External Stylesheets
85 How to Use CSS Selectors
86 Using CSS Webkit Animations
87 How to Add a Background Image to a Website
88 Adding CSS Border Styles to HTML Elements
89 Rounding Div Corners with Border Radius Styles
90 Customizing Height and Width Attributes in CSS
91 How to Implement Custom Fonts in HTML and CSS
92 How to Add Custom Font Styles in CSS
93 How to Properly Center Div Elements on a Page
94 Working with CSS Pseudo Class Selectors
95 Implementing Ease In Animations with CSS
96 Customizing Bullet Points Using CSS
97 Using the CSS Float Property to Align Page Elements
Guide to HTML Tables
98 Introduction to HTML Tables
99 How to Style HTML Headers
100 Styling Table Rows
101 Working with Column Spans
102 How to Customize Row Sizes in HTML Tables
Guide to HTML Forms
103 Introduction to HTML forms
104 Working with HTML Text Input Fields
105 How to Use the Text Area HTML Element for Large Amounts of Text Input
106 How to Use HTML Form Checkboxes
107 Working with HTML Form Radio Buttons
108 How to Use Select Boxes in an HTML Form
109 How to Group Drop Down Form Elements into Categories
110 Working with HTML Form Calculated Fields
111 How to Use HTML Entities for Custom Character Values
Project Create the Google Homepage
112 Google Homepage Project Overview and Instructions
113 Project Solution Building the HTML Structure
114 Project Solution Integrating the CSS Header and Content Styles
115 Project Solution Building the Styles for the Buttons and Footer
116 Project Solution CSS Hover Effects for Links
117 Project Solution JavaScript Auto Focus and Summary
Project Create the Pinterest Homepage
118 Pinterest Project Overview and Instructions
119 Project Solution Creating the HTML structure for the Pinterest homepage
120 Project Solution Customizing the Navigation Header Styles with CSS
121 Project Solution Integrating Font Awesome for Website Icons
122 Project Solution Styling Font Awesome Icons
123 Project Solution Styling Pinterest Pins
124 Project Solution Pinterest Homepage Summary
Project Create HTML Email Template
125 HTML Email Project Overview and Instructions
126 Project Solution HTML Email Tag Structure
127 Project Solution HTML Email Integration of CSS Styles
Project Create Tesla Homepage
128 Tesla Homepage Clone Overview and Instructions
129 Project Solution Tesla Homepage HTML Structure
130 Project Solution Customizing the Tesla Homepage Navigation Styles with CSS
131 Project Solution Implementing Content Styles and Buttons
132 Project Solution Styling the Footer of the Tesla Homepage
133 Project Solution Integrating Custom Fonts
134 Project Solution Final Project Fixes and Summary
Project Using Bootstrap and a Website Template to Design a Social Network
135 Twitter Bootstrap + Social Network Project Overview and Instructions
136 Project Solution Implementing Responsive Tags into the Head Tag
137 Project Solution Building the Social Network Navigation Bar
138 Project Solution Integrating Responsive Dropdowns with Bootstrap Components
139 Project Solution Customizing Content Headings
140 Project Solution Final Content Integrations for the Homepage
141 Project Solution Implementing CSS Styles
142 Project Solution Responsive Media Queries
143 Project Solution Bug Fixes
144 Project Solution Integrating Custom Fonts
145 Project Solution Favicon Integration and Social Network Summary
Resolve the captcha to access the links!