Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The Complete Front-End Web Development Course!
Welcome to the Course!
Introduction to the course (1:46)
Atom setup (4:58)
Web Development Basics - HTML
HTML document structure (4:05)
HTML elements - div and span (6:44)
HTML elements - i, b, p, and a (6:28)
HTML elements - ul, li, and ol (5:23)
HTML elements - header and footer (5:21)
HTML elements - section, main, and article (8:14)
HTML elements - h1-h6 and aside (3:16)
HTML tables (9:56)
Project #1 - HTML text site (8:30)
Advanced HTML Concepts
Images (3:31)
Forms (4:48)
Inputs (7:01)
Checkboxes (4:55)
Radio buttons (4:40)
Select, option, and buttons (6:19)
HTML5 videos (7:14)
HTML5 audio (4:35)
Doctypes (2:59)
Meta tags (7:13)
Introduction to Cascading Style Sheets (CSS)
Targeting color and background (15:58)
Element specificity (3:48)
ID targeting, margin, and border (11:50)
Padding, margin, and float (8:11)
Max-width and background-image (16:43)
Switching over to an IDE (1:45)
Font weight, style, and family (13:43)
Text decorations (3:51)
Text spacing (3:54)
Text decoration modification (4:16)
Text shadow (7:42)
Advanced CSS
Psuedo-states (8:52)
Border radius (8:27)
Positions (9:04)
Psuedo-elements (6:55)
Z-index (5:50)
Viewpoint width and height, overflowing content (7:20)
Transition property (5:30)
JavaScript for Beginners
Intro to JavaScript (4:23)
Alerts and console logging (5:44)
Integers, strings, and variables (6:49)
Undefined variables and modifying values of variables (5:27)
Boolean operators (2:48)
Comparing values (5:11)
If statements (10:53)
For loops (3:19)
Defining functions (6:04)
Event handling (9:06)
Setting an elements innerHTML (2:49)
More JavaScript Concepts
Arrays pt.1 (5:57)
Arrays pt.2 (6:55)
Arrays pt.3 (5:24)
Textareas and getting the values of inputs (13:43)
Functions - parameters and return values (7:34)
Multiple parameters in functions (5:01)
Flexible function parameters (11:57)
Exercise - find the missing number (7:52)
Exercise solution (7:33)
Classes explained (4:55)
Class constructor, instance variables, and static variables (9:07)
Extending classes (13:39)
Getting Started with jQuery
jQuery setup (6:17)
Targeting elements (4:10)
Event handling (10:48)
Dropdown menus (22:22)
Making our dropdown disappear (4:36)
Multiple targets, events, and attr method (8:45)
Prepend, append, and html (5:16)
preventDefault (6:11)
event.which and switch properties (9:01)
Custom context menu, pageY, and pageX (13:28)
is method (7:54)
More jQuery
Writing our own version of jQuery (17:23)
First and last (1:59)
Find method (4:40)
Focusin and focusout (11:21)
Contains, is, and hasClass (7:08)
Each method (2:36)
Callbacks (7:14)
CSS (5:04)
Bootstrap Basics
Bootstrap setup (6:48)
Navbar pt.1 (6:44)
Navbar pt.2 (10:41)
Forms pt.1 (13:59)
Forms pt.2 (4:41)
Buttons (5:43)
Project #2 - Pipboy from Fallout 4
Setup (9:14)
Navbar (7:35)
Main page (6:46)
Pipboy image and footer (13:25)
Colors (5:03)
Font and styling main nav (13:03)
Scanlines (6:19)
Navigation styling (9:44)
Tabs (8:57)
Progress bars (10:11)
Stat bars (13:35)
Footer fixes (2:08)
Damage and resistance (5:27)
Icons (12:51)
Inventory template (4:11)
Item list (13:02)
Weapon stat container (11:05)
Finishing touches with JavaScript (17:53)
Project #3 - Google Chrome Extension
Problem solving (5:15)
Manifest files (5:56)
Basic setup (3:14)
Getting video URLs (2:07)
Injecting JavaScript (5:56)
Getting pretty objects for each URL (4:46)
Creating download options list (16:29)
Communicating between the page and extension (9:26)
Chrome downloads API and background scripts (7:59)
Receiving messages and downloading files (5:45)
Styling our extension and publishing (9:13)
Final Thoughts
Tips for getting started as a freelance web developer (16:08)
HTML elements - h1-h6 and aside
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock