The Complete Front-End Web Development Course!

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

Created by : Rated :4.9 94185 views

Last Updated: 2022-04-25 09:04:16 English Course Type: Self Learning

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!

Access to a personal computer.
Internet access to download the necessary software (free).

Students who would like to learn how to code.
Students interested in web development.

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

How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
Is there any free trial?
Currently, we do not offer any free trial.
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

Joseph Delgadillo,

402609 Course Views

6 Courses

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.