Joseph Delgadillo

The Complete Front-End Web Development Course!

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

12 enrolled

$9.99 $199.99

Limited time offer.

watching now

3 Students

Description

If you would like to get started as a front-end web developer, you are going to LOVE this course! Join over 200,000 students who have taken this course, and 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!

Show More Show Less

What Will You Learn?

Build a simple HTML text site.

Program websites with JavaScript.

Build a Pipboy using Bootstrap.

Develop and publish a Google Chrome Extension.

Requirements

No previous development experience required.

NFT Certificate

117 Lessons

Beginner

English

+100 XP

Share Course on Social media

Curriculum

Course consist of total 14h 52min of content, in total.

Section 1: Welcome to the Course!

06:45

Introduction to the course

Atom setup

04:59

Section 2: Web Development Basics - HTML

58:01

HTML document structure

04:05

HTML elements - div and span

06:44

HTML elements - i, b, p, and a

06:29

HTML elements - ul, li, and ol

05:24

HTML elements - header and footer

05:22

HTML elements - section, main, and article

08:15

HTML elements - h1-h6 and aside

03:16

HTML tables

09:56

Project #1 - HTML text site

08:30

Section 3: Advanced HTML Concepts

53:18

Images

03:31

Forms

04:49

Inputs

07:01

Checkboxes

04:56

Radio buttons

04:40

Select, option, and buttons

06:20

HTML5 video

07:14

HTML5 audio

04:35

Doctypes

02:59

Meta tags

07:13

Section 4: Introduction to Cascading Style Sheets (CSS)

1:31:45

Targeting color and background

15:58

Element specificity

03:48

ID targeting, margin, and border

11:50

Padding, margin, and float

08:11

Max-width and background-image

16:43

Switching over to an IDE

01:46

Font weight, style, and family

13:43

Text decorations

03:52

Text spacing

03:55

Text decoration modification

04:17

Text shadow

07:42

Section 5: Advanced CSS

52:02

Pseudo-states

08:52

Border radius

08:28

Positions

09:05

Pseudo-elements

06:55

Z-index

05:51

Viewpoint width and height, overflowing content

07:21

Transition property

05:30

Section 6: JavaScript for Beginners

1:02:37

Intro to JavaScript

04:23

Alerts and console logging

05:44

Integers, strings, and variables

06:50

Undefined variables and modifying values of variables

05:28

Boolean operators

02:49

Comparing values

05:11

If statements

10:53

For loops

03:19

Defining functions

06:04

Event handling

09:07

Setting an elements innerHTML

02:49

Section 7: More JavaScript Concepts

1:39:44

Arrays pt.1

05:57

Arrays pt.2

06:56

Arrays pt.3

05:24

Textareas and getting the value of inputs

13:44

Functions - parameters and return values

07:35

Multiple parameters in functions

05:02

Flexible function parameters

11:57

Exercise - find the missing number

07:52

Exercise solution

07:34

Classes explained

04:56

Class constructor, instance variables, and static variables

09:08

Extending classes

13:39

Section 8: Getting Started with jQuery

1:38:50

jQuery setup

06:17

Targeting elements

04:10

Event handling

10:48

Dropdown menus

22:23

Making our dropdown disappear

04:36

Multiple targets, events, and attr method

08:45

Prepend, append, and html

05:16

preventDefault

06:12

event.which and switch properties

09:01

Custom context menu, pageY, and pageX

13:28

is method

07:54

Section 9: More jQuery

57:27

Writing our own version of jQuery

17:24

Find method

04:41

First and last

01:59

Focusin and focusout

11:21

Contains, is, and hasClass

07:08

Each method

02:36

Callbacks

07:14

CSS, wrap-up

05:04

Section 10: Bootstrap Basics

48:39

Bootstrap setup

06:48

Navbar pt.1

06:45

Navbar pt.2

10:41

Forms pt.1

14:00

Forms pt.2

04:42

Buttons

05:43

Section 11: Project #2 - Pipboy from Fallout 4

2:50:37

Setup

09:15

Navbar

07:35

Main page

06:46

Pipboy image and footer

13:25

Colors

05:04

Font and styling main nav

13:03

Scanlines

06:20

Navigation styling

09:44

Pipboy Tabs

08:57

Progress bars

10:12

Stat bars

13:35

Footer fixes

02:09

Damage and resistance

05:28

Icons

12:52

Inventory template

04:11

Item list

13:03

Weapon stat container

11:05

Finishing touches with JavaScript

17:53

Section 12: Project #3 - Google Chrome Extension

1:16:08

Problem solving

05:15

Manifest files

05:56

Basic setup

03:14

Getting video URLs

02:07

Injecting JavaScript

05:56

Getting pretty objects for each URL

04:47

Creating download options list

16:30

Communicating between the page and extension

09:26

Chrome downloads API and background scripts

07:59

Receiving messages and downloading files

05:45

Styling our extension and publishing

09:13

Section 13: Final Thoughts

16:08

Tips for getting started as a professional web developer

16:08

About the Instructor

Joseph Delgadillo

100% of students rated this instructor as excellent!

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.

See All Instructor Courses

BitDegree platform reviews

EXCLUSIVE OFFER: GET 25% OFF

Save Big With DataCamp Promo Code

Days

Hours

Minutes

Seconds

GET 25% OFF