- Build an in-depth understanding of all the full stack concepts.
- Create your strong social media profile on LinkedIn and GitHub.
- Build 15+ projects including 5+ Major Projects.
- Showcase your skills with a portfolio of real projects.
- Get a chance to face the interviews in different companies hiring Full Stack Engineers.
- Work on Live projects in parallel to get an understanding of how companies create end-to-end software solutions.
- HTML
- CSS
- Bootstrap
- JavaScript
- 5‌ ‌Minor‌ ‌Projects
- ReactJS
- Firebase
- MongoDB
- Node
- Express
- GIT‌ ‌-‌ ‌version‌ ‌control
- 5‌ ‌Major‌ ‌Projects
- Deployment
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 -
- application/x-www-form-urlencoded (the default)
- multipart/form-data
- text/plain
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
- sum of even - 10 4m / 2 = sum
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').promisesWhat is RELP? Node.js Read-Eval-Print-Loop (REPL)
Node Hello World.
Common JS (module formatting system)
- require and module.exports
ES6
- import and exportNPM - 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)
- JSX Elements
- Comment
- Rendering JSX
- Style and className in JSX
- Injecting data into JSX
- What is babel?
- What is transpiler?
- What is single page application?
- What is DOM?
- What is Virtual DOM?
React and Node Setup, create react app
Install these extensions from Visual Studio Code
- Prettier
- ESLint
- Bracket Pair Colorizer
- ES7 React/Redux/GraphQL/React-Native snippets
create-react-app
- adding first JSX code with react
- What is module?
- What is package?
- What is NPM?
- What is webpack?
React and JSX with create-react-app
Create React app
- add jsx and render the content
- Inject Data into JSX
- Add image in the page
React Components
JavaScript Function and JavaScript Class
- Functional Component / Presentational Component / Stateless Component / Dumb Component
- Class Component / Container Component/ Statefull Component / Smart Component
Rendering React Components
- What is React Component?
- Difference between normal function and arrow function.
- How to make reusable react components?
- How small is a React component?
- What is the difference between a pure JavaScript function and a functional component?
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
- What is props in a React component ?
- How do you access props in a React component ?
- What data types can we pass as props to components ?
React Props
Props objects
- Different types of props object
- String, number, boolean, array, object, function, props
React Map List Keys
Working of Map function with Numbers, arrays of arrays, arrays of object.
Key mapping,
- Why you need to map an array ?
- Why we need keys during mapping an array ?
React Class Components Statefull components
Class Components, props in class components, methods in class components.
Convert all the functional components into class components.
- What is inheritance and how do you make a child from a parent class?
- What is class based React component ?
- What is the difference between functional React component and class based React component ?
- When do we need to use class based components instead of functional components
React class componenets
Methods in class components
- What is the use cases of class based component ?
- Which type of component do use most frequently ? functional or class-based component
React State
- What is state in React ?
- What is the difference between props and state in React ?
- How do you access state in a React component ?
- How do you set a set in a React component ?
React Folder Structuring, import and export
- What is the importance of React Folder Structure and File Naming
- How do you export file
- How do you import file
- Make a component of module and export it as named or default export
- Make a component or module and import it
React Events
- What is an event?
- What is the different between an HTML element event and React event?
- Write at least 4 keyboard events?
- Write at least 8 mouse events?
React Forms, Input fields,
- What is the importance of htmlFor?
- Write an input type which is not given in the example if there is?
- What is a controlled input?
- What do you need to write a controlled input?
- What event type do you use to listen changes on an input field?
- What is the value of a checked checkbox?
- When do you use onChange, onBlur, onSubmit?
- What is the purpose of writing e.preventDefault() inside the submit handler method?
- How do you bind data in React? The first input field example is data binding in React.
React form validations
- What is validation?
- What is the event type you use to listen when an input changes?
- What are event types do you use to validate an input?
React Project
Building a markdown Editor
MERN Major project
Ecommerce SaaS product
All the code will be available on other Repo
- intial project setup
- react-router-som
- Creating routes using switch route
- Home, Login, Register
MERN Major project
Ecommerce SaaS product
- bootstrap material design
- ant design
- menu component code
- ant design css
Ecommerce SaaS product
- Change icons and align to left and right
- it should be selected when we click the buttons
- Add react react router link for corresponding pages
- Firebase google account
- Create a project in firebase
- copy code for javascript and paste it in a new file in src called firebase.js
Ecommerce SaaS Product
- Creating a registration form
- firebase auth signin email
- react tostify
- firebase authentication for google and email
- promises
- await and async
Ecommerce SaaS Product
- Complete registration page
Solved the error in firebase configuration
Ecommerce SaaS Product
- Registation complete through email verification link
- Authenticate user with password as well.
- Store email in local storage and get it for complete registration
Ecommerce SaaS Product
- Update password
- Redux installation for Global State change
redux, react-redux, redux-devtools-extension
redux-devtool extension for chrome
- Creating reducer seperately
Ecommerce SaaS Product
- Logout Functionaly
- State in redux
Ecommerce SaaS Product
- Login Page
Ecommerce SaaS Product
- Login With google
- Conditional login and logout for dashboard.
- Forgot password
- conditional redirect
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
- setup database mongodb atlus
- create routes
- using filesystem for every route and apply them as middleware
Ecommerce SaaS product
- create controllers for every routes
- Create a user schema
- setup firebase-admin