HTML stands for Hyper Text Markup Language. It is the simplest language in the world as you do not get any errors while working with HTML.
Different tags - html, title, body, paragraph, heading 1 to 6, anchor, break row, link, img
Different attributes - style, href, rel, src,
What is HTML?
How the HTML code compile?
What data structure is used behind the scenes in HTML?
What is HTML parser?
How to add CSS with HTML file?
Tags - table, th, td, strong, b, em, span, abbr and title attribute, target attribute anchor tag , download attribute in anchor tag with image and text as well, specify name of the download attribute.
rel attribute in anchor tag
What are absolute and relative URLs?
How to navigate to a specific part of the page? CSS ids
How to use the loading attribute to lazy load images? loading attribute in image tag. Lazy Loading Details
How to build a form? tags - submit button, checkbox, radio, date, email, file, number, password, reset, search.
Textarea, select, fieldset, legend.
How to configure a form to comunicate with server with attributes: action, enctypes, method, target.
How to change the design of datetype input field.
How to preview the image with file input type?Here
enctypes -
How Form submission attributes work.
How to perform client side form validation. using HTML
How to make a button to submit a form.
How to reset a form.
Selector, Class and id , Comment, border, color, background- color, image, repeat, attachment,
Border - style , width, color, shorthand, border-radius
Margin - top, right, bottom, left
Padding -
What is box model?
Universal selector *
Text align - left, center, justify, text-decoration - overline, none, under-line, line-through, text-transform, text-indent
CSS link, visited, hover, active
Table - border, width height, text-align, padding, tr:hover, tr:nth-child(even), responsive table
Navigation Bar
Website Layout
Mini Project
div, header, section
JavaScript - How it works?
How to add it with HTML?
How console works?
What is Document?
how variables work in JS?
Operators
Algorithm based questions
1, 2 , 3, 5, 8, 13, 21, 34
While loops, Questions, typeof
Loose equality vs strict equality
For Loop, do while, arrays
Events
functions
Project- Captcha Generator
Validations on forms
What are local and global variables?
How to create an object in Javascript to hold values?
How this keyword works?
Difference between var and let?
Function Statements, Function Expressions
Arrow functions, single line arrow function without return, without arguments, dynamically creating arrow functions
Multi line arrow function with return statement
Template Literals
What is Module?
Object Literals, Object class, Function constructor and new keyword.
JavaScript Project - Speech Recognition
CSS transitions, vendor prefixes for cross browser support wih WebKit.
Create your own transition timing function
JavaScript Array object, different types of array representations.
Methods for stack and queue operations, push pop shift unshift.
Array with for loop, for in , for of,
Multidimensional array
Other important methods: - splice, slice, concat, foreach, indexOf, lastIndexOf, includes, find, filter, reverse, split, join
Array.isArray
JavaScript String, Single and dobule quotes, backticks.
Special characters: new line character, length,
Strings are immutable
String methods: charAt, toUpperCase, toLowerCase, indexOf, includes, startsWith, endsWidth, slice, substring, substr
Bitwise not ~
Node JS - VM (V8 / Chakra)
which node, which npm, which npx
// Modern JS test
(async (a = 1, ...b) => ({ ...b, a, [a]: `${a}` }))()
// New Promise APIs
util.promisify
require('fs').promises
What is RELP? Node.js Read-Eval-Print-Loop (REPL)
Node Hello World.
Common JS (module formatting system)
- require and module.exports
ES6
- import and export
NPM - Node Package Manager
Semantic Versioning Calculator
What is npm install and init?
Package.json vs package-lock.json
Creating and publishing your own npm package.
MERN authantication project Node and express Server setup
Process object
Used packages:
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.2",
"concurrently": "^7.0.0",
"express": "^4.17.3",
"is-empty": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.2.8",
"passport": "^0.5.2",
"passport-jwt": "^4.0.0",
"validator": "^13.7.0"
},
"devDependencies": {
"nodemon": "^2.0.15"
}
MERN authentication Project Models and Validation
Register and Login Validations
User schema model
routes for register user
MERN authentication Project
API for register
MERN Authentication Project
API for Login, Passport JWT strategy
Postman api testing
MERN Authentication Project
React App
MERN Authentication Project
React App Navbar component
MERN Authentication Project
React App Landing page
Login Page
MERN Authentication Project
React App Landing page
Register and Login
React Basics
Why React?
CDN - unpkg - React, ReacrDOM and babel
Understanding JSX (JavaScript XML)
React and Node Setup, create react app
Install these extensions from Visual Studio Code
create-react-app
React and JSX with create-react-app
Create React app
React Components
JavaScript Function and JavaScript Class
Rendering React Components
React Components with Variables
Creating Hexadecimal color with react
Map function for generating li tag using JSX
React Props
Props in functional Components
String Props
React Props
Props objects
React Map List Keys
Working of Map function with Numbers, arrays of arrays, arrays of object.
Key mapping,
React Class Components Statefull components
Class Components, props in class components, methods in class components.
Convert all the functional components into class components.
React class componenets
Methods in class components
React State
React Folder Structuring, import and export
React Events
React Forms, Input fields,
React form validations
React Project
Building a markdown Editor
MERN Major project
Ecommerce SaaS product
All the code will be available on other Repo
MERN Major project
Ecommerce SaaS product
Ecommerce SaaS product
Ecommerce SaaS Product
Ecommerce SaaS Product
Solved the error in firebase configuration
Ecommerce SaaS Product
Ecommerce SaaS Product
redux, react-redux, redux-devtools-extension
redux-devtool extension for chrome
Ecommerce SaaS Product
Ecommerce SaaS Product
Ecommerce SaaS Product
Ecommerce SaaS Product
setup backend node server
install packages
express - for backend server
body-parser - to parse the JSON data to javascript so that server can communicate with client with JSON data
mongoose - its a middleman to connect with mongoDB
cors - to avoid the Cross Origin Resourse Sharing, error occurs due to different domain or different origins.
morgan - it simply prints the url.
express-jwt - it will help us verify the json web token
firebase-admin - to send the token to firebase so that we can verify
jsonwebtoken - to deal with web tokens
nodemon - to continues run the server
dotenv - to load variables from the env file
create server file and first api
Ecommerce SaaS product
Ecommerce SaaS product