The Complete Front-End Web Development Course!
Created by Joseph Delgadillo, Last Updated 17-Jun-2020, Language:English
The Complete Front-End Web Development Course!
Get started as a front-end web developer using HTML, CSS, JavaScript, jQuery, and Bootstrap!
Created by Joseph Delgadillo, Last Updated 17-Jun-2020, Language:English
What Will I Get ?
- Build a simple HTML text site
- Style web pages using CSS
- Program websites with JavaScript
- Build a Pipboy using Bootstrap
- Build and publish a Google Chrome Extension
Requirements
- Access to a personal computer or equivalent system
- Internet access to download the necessary software
Description
If you would like to get started as a front-end web developer, you are going to LOVE this course! Work on projects ranging from a simple HTML page to a complete JavaScript based Google Chrome extension. We will cover the following technologies in this course:
Web development basics with HTML
Cascading Style Sheets (CSS)
JavaScript programming
jQuery JavaScript library
Bootstrap framework
We will work on 4 class projects throughout this course:
Simple text site - We will use what we learned in the HTML sections to create a simple text site. This project will help you learn HTML structure and the essential elements.
Fallout inspired Pip-Boy - We will take what we learned in the CSS and Bootstrap sections of the course to code a Pip-Boy from the game Fallout. This project will help you learn the design elements of modern web development.
Google Chrome extension - We will finish the course by programming a JavaScript based Google Chrome extension. This project will help you understand the logical parts of web development.
*BONUS* Image downloader - We will code a second Google Chrome extension which functions as an image downloader.
This course covers the most popular web development frameworks, and will get you started on your path towards becoming a full-stack web developer!
Still not sold? Check out a few of the awesome reviews this course has received!
"Excellent Course! Highly Recommend It! Such a great hands-on experience with this course."
"Very nice course covers all the stuff you need, good voice and good explanation make it perfect for people that are new to HTML. Also there's some best practices recommendations which are useful even for advanced developers."
"Excellence in giving the optimal set of tools for web development beginners seeking a well-rounded start for professional web development."
Thank you for taking the time to read this, and we hope to see you in the course!
Course Content
-
Welcome to the Course!
2 Lectures 00:07:01-
Introduction to the course
Preview00:01:46 -
Atom setup
Preview00:05:15
-
-
Web Development Basics - HTML
9 Lectures 00:57:56-
HTML document structure
Preview00:04:05 -
HTML elements - div and span
Preview00:06:43 -
HTML elements - i, b, p, and a
00:06:28 -
HTML elements - ul, li, and ol
00:05:23 -
HTML elements - header and footer
00:05:21 -
HTML elements - section, main, and article
00:08:14 -
HTML elements - h1-h6 and aside
00:03:16 -
HTML tables
00:09:56 -
Project #1 - HTML text site
00:08:30
-
-
Advanced HTML Concepts
10 Lectures 00:53:12-
Images
00:03:30 -
Forms
00:04:48 -
Inputs
00:07:01 -
Checkboxes
00:04:55 -
Radio buttons
00:04:40 -
Select, option, and buttons
00:06:19 -
HTML5 videos
00:07:13 -
HTML5 audio
00:04:35 -
Doctypes
00:02:58 -
Meta tags
00:07:13
-
-
Introduction to Cascading Style Sheets (CSS)
11 Lectures 01:31:41-
Targeting color and background
00:15:58 -
Element specificity
00:03:48 -
ID targeting, margin, and border
00:11:50 -
Padding, margin, and float
00:08:11 -
Max-width and background-image
00:16:43 -
Switching over to an IDE
00:01:45 -
Font weight, style, and family
00:13:43 -
Text decorations
00:03:51 -
Text spacing
00:03:54 -
Text decoration modification
00:04:16 -
Text shadow
00:07:42
-
-
Advanced CSS
7 Lectures 00:51:57-
Pseudo-states
00:08:52 -
Border radius
00:08:27 -
Positions
00:09:04 -
Pseudo-elements
00:06:54 -
Z-index
00:05:50 -
Viewpoint width and height, overflowing content
00:07:20 -
Transition property
00:05:30
-
-
JavaScript for Beginners
11 Lectures 01:02:32-
Intro to JavaScript
00:04:23 -
Alerts and console logging
00:05:44 -
Integers, strings, and variables
00:06:49 -
Undefined variables and modifying values of variables
00:05:27 -
Boolean operators
00:02:48 -
Comparing values
00:05:10 -
If statements
00:10:53 -
For loops
00:03:19 -
Defining functions
00:06:04 -
Event handling
00:09:06 -
Setting an elements innerHTML
00:02:49
-
-
More JavaScript Concepts
12 Lectures 01:39:37-
Arrays pt.1
00:05:57 -
Arrays pt.2
00:06:55 -
Arrays pt.3
00:05:24 -
Textareas and getting the value of inputs
00:13:43 -
Functions - parameters and return values
00:07:34 -
Multiple parameters in functions
00:05:01 -
Flexible function parameters
00:11:57 -
Exercise - find the missing number
00:07:52 -
Exercise solution
00:07:33 -
Classes explained
00:04:55 -
Class constructor, instance variables, and static variables
00:09:07 -
Extending classes
00:13:39
-
-
Getting Started with jQuery
11 Lectures 01:38:48-
jQuery setup
00:06:17 -
Targeting elements
00:04:10 -
Event handling
00:10:48 -
Dropdown menus
00:22:22 -
Making our dropdown disappear
00:04:36 -
Multiple targets, events, and attr method
00:08:45 -
Prepend, append, and html
00:05:16 -
preventDefault
00:06:11 -
event.which and switch properties
00:09:01 -
Custom context menu, pageY, and pageX
00:13:28 -
is method
00:07:54
-
-
More jQuery
8 Lectures 00:57:24-
Writing our own version of jQuery
00:17:23 -
Find method
00:04:40 -
First and last
00:01:59 -
Focusin and focusout
00:11:21 -
Contains, is, and hasClass
00:07:08 -
Each method
00:02:36 -
Callbacks
00:07:14 -
CSS
00:05:03
-
-
Bootstrap Basics
6 Lectures 00:48:36-
Bootstrap setup
00:06:48 -
Navbar pt.1
00:06:44 -
Navbar pt.2
00:10:41 -
Forms pt.1
00:13:59 -
Forms pt.2
00:04:41 -
Buttons
00:05:43
-
-
Project #2 - Pipboy from Fallout 4
18 Lectures 02:50:27-
Setup
00:09:14 -
Navbar
00:07:35 -
Main page
00:06:45 -
Pipboy image and footer
00:13:25 -
Colors
00:05:03 -
Font and styling main nav
00:13:03 -
Scanlines
00:06:19 -
Navigation styling
00:09:43 -
Tabs
00:08:57 -
Progress bars
00:10:11 -
Stat bars
00:13:35 -
Footer fixes
00:02:08 -
Damage and resistance
00:05:27 -
Icons
00:12:51 -
Inventory template
00:04:11 -
Item list
00:13:02 -
Weapon stat container
00:11:05 -
Finishing touches with JavaScript
00:17:53
-
-
Project #3 - Google Chrome Extension
11 Lectures 01:16:04-
Problem solving
00:05:15 -
Manifest files
00:05:56 -
Basic setup
00:03:14 -
Getting video URLs
00:02:07 -
Injecting JavaScript
00:05:56 -
Getting pretty objects for each URL
00:04:46 -
Creating download options list
00:16:29 -
Communicating between the page and extension
00:09:25 -
Chrome downloads API and background scripts
00:07:59 -
Receiving messages and downloading files
00:05:44 -
Styling our extension and publishing
00:09:13
-
-
Final Thoughts
1 Lectures 00:16:07-
Tips for getting started as a professional web developer
00:16:07
-
-
BONUS | Project #4 - Building an Image Downloader
10 Lectures 01:57:08-
Introduction and Manifest
00:21:57 -
Content Scripts
00:16:04 -
Messaging Different Parts of the Extension
00:10:13 -
Creating Share Popup
00:08:21 -
Icons
00:10:55 -
Source Code 1/2
-
Building an Image Downloader
00:13:34 -
Interacting with the DOM
00:28:47 -
Uploading to the Chrome Web Store
00:07:17 -
Source Code 2/2
-

Joseph Delgadillo
Best-Selling Instructor
Joseph Delgadillo is the founder of JTDigital Courses, an education technology company. He has been active in the online learning community since 2015 and has worked with multiple startups. As of 2020, over 1 million students across the globe have enrolled in his courses covering ethical hacking, Python programming, web development and more.
He graduated with honors from Central Washington University.