The Complete Front-End Web Development Course!

Get started as a front-end web developer using HTML, CSS, JavaScript, jQuery, and Bootstrap!

What you will learn

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


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 3 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.

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!




Welcome to the Course!

Introduction to the course

Atom setup

Web Development Basics – HTML

HTML document structure

HTML elements – div and span

HTML elements – i, b, p, and a

HTML elements – ul, li, and ol

HTML elements – header and footer

HTML elements – section, main, and article

HTML elements – h1-h6 and aside

HTML tables

Project #1 – HTML text site

Advanced HTML Concepts





Radio buttons

Select, option, and buttons

HTML5 videos

HTML5 audio


Meta tags

Introduction to Cascading Style Sheets (CSS)

Targeting color and background

Element specificity

ID targeting, margin, and border

Padding, margin, and float

Max-width and background-image

Switching over to an IDE

Font weight, style, and family

Text decorations

Text spacing

Text decoration modification

Text shadow

Advanced CSS


Border radius




Viewpoint width and height, overflowing content

Transition property

JavaScript for Beginners

Intro to JavaScript

Alerts and console logging

Integers, strings, and variables

Undefined variables and modifying values of variables

Boolean operators

Comparing values

If statements

For loops

Defining functions

Event handling

Setting an elements innerHTML

More JavaScript Concepts

Arrays pt.1

Arrays pt.2

Arrays pt.3

Textareas and getting the value of inputs

Functions – parameters and return values

Multiple parameters in functions

Flexible function parameters

Exercise – find the missing number

Exercise solution

Classes explained

Class constructor, instance variables, and static variables

Extending classes

Getting Started with jQuery

jQuery setup

Targeting elements

Event handling

Dropdown menus

Making our dropdown disappear

Multiple targets, events, and attr method

Prepend, append, and html


event.which and switch properties

Custom context menu, pageY, and pageX

is method

More jQuery

Writing our own version of jQuery

Find method

First and last

Focusin and focusout

Contains, is, and hasClass

Each method



Bootstrap Basics

Bootstrap setup

Navbar pt.1

Navbar pt.2

Forms pt.1

Forms pt.2


Project #2 – Pipboy from Fallout 4



Main page

Pipboy image and footer


Font and styling main nav


Navigation styling


Progress bars

Stat bars

Footer fixes

Damage and resistance


Inventory template

Item list

Weapon stat container

Finishing touches with JavaScript

Project #3 – Google Chrome Extension

Problem solving

Manifest files

Basic setup

Getting video URLs

Injecting JavaScript

Getting pretty objects for each URL

Creating download options list

Communicating between the page and extension

Chrome downloads API and background scripts

Receiving messages and downloading files

Styling our extension and publishing

Final Thoughts

Tips for getting started as a professional web developer

Source link

Check Today's 30+ Free Courses on Telegram!

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock