Web Programming - HTML, CSS, JavaScript and ReactJS

Satish C J via YouTube

Start learning Write review

Learn web programming fundamentals through comprehensive lectures covering HTML, CSS, JavaScript, and ReactJS. Master HTML basics including semantic elements, forms, multimedia tags, and document structure while exploring advanced features like iframes, colgroups, and datalists. Develop CSS skills from basic styling and selectors to advanced concepts including the box model, positioning, pseudo-elements, flexbox, grid layouts, and responsive design with media queries. Dive deep into JavaScript programming with variable declarations, data types, operators, control structures, loops, objects, arrays, functions, DOM manipulation, event handling, form processing, regular expressions, and exception handling. Progress to modern JavaScript ES6 features including modules, import/export statements, and destructuring. Conclude with ReactJS development covering installation, component creation, JSX syntax, props handling, event management, hooks (particularly useState), class components, lifecycle methods, virtual DOM concepts, and React Router v6 for navigation. Gain hands-on experience through practical demonstrations using Visual Studio Code and build a solid foundation for modern web development.

Syllabus

Visual Studio Code - Installation and Demo
Introduction to HTML - Session 1 - Demo using Visual Studio Code.
Introduction to HTML - Session 2 - Demo on iframe, video, audio, img , div, form and input tags
HTML - textarea & file input type - Demo.
HTML Semantic Elements - header - nav -section - article - footer - Demo
HTML - Session 3 (colgroup, optgroup, hgroup, datalist, fieldset, meter, details, menu tags)
CSS Tutorial: Inline, Embedded & External CSS - Web Programming Tutorials
Cascading Style Sheets - selectors -font &text styling - padding - border - inherit - background
CSS Units - px, % , em , rem , vw, vh, vmax, vmin, ch, pt, cm ,mm ,in, pc - Demo
CSS Box Model & Margin - Float - Overflow - Z index - box shadow - display properties
Cascading Style Sheets (CSS) - Position Property - static, relative, absolute, fixed and sticky
CSS - Pseudo elements - Demo
CSS Pseudo-classes Demonstration
CSS - Combinators - Demo
Cascading Style Sheets (CSS) - Tables
Cascading Style Sheets (CSS) - Multi Column Layout - Demo
CSS Flexbox Tutorial
CSS Grid Tutorial - Demo and Exercise
Media Queries in CSS - Demo and Exercise
Node.js Introduction and Installation
JavaScript - Variable Declaration - Difference between var, let and const
Data Types in JavaScript
JavaScript Operators - Arithmetic , Assignment, Comparison and Logical Operators - Demo
JavaScript - if , if else and else if Statements - Demo
Javascript - Switch Case & Nested Switch Case Statements - Demo
JavaScript - for , for in, for of, while and do while loops - Demo
NaN in JavaScript
Objects - Nested Objects - Array of Nested Objects in JavaScript
JavaScript Symbols
JavaScript -Arrays - Introduction - Declaration and Accessing Elements
JavaScript - Array Methods - Basic Methods - Session 1
JavaScript Array Methods Session 2 - filter, map, forEach, reduce, reduceRight, every, some and sort
JavaScript - Multidimensional Arrays - Demo
JavaScript Destructuring
JavaScript - String Methods - Demo
JavaScript - Introduction to Functions
Function Expression in JavaScript
Arrow Functions in JavaScript
Callback Functions in JavaScript
Nested Functions in JavaScript
JavaScript Date Object
JavaScript - Document Object Model - Introduction - Session 1
JavaScript - Introduction to Document Object Model - Session 2
JavaScript - getElementByID, getElementsByClassName, getElementsByTagName - Demo
querySelector and querySelectorAll Methods in JavaScript
JavaScript - createNode() ,createTextNode(), insertBefore(), replaceChild(), remove(), setAttribute
JavaScript Events - Demo
JavaScript addEventListener() and removeEventListener() Method
Form Handling using JavaScript (Accessing HTML form data from within JavaScript)
JavaScript Regular Expressions - Learn how to perform Password Validation using Regular Expressions
Exception Handling In JavaScript - Live Demo in Class
React Tutorial for Beginners - Session 1 - Installation of React on Windows - Demo
Introduction to ReactJS and create-react-app
JavaScript ES6 Modules - import and export - Named Export and Default Export - Demo
ReactJS - Function Components - JSX - Styling Components and Props
Props in React - Passing Variables, Objects, Arrays to Function Components
Props Validation in React - propTypes and defaultProps
ReactJS Event Handling - event.type, event.target,event.target.value
How React Works ? - Actual Dom Vs Virtual Dom - Diffing Algorithm - State- useState Hook
Class Components in ReactJS and Props with Class Components
ReactJS - Component Lifecycle Methods - Managing State in Class Components
ReactJs Hooks - useState Hook Explained
React Router v6 - Demo