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 makes 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
  
  Preview
  
  00:01:46
- Atom setup
  
  Preview
  
  00:05:15
Web Development Basics - HTML

9 Lectures 00:57:56
- HTML document structure
  
  Preview
  
  00:04:05
- HTML elements - div and span
  
  Preview
  
  00: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 800,000 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.