The document outlines a roadmap for basic web development, including key topics such as JSX, Node.js, and React, and emphasizes the distinction between front-end and back-end development. It introduces essential technologies like HTML, CSS, and JavaScript, and tools such as Webpack, focusing on their roles in creating dynamic web applications. Additionally, it highlights the importance of React and hooks for building interactive UIs and provides a brief overview of hands-on projects to apply these concepts.

2. Today’s
Roadmap
Basic web
development
Learn JSX
Install
Node
Debug using
DevTools
Make a note app
Real vs Virtual
DOM
Get to know
webpack
React hooks &
state management
React under
the hood

3. Say Hi to our GDSC Lead,
Sawan Bhattacharya
Scan to
Connect
Narula Institute of Technology

4. Say Hi to our Tech Core Lead,
Rajdip Bhattacharya
Scan to
Connect
Narula Institute of Technology

5. Raj Saha
Say Hi to our Web-Dev Lead,
Scan to Connect

6. Intro To Web Development
Narula Institute of Technology
❏ Web Development usually refers to developing the website for the
Internet (World Wide Web) or for an Internet (Private network).
❏ Also known as Web Programming. It is the creation of Dynamic Web
Applications
❏ Examples of Web Applications are Social networking sites like Facebook
or E-commerce sites like Amazon, Flipkart, etc.
❏ There are two broad division of Web Development -
Front-end Development (also called Client-side Development)
Back-end Development (also called Server-side Development).

7. Frontend development is the subset
of Web Development where we
focus on creating the UI of our
website. This is the part of our
application that our users can see
and interact with.
Frontend Development

8. Technologies used
Have you ever had the wish to create a cool web application, or perhaps
wondered how all the websites that you visit are created? Well, we have
got the answers. In frontend development, we use these three
technologies at the very base:
● HTML (The skeleton of the website)
● CSS (The design of the website)
● JavaScript (The functionality of the website)

9. This how it works

10. Our DISCORD Server

11. Hands on!!
Let's make a basic app
using HTML, CSS, and JS

12. Document
Object
Model
DOM or Document Object Model,
is a programming interface that allows developers to
manipulate the content and structure of a web page
in real-time using programming languages like
JavaScript.
Node

13. Disadvantage of Real DOM
● There is too much of memory wastage
● Every element of the UI has to be re-rendered for every
UI update
● DOM manipulation is very expensive
● It updates slow

14. Virtual DOM to the rescue
● No memory wastage
● It updates fast
● Only update the elements that have been
changed and not the whole

15. What is React?
React is a powerful tool that
enables developers to build more
dynamic and interactive user
interfaces for web applications by
breaking down web pages into
reusable and modular components.

16. React Supremacy

17. We would need a few tools at our disposal before we get
started
● A laptop (of course)
● Internet connection
● Get Node.js
● Setup node, npm and npx
● See if everything works
● Good to go!
Tools of the trade

18. What is Node.js
Node.js is a cross-platform
JavaScript runtime environment used
for building web applications, APIs,
and server-side tools. It uses an
event-driven, non-blocking I/O model,
is built on the Chrome V8 JavaScript
engine, and has a large community and
ecosystem of third-party libraries
and tools.

19. What is a webpack
Webpack is a module bundler for
JavaScript applications. It takes
different files and bundles them
into a single optimized file. It
automates tasks such as code
splitting, bundling, and
minification. It simplifies the
complexity of modern web
development.

20. The Flow of webpack

21. Why webpack ?
● Front end development involves many
repetitive tasks
● Production SPAs require a lot of code per
page
● Scalable web apps require efficient static
content delivery

22. We can use a few tools to get started with
our React project
● create-react-app
● Vite.JS
Different flavours of
React

23. What is JSX?
● JSX stands for JavaScript XML.
● JSX allows us to write HTML in
React.
● JSX makes it easier to write and
add HTML in React.

24. Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM
without any createElement() and/or appendChild() methods
Example
Using JSX:
const myElement = <h2>Hello there</h2>
Without JSX:
const myElement = React.createElement(‘h1’, {},
‘Hello there’);

25. Hooks, hooks and more hooks
● useState
● useEffect
● useCallback
● useRef
● And much more…
Just like JSX, hooks too are an integral part of React.

26. Our DISCORD Server

27. Hands on
Let's make a weather app
with react !!

28. Thank You