Web developers are the creative minds behind the websites and web applications we use every day. They blend technical expertise with design skills to create engaging and functional online experiences
3. ● Web: It refers to websites, web pages or anything that
works over the internet.
● Development: It refers to building the application from
scratch.
● Web development refers to the creating, building, and
maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and database
management.
G.H. Raisoni College of Engineering, Nagpur
4. Why to learn Web
Development ?
● Most Easy to get into
● Endless Job Opportunities
● Diverse Learning Opportunities
5.
6. ● The part of a website where the user interacts directly is
termed as front end.
● It is also referred to as the ‘client side’ of the application.
● Frontend Roadmap : https://roadmap.sh/frontend
● Technologies Required : HTML , CSS , Javascript,
AngularJS, ReactJS
Frontend Development
7. Backend Development
● Backend is the server side of a website. It is part of the
website that users cannot see and interact with. It is used
to store and arrange data.
● Backend Roadmap : https://roadmap.sh/backend
● Technologies Required : NodeJS , ExpressJS , JAVA,
SPRING
8. Databases
● Data is the foundation of a web application.
● It is used to store user information, session data, and other
application data.
● The primary purpose of a database is to store, retrieve, and
update information.
11. G.H. Raisoni College of Engineering, Nagpur
What is HTML?
● HTML stands for Hypertext Markup Language.
● It is used to provide structure to a web page.
● Hypertext - links that connect web pages to each other.
● It is a Markup language.
13. G.H. Raisoni College of Engineering, Nagpur
Elements and tags
● An HTML element is defined by a start tag, some content, and an
end tag.
● <tagname> content </tagname>
● Eg: <h1>Page Heading</h1>
● Some HTML elements have no content like <br> tag.
15. G.H. Raisoni College of Engineering, Nagpur
<head> tag
● Used to provide metadata for a webpage.
● Typically includes title of the webpage, styles, scripts, etc.
16. G.H. Raisoni College of Engineering, Nagpur
<body> tag
● Defines the contents of an HTML page.
● Headings, paragraphs, images, etc.
17. G.H. Raisoni College of Engineering, Nagpur
Heading tags
● Heading tags are used to display titles and subtitles on a
webpage.
● The tags range from <h1> to <h6> with <h1> being the largest size
for heading and <h6> smallest.
20. <strong> tag
● The <strong> tag is used to define text with strong importance.
● The contents inside strong tags are displayed in bold.
● Eg:
21. <em> tag
● The <em> tag is used to define emphasized text
● The contents inside strong tags are displayed in italic.
● Eg:
22. <u> tag
● The <u> tag stands for underline.
● Used to add underline to the text.
● Eg:
23. G.H. Raisoni College of Engineering, Nagpur
Some more Text Formatting Tags:
● <mark> - Highlighted Text
● <small> - Small Text
● <sub> - Subscript Text
● <sup> - Superscript Text
● <code> - Used for displaying a lines of code.
24. Attributes in HTML
● Attributes provide additional information about elements
● Specified in the start tag
● Syntax: attribute_name=”value”
● Eg:
25. G.H. Raisoni College of Engineering, Nagpur
List Tags in HTML
● List tags are used to group a set of related data.
● There are two types of lists ordered list and unordered list.
● Ordered list is defined using <ol> tag.
● Unordered list is defined using <ul> tag.
● <li> tag is used to define a list item.
29. <img> tag
● The <img> tag is used to embed an image in an HTML page.
30. <a> tag
● The <a> tag defines a hyperlink, which is used to link from one page to
another.
31. G.H. Raisoni College of Engineering, Nagpur
<form> tag
● The <form> tag is used to create an HTML form for user input.
● Methods:
○ get: Adds data to URL
○ post: Used to post/ send form data to a server.
32. G.H. Raisoni College of Engineering, Nagpur
Semantic tags
● Used to describe the webpage to a browser.
● Some of the semantic tags are:
➔ <header>
➔ <main>
➔ <footer>
➔ <nav>
➔ <div>
➔ <section>
33. G.H. Raisoni College of Engineering, Nagpur
Learn more about HTML on:
1. W3Schools
2. MDN Web Docs
34. ● CSS stands for Cascading Style sheets.
● CSS is used to style an HTML document.
● You can alter the font, color, size, and spacing of your
content or add animations and other decorative
features using CSS.
G.H. Raisoni College of Engineering, Nagpur
CSS
41. 1. Content The innermost part of the box that contains the actual
content, such as text, images, etc.
The space between the content and the
element's border. It is specified using the
padding property.
2. Padding
42. 3. Border A border surrounding the padding. It is specified using
the border property.
The space outside the border, creating a gap between
the element's border and adjacent elements. It is
specified using the margin property.
4. Margin
43. Font Size using px
G.H. Raisoni College of Engineering, Nagpur
Styling Text
44. ● Sets the font size defined by
the browser.
● The default size set by
browser is 16px.
● So, 1em = 16px, 2em = 32px
and so on.
G.H. Raisoni College of Engineering, Nagpur
Font Size using em
47. G.H. Raisoni College of Engineering, Nagpur
Flexbox
● Flexbox is a flexible container,
used to create responsive
layouts.
48. G.H. Raisoni College of Engineering, Nagpur
Grid
● It is used to convert a layout
into rows and columns.
49. G.H. Raisoni College of Engineering, Nagpur
Media Queries
● A Media query in CSS is used
to create a responsive web
design.
● They work similar to if
statements.
50. G.H. Raisoni College of Engineering, Nagpur
Transitions
● Transitions allow you to
smoothly change the
property values of an
element over a specified
duration.
51. G.H. Raisoni College of Engineering, Nagpur
Animations
● Animations provide more
control over intermediate
states and timing.
52. G.H. Raisoni College of Engineering, Nagpur
More CSS:
1. W3Schools
2. MDN Web Docs
53. G.H. Raisoni College of Engineering, Nagpur
● Javascript is the scripting language for web pages.
● It is one of most popular programming language.
● It is a dynamically typed.
● Can be used for client-side as well as server-side.
Javascript
54. G.H. Raisoni College of Engineering, Nagpur
“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
55. G.H. Raisoni College of Engineering, Nagpur
● To make your website dynamic.
● To make it reactive.
● To integrate APIs.
Why use Javascript?
56. G.H. Raisoni College of Engineering, Nagpur
● JavaScript Variables can be declared-
○ using let
○ using const
Variables
57. G.H. Raisoni College of Engineering, Nagpur
● Mutable Variables
● Variables are block scoped meaning
they are only accessible within a
block.
Using ‘let’:
58. G.H. Raisoni College of Engineering, Nagpur
● Immutable Variables
● Once assigned the value cannot be
changed.
Using ‘const’:
59. G.H. Raisoni College of Engineering, Nagpur
● Data types in javascript are-
○ String
○ Number
○ Boolean
○ Null
○ Object
○ Array
Data types
70. G.H. Raisoni College of Engineering, Nagpur
● DOM stands for Document Object Model.
● DOM is created when a page loads.
● With DOM manipulation we can create a dynamic
web page.
● React to different events.
● HTML DOM model is constructed as a tree of Objects.
DOM Manipulations
71. G.H. Raisoni College of Engineering, Nagpur
● Events are things that happen on the webpage.
● For example, when a button is clicked, form is
submitted, etc.
● Javascript can react to these events.
● HTML allows event handler attributes, with JavaScript
code, to be added to HTML elements.
Events and Event Handlers
73. G.H. Raisoni College of Engineering, Nagpur
● Introduced in ES6 version of javascript.
● They are a object oriented programming concept.
● Classes are templates for objects.
● Defined using “class” keyword.
Classes in Javascript
74. G.H. Raisoni College of Engineering, Nagpur
● Async and Await are used to run js asynchronously.
● Async returns a promise.
● Await makes a function wait till the promise is
resolved.
Async and Await (Advanced)
79. Map of the journey:
2 4
1 3 5
6
HTML and CSS
Fundamentals
JavaScript Essentials
Front-end Frameworks
Back-end Frameworks
Databases
Deployment and
Hosting
81. G.H. Raisoni College of Engineering, Nagpur
Aspects of Web Development :
Front-End Development Back-End Development
82. What is Framework?
Developer without framework Developer with framework
A framework provides essential pre-built tools and libraries needed for development.
84. A Glance at Typescript :
What is TypeScript?
● TypeScript is a superset of JavaScript.
● It adds optional static typing and other
features to enhance JavaScript
development.
Key Features:
• Static Typing: Catch errors during development.
• Modern ECMAScript Features: Supports the latest
JavaScript features.
• Tooling Support: Strong integration with editors and
IDEs.
• Readability: Enhances code readability and
maintainability.
Why TypeScript?
• Early Error Detection: Find bugs before
runtime.
• Enhanced Productivity: Better development
experience.
• Scalability: Ideal for large codebases.
How to Use:
Install TypeScript: “npm install -g typescript”
Create a TypeScript file: “example.ts”
Compile to JavaScript: “tsc example.ts”
85. Understanding Angular
● Angular is a open-source web application framework maintained by
Google and a community of developers.
● Angular is written in TypeScript.
● Angular provides a structured approach to web development by
incorporating a set of tools, libraries, and best practices.
● Angular makes web development easy with components generation.
86. Setup and Installation
CLI
● Search Node.js on Google
● Download Node.js from official website
● Run Node.js exe file.
● Open CMD
● Run “npm install -g @angular/cli”
● Run “ng version” command after
installation.
87. Creating New Angular Project
● Open new terminal
● Run “ng new your-project-name”
● Enter directory using “cd your-project-name”
● Run “ng serve --open”
89. Components
● Components are the building
blocks of an Angular project.
● Components provide reusability.
● Run “ng generate component <component-name>” to create a new component.
● Import the component wherever, you want to use it.
91. ngFor
● Used for rendering a set of
elements for each item in a
collection (array or iterable).
ngIf
● Used for conditionally rendering an
element based on a given
expression or condition.
92. Routing
● Angular uses the “RouterModule” to set up and configure the routing in an
application.
● The “Routes” type is used to define the routes in an Angular application.
● “RouterOutlet” is a directive used in the template to mark the area where the
routed component will be displayed.
● “RouterLink” is a directive used to create links that navigate to a specific route
when clicked.
94. @Input() Property
● Inputs allow components to share data from parent to child component.
Parent Component Child Component
Data Flow
95. Services
● Services in Angular are a way to organize and share code across
components.
● used for tasks such as data fetching, business logic, or communication
between components.
● Two key elements are : Singleton Instances & Injection Dependency.
96. Injection
● Facilitates Loose Coupling and Reusability.
● hierarchical injection system ensures that each component receives the
appropriate instance of the service.
103. G.H. Raisoni College of Engineering, Nagpur
Firebase
● Firebase is a Backend-as-a-Service(BaaS).
● It is a suite of tools for building apps on top of Google
Cloud Platform.
● It has three main services, i.e., a real-time database, user
authentication, and hosting.
107. G.H. Raisoni College of Engineering, Nagpur
Installing firebase CLI tools
● To install firebase CLI, run the following command:
npm install -g firebase-tools
● Then run,
firebase login
To connect firebase CLI to your account.
108. G.H. Raisoni College of Engineering, Nagpur
Integrating firebase with Angular
● To add firebase to your angular app, run command:
ng add @angular/fire
109. G.H. Raisoni College of Engineering, Nagpur
Firebase Auth
● Firebase Authentication provides backend services to
authenticate users to your app.
● It supports authentication using passwords, phone
numbers, popular federated identity providers like
Google, Facebook and Twitter, and more.
110. G.H. Raisoni College of Engineering, Nagpur
Firestore
● It is a NoSQL database.
● Hosted on cloud.
● Easily accessible.
● Data is stored in JSON format.
111. G.H. Raisoni College of Engineering, Nagpur
Firestore
Collection
Collection
Document
Document
Document
Document
Document
112. G.H. Raisoni College of Engineering, Nagpur
Firestore Security Rules
● Used to control access to data.
● By default, firestore denies access to all third-party users.
● Can be made as complex as you want.
113. G.H. Raisoni College of Engineering, Nagpur
Add Data to firestore
● To add data to firestore setDoc() method is used.
● This method will update the document if it already exists.
114. G.H. Raisoni College of Engineering, Nagpur
Retrieve data from Firestore
● getDoc() function is used to retrieve a single document
from firestore.
● To retrieve the entire collection we use getDocs()
function.
115. G.H. Raisoni College of Engineering, Nagpur
Cloud Storage
● Cloud storage in firebase is used to store and serve
user-generated content, such as photos or videos.
● It can perform uploads and downloads regardless of
network quality.
● Files are stored in Google cloud storage Bucket.
116. G.H. Raisoni College of Engineering, Nagpur
Hosting
● Firebase Hosting provides fast and secure hosting for
your web app.
● All content is served over an SSL connection from the
closest edge server on our global CDN.
● Also, supports github integration.
117. G.H. Raisoni College of Engineering, Nagpur
Deploy your Angular project
● First use the command:
firebase experiments:enable webframeworks
● Then, run:
Firebase init hosting
● And, finally run:
firebase deploy
118. G.H. Raisoni College of Engineering, Nagpur
Want to learn More?
Refer to: Firebase Docs