Overview What You Will Learn Curriculum Instructor

Course Overview

Front-end web development is the art of creating engaging, responsive, and user-friendly interfaces for websites and web applications. As businesses increasingly rely on web presence, learning front-end technologies is essential for anyone pursuing a career in web development. This course equips learners with the foundational and advanced tools required to build dynamic front-end experiences using modern web technologies and frameworks.

This course begins with setting up a development environment using Atom and gradually introduces HTML, covering document structure, elements, and project-based learning. It expands into advanced HTML topics such as forms, multimedia, and meta tags. Learners then dive into styling with CSS, covering both basic and advanced concepts including text formatting, pseudo-elements, transitions, and layout techniques. JavaScript is introduced through foundational syntax, control structures, and DOM manipulation, followed by deeper concepts like functions, classes, and arrays. The course then explores jQuery for easier DOM operations, followed by Bootstrap for responsive design. Learners apply all concepts in hands-on projects like a Pipboy UI replica and Google Chrome extensions, integrating everything into real-world applications.

By the end of the course, learners can confidently build, style, and enhance modern web interfaces 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

Program Curriculum

  • Atom Setup
  • $7 Million Cybersecurity Scholarship by EC-Council
  • Chapter 01 Quiz

  • 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
  • Chapter 02 Quiz

  • Images
  • Forms
  • Inputs
  • Checkboxes
  • Radio Buttons
  • Select, Option, and Buttons
  • HTML5 Videos
  • HTML5 Audio
  • Doctypes
  • Meta Tags
  • Chapter 03 Quiz

  • 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
  • Chapter 04 Quiz

  • Pseudo-states
  • Border Radius
  • Positions
  • Pseudo-elements
  • Z-index
  • Viewpoint Width and Height, Overflowing Content
  • Transition Property
  • Chapter 05 Quiz

  • Introduction 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
  • Chapter 06 Quiz

  • Arrays Part 1
  • Arrays Part 2
  • Arrays Part 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
  • Chapter 07 Quiz

  • jQuery Setup
  • Targeting Elements
  • Event Handling
  • Dropdown Menus
  • Making Our Dropdown Disappear
  • Multiple Targets, Events, and attr Method
  • Prepend, Append, and HTML
  • preventDefault
  • event.which and Switch Properties
  • Custom Context Menu, pageY, and pageX
  • Is Method
  • Chapter 08 Quiz

  • Writing Our Own Version of jQuery
  • Find Method
  • First and Last
  • Focusin and Focusout
  • Contains, is, and hasClass
  • Each Method
  • Callbacks
  • CSS
  • Chapter 09 Quiz

  • Bootstrap Setup
  • Navbar Part 1
  • Navbar Part 2
  • Forms Part 1
  • Forms Part 2
  • Buttons
  • Chapter 10 Quiz

  • Setup
  • Navbar
  • Main Page
  • Pipboy Image and Footer
  • Colors
  • Font and Styling Main Nav
  • Scanlines
  • Navigation Styling
  • Tabs
  • Progress Bars
  • Stat Bars
  • Footer Fixes
  • Damage and Resistance
  • Icons
  • Inventory Template
  • Item List
  • Weapon Stat Container
  • Finishing Touches with JavaScript
  • Chapter 11 Quiz

  • 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
  • Chapter 12 Quiz

  • Tips for Getting Started as a Professional Web Developer
  • Chapter 13 Quiz
Load more modules

Instructor

Joseph Delgadillo

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 600,000 students across the globe have enrolled in his courses covering ethical hacking, Python programming, web development and more. He graduated with honours from Central Washington University.

Join over 1 Million professionals from the most renowned Companies in the world!

certificate

Empower Your Learning with Our Flexible Plans

Invest in your future with our flexible subscription plans. Whether you're just starting out or looking to enhance your expertise, there's a plan tailored to meet your needs. Gain access to in-demand skills and courses for your continuous learning needs.

Monthly Plans
Annual Plans
Save 20% with our annual plans!

Pro

Ideal for continuous learning, offering video-based learning with 840+ courses and diverse Learning Paths to enhance your skills.

$ 69.00
Billed monthly or $599.00 billed annually
Get Started Now
Start your 7-day trial for $1

What is included

  • 840+ Premium Short Courses
  • 70+ Structured Learning Paths
  • Validation of Completion with all courses and learning paths
  • New Courses added every month
Early Access Offer

Pro +

Experience immersive learning with Practice Labs and CTF Challenges for comprehensive skill-building.

$ 79.00
Billed monthly or $699.00 billed annually
Get Started Now
Start your 7-day trial for $1

Everything in Pro and

  • 1400+ Practice Lab exercises with guided instructions
  • 150+ CTF Challenges with detailed walkthroughs
  • New Practice Labs and Challenges added every month

Related Courses

  • Hacking WEP/WPA/WPA2 Wi-Fi Networks Using Kali Linux 2.

    Hacking WEP/WPA/WPA2 Wi-Fi Networks Using Kali Linux 2

    Short Course

    Hacking WEP/WPA/WPA2 Wi-Fi Networks Using Kali Linux 2

    Vulnerability Assessment and Pentesting

    The comprehensive course to secure & crack WEP/WPA/WPA2 k...

    $69.99

    Intermediate

    5 hr 12 m

  • Bootstrap 4 Quick Website Bootstrap Components Course.

    Bootstrap 4 Quick Website Bootstrap Components Course

    Short Course

    Bootstrap 4 Quick Website Bootstrap Components Course

    Software Development

    Explore the basics of Bootstrap and learn to create a website...

    $49.99

    Beginner

    1 hr 30 m

  • CCNA - Understanding Routers and Switches.

    CCNA - Understanding Routers and Switches

    Short Course

    CCNA - Understanding Routers and Switches

    Security Architecture and Operations

    A comprehensive guide to understanding the in-depth functioni...

    $49.99

    Intermediate

    2 hr 0 m

  • The Complete Full-Stack JavaScript Course.

    The Complete Full-Stack JavaScript Course

    Short Course

    The Complete Full-Stack JavaScript Course

    Software Development

    Learn full-stack web development using JavaScript (ReactJS, N...

    $79.99

    Beginner

    24 hr 17 m

  • React.JS for Ecommerce: Building a Store with React.JS

    React.JS for Ecommerce: Building a Store with React.JS

    Short Course

    React.JS for Ecommerce: Building a Store with React.JS

    DevSecOps

    From React.js Fundamentals to Crafting an Online Storefront

    $49.99

    Advanced

    3 hr 30 m

  • CISSP Certification Domains 5, 6, 7, and 8 Video Training.

    CISSP Certification Domains 5, 6, 7, and 8 Video Training

    Short Course

    CISSP Certification Domains 5, 6, 7, and 8 Video Training

    Cybersecurity

    This course is ideal for individuals who desire to pass the I...

    $69.99

    Intermediate

    6 hr 30 m

  • Helm 3 - Package Manager for Kubernetes.

    Helm 3 - Package Manager for Kubernetes

    Short Course

    Helm 3 - Package Manager for Kubernetes

    Software Development

    A must tool for every DevOps engineer

    $49.99

    Intermediate

    1 hr 27 m

  • Learn Ethical Hacking by Hacking Real Websites Legally.

    Learn Ethical Hacking by Hacking Real Websites Legally

    Short Course

    Learn Ethical Hacking by Hacking Real Websites Legally

    Vulnerability Assessment and Pentesting

    Fun way to learn ethical hacking by playing online hacking ga...

    $69.99

    Beginner

    4 hr 18 m

1 49
View all