Development

HTML, CSS, JavaScript Foundation

Master the fundamentals of web development with this comprehensive course covering HTML, CSS, and JavaScript. Build interactive, responsive, and visually appealing web pages while gaining the skills needed to create dynamic websites from scratch.

Request Syllabus Back to Courses
HTML, CSS, JavaScript Foundation
Duration3 months
Lessons100
LevelBeginner
ModeLive Online

What you will learn

  • HTML Basics
  • CSS Fundamentals
  • CSS Positioning and Layouts
  • Responsive Web Design
  • Introduction to JavaScript
  • Variables, Data Types, and Operators
  • Control Flow and Loops
  • Functions in JavaScript
  • DOM Manipulation
  • Event Handling
  • Working with Forms
  • Introduction to Debugging
  • JavaScript ES6 Features
  • Building Dynamic Web Pages
  • Basic Web Animations

Corporate training outcomes

  • Completion certificate
  • Practical assignments and project work
  • Mentor support and progress tracking
  • Custom batch options for teams
  • Yes

Requirements

  • Laptop with good internet
  • Basic computer knowledge
  • Willing to dedicate time
  • Passionate about learning web development

Curriculum

Course Introduction
  • Introduction
  • A High-Level Overview of Web Development
  • Setting Up Our Code Editor
  • Your Very First Webpage!
  • Downloading Course Material
  • Watch Before You Start!
HTML Fundamentals
  • Section Intro
  • Intro to HTML
  • Text Elements
  • More Text Elements: Lists
  • Images and Attributes
  • Hyperlinks
  • Structuring our Page
  • A Note on Semantic HTML
  • Installing Additional VS Code Extensions
  • CHALLENGE
  • 1
  • CHALLENGE
  • 2
CSS Fundamentals
  • Section Intro
  • Introduction to CSS
  • Inline, Internal and External CSS
  • Inline Text
  • Combining Selectors
  • Class and ID Selectors
  • Working With Colors
  • Pseudo-classes
  • Styling Hyperlinks
  • Using Chrome DevTools
  • CSS Theory
  • 1: Conflicts Between Selectors
  • CSS Theory
  • 2: Inheritance and the Universal Selector
  • CHALLENGE 1
  • CSS Theory
  • 3: The CSS Box Model
  • Using Margins and Paddings
  • Adding Dimensions
  • Centering our Page
  • CHALLENGE
  • 2
  • CSS Theory
  • 4: Types of Boxes
  • CSS Theory
  • 5: Absolute Positioning
  • Pseudo-elements
  • Developer Skill
  • 1: Googling and Reading Documentation
  • Developer Skill
  • 2: Debugging and Asking Questions
  • CHALLENGE
  • 3
Layouts
  • Section Intro
  • The 3 Ways of Building Layouts
  • Using Floats
  • Clearing Floats
  • Building a Simple Float Layout
  • box-sizing: border-box
  • CHALLENGE
  • 1
  • Introduction to FlexBox
  • A Flexbox Overview
  • Spacing and Aligning Flex Items
  • The flex Property
  • Adding Flexbox to Our Project
  • Building a Simple Flexbox Layout
  • CHALLENGE 2
  • Introduction to CSS Grid
  • A CSS Grid Overview
  • Sizing Grid Columns and Rows
  • Placing and Spanning Grid Items
  • Aligning Grid Items and Tracks
  • Building a Simple CSS Grid Layout
  • CHALLENGE
  • 3
Web Design Rules and Framework
  • Section Intro
  • Project Overview
  • Overview of Web Design and Website Personalities
  • Web Design Typography
  • Implementing Typography
  • Web Design Rules
  • 2: Colors
  • Implementing Colors
  • Web Design Rules
  • 3: Images and Illustrations
  • Web Design Rules
  • 4: Icons
  • Implementing Icons
  • Web Design Rules
  • 5: Shadows
  • Implementing Shadows
  • Web Design Rules
  • 6: Border-radius
  • Implementing Border-radius
  • Web Design Rules
  • 7: Whitespace
  • Web Design Rules
  • 8: Visual Hierarchy
  • Implementing Whitespace and Visual Hierarchy
  • Web Design Rules
  • 9: User Experience (UX)
  • The Website-Personalities-Framework
  • The Missing Piece: Steal Like An Artist!
Components and Layout Patterns
  • Section Intro
  • Web Design Rules
  • 10 - Part 1: Elements and Components
  • Building an Accordion Component - Part 1
  • Building an Accordion Component - Part 2
  • Building a Carousel Component - Part 1
  • Building a Carousel Component - Part 2
  • Building a Table Component - Part 1
  • Building a Table Component - Part 2
  • CHALLENGE
  • 1: Building a Pagination Component
  • Web Design Rules
  • 10 - Part 2: Layout Patterns
  • Building a Hero Section - Part 1
  • Building a Hero Section - Part 2
  • Building a Web Application Layout - Part 1
  • Building a Web Application Layout - Part 2
Introduction to JavaScript
  • Overview of JavaScript and its use cases
  • Differences between JavaScript, HTML, and CSS
  • How JavaScript runs in browsers
  • Setting up a JavaScript environment (Browser Console, Text Editors, IDEs)
Basic Syntax and Fundamentals
  • Variables (var, let, const)
  • Data types: String, Number, Boolean, Null, Undefined, Symbol
  • Operators: Arithmetic, Assignment, Comparison, Logical, Unary, Ternary
  • Type conversion and coercion
  • Comments (Single-line and Multi-line)
Control Flow
  • Conditional Statements (if, else if, else)
  • Ternary Operator
  • Switch Statements
  • Loops: for, while, do...while
  • Loop control with break and continue
Functions
  • Function Declaration and Function Expression
  • Anonymous and Named Functions
  • Arrow Functions and their differences
  • Function Parameters and Default Parameters
  • Returning values from functions
  • Understanding function scope (Global vs Local)
  • IIFE (Immediately Invoked Function Expressions)
DOM Manipulation
  • Understanding the Document Object Model (DOM)
  • Selecting DOM elements (getElementById, querySelector, etc.)
  • Modifying content: innerHTML, textContent, value
  • Adding and removing classes
  • Handling events (click, mouseover, keyup, etc.)
  • Creating and appending new elements dynamically
Arrays
  • Creating arrays and basic operations
  • Array iteration methods (forEach, map, filter, reduce)
  • Adding and removing elements (push, pop, shift, unshift)
  • Array slicing and splicing
  • Searching in arrays (indexOf, includes, find, findIndex)
  • Sorting and reversing arrays
Objects
  • Object creation and accessing properties
  • Adding, updating, and deleting object properties
  • Nested objects and accessing deep properties
  • Methods in objects
  • this keyword and its context
  • Object destructuring and spread/rest operators
Asynchronous JavaScript
  • Synchronous vs Asynchronous execution
  • Callbacks and callback hell
  • Promises and chaining with .then() and .catch()
  • Understanding async and await
  • Error handling in asynchronous code
Error Handling
  • Understanding runtime and syntax errors
  • try...catch statements for error handling
  • Throwing custom errors
  • The finally block and its usage
JavaScript in the Browser
  • Understanding the Window Object
  • Alert, Confirm, and Prompt boxes
  • Working with Browser Events (e.g., resize, scroll)
  • Timers (setTimeout, setInterval, clearTimeout, clearInterval)
Modules
  • Importing and Exporting: import and export syntax
  • Default exports vs Named exports
  • Using ES6 modules in modern browsers
  • Introduction to module bundlers like Webpack
Object-Oriented Programming (OOP)
  • Understanding classes and constructors
  • Creating and instantiating classes
  • Class methods and properties
  • Inheritance with extends
  • Method overriding
  • Static methods and their use cases
  • Prototypes and prototype inheritance
  • Spread operator and its uses
  • Rest operator for function arguments
  • Deep cloning vs shallow cloning
  • Template literals for string manipulation
  • Understanding closures
  • Higher-order functions
Event Handling
  • Event propagation (Bubbling and Capturing)
  • Event delegation and its benefits
  • Preventing default behavior
  • Binding event listeners dynamically
  • Custom events and dispatching
JavaScript APIs
  • Fetch API for making HTTP requests
  • Working with JSON data
  • Local Storage and Session Storage for data persistence
  • Geolocation API for location-based features
  • History API for navigation
Performance Optimization
  • Debouncing and Throttling for event optimization
  • Avoiding memory leaks
  • Lazy loading images and content
  • Minimizing reflows and repaints in the DOM
Testing
  • Importance of testing in JavaScript
  • Unit testing frameworks like Jest or Mocha
  • Writing simple test cases for functions
  • Testing asynchronous functions
Projects
  • Capstone Project1
  • Capstone Project 2
  • Capstone Project 3