Solution Challenge GDSC GHRCE WEB DEVELOPMENT.pdf

Kalpak Goshikwar
Web Dev Lead @GDSC GHRCE
Swarnim Chandve
Web Dev Volunteer @GDSC
GHRCE

What is WEB
DEVELOPMENT ?
G.H. Raisoni College of Engineering, Nagpur

● 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.

Why to learn Web
Development ?
● Most Easy to get into
● Endless Job Opportunities
● Diverse Learning Opportunities

● 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

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

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.

● Cassandra(Non-Relational)
● Neo4j (Graph database)
● MariaDB (Relational)
● MySQL (Relational)
● PostgreSQL (Relational)
● MongoDB
(Non-Relational)
Popular Databases

Introduction to HTML,
CSS and JS

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.

Setup

Elements and tags
● An HTML element is deﬁned 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.

Simple HTML Code

<head> tag
● Used to provide metadata for a webpage.
● Typically includes title of the webpage, styles, scripts, etc.

<body> tag
● Deﬁnes the contents of an HTML page.
● Headings, paragraphs, images, etc.

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.

<p> tag
● The <p> tag deﬁnes a paragraph.
● Eg:

<strong> tag
● The <strong> tag is used to deﬁne text with strong importance.
● The contents inside strong tags are displayed in bold.
● Eg:

<em> tag
● The <em> tag is used to deﬁne emphasized text
● The contents inside strong tags are displayed in italic.
● Eg:

<u> tag
● The <u> tag stands for underline.
● Used to add underline to the text.
● Eg:

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.

Attributes in HTML
● Attributes provide additional information about elements
● Speciﬁed in the start tag
● Syntax: attribute_name=”value”
● Eg:

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.

<ol> tag
● <ol> tag deﬁnes an ordered list.

<ul> tag
● <ul> tag deﬁnes an unordered list.

<img> tag
● The <img> tag is used to embed an image in an HTML page.

<a> tag
● The <a> tag deﬁnes a hyperlink, which is used to link from one page to
another.

<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.

Semantic tags
● Used to describe the webpage to a browser.
● Some of the semantic tags are:
➔ <header>
➔ <main>
➔ <footer>
➔ <nav>
➔ <div>
➔ <section>

Learn more about HTML on:
1. W3Schools
2. MDN Web Docs

● 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.
CSS

Selector {
property : value;
}
Syntax

● Inline CSS
● Internal(or Embedded) CSS
● External CSS
Different ways to Write CSS

Element Selector
CSS Selectors

Class Selector
CSS Selectors

ID Selector
CSS Selectors

Box Model

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 speciﬁed using the
padding property.
2. Padding

3. Border A border surrounding the padding. It is speciﬁed using
the border property.
The space outside the border, creating a gap between
the element's border and adjacent elements. It is
speciﬁed using the margin property.
4. Margin

Font Size using px
Styling Text

● Sets the font size deﬁned by
the browser.
● The default size set by
browser is 16px.
● So, 1em = 16px, 2em = 32px
and so on.
Font Size using em

Background Color
Styling Backgrounds

Styling Backgrounds
Background image

Flexbox
● Flexbox is a ﬂexible container,
used to create responsive
layouts.

Grid
● It is used to convert a layout
into rows and columns.

Media Queries
● A Media query in CSS is used
to create a responsive web
design.
● They work similar to if
statements.

Transitions
● Transitions allow you to
smoothly change the
property values of an
element over a speciﬁed
duration.

Animations
● Animations provide more
control over intermediate
states and timing.

More CSS:
1. W3Schools
2. MDN Web Docs

● 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

“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”

● To make your website dynamic.
● To make it reactive.
● To integrate APIs.
Why use Javascript?

● JavaScript Variables can be declared-
○ using let
○ using const
Variables

● Mutable Variables
● Variables are block scoped meaning
they are only accessible within a
block.
Using ‘let’:

● Immutable Variables
● Once assigned the value cannot be
changed.
Using ‘const’:

● Data types in javascript are-
○ String
○ Number
○ Boolean
○ Null
○ Object
○ Array
Data types

● String.length
● string.slice(0, 5)
● string.toLowerCase()
● string.toUpperCase()
● string.split(“ “)
String functions

● array.length
● array.push(value)
● array.pop()
● array.toString()
● array.map()
Array functions

Conditional Statements
If statement:
● If (condition) {
// code to be executed if condition
is true
}

If-else statement:
● If (condition) {
// code to be executed if condition
is true
} else {
// code to be executed when
condition is false
}

Ternary Operator:
(condition) ? //code executed if condition is true : //code
executed if condition is false

Switch Statement:
● switch(expression) {
case x:
// code block
break;
default:
// code block
}

Loops
‘for’ loop:
for (condition) {
// code executed till the condition is true.
}

Loops
‘while’ loop:
While (condition) {
// code executed till the condition is true.
}

Arrow Functions
● Compact alternative to traditional functions:
● Syntax:

● 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

● 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

Common HTML Events
Reference: https://www.w3schools.com/js/js_events.asp

● Introduced in ES6 version of javascript.
● They are a object oriented programming concept.
● Classes are templates for objects.
● Deﬁned using “class” keyword.
Classes in Javascript

● 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)

More JavaScript:
1. W3Schools
2. MDN Web Docs

Rohit Pandilwar
Web Dev Co-Lead @GDSC GHRCE

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

Aspects of Web Development :
Front-End Development Back-End Development

What is Framework?
Developer without framework Developer with framework
A framework provides essential pre-built tools and libraries needed for development.

Front-end Frameworks
Commonly used frameworks/ libraries:
○ Angularjs
○ Reactjs
○ Bootstrap and many more

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 ﬁle: “example.ts”
Compile to JavaScript: “tsc example.ts”

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.

Setup and Installation
CLI
● Search Node.js on Google
● Download Node.js from ofﬁcial website
● Run Node.js exe ﬁle.
● Open CMD
● Run “npm install -g @angular/cli”
● Run “ng version” command after
installation.

Creating New Angular Project
● Open new terminal
● Run “ng new your-project-name”
● Enter directory using “cd your-project-name”
● Run “ng serve --open”

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.

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.

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.

@Input() Property
● Inputs allow components to share data from parent to child component.
Parent Component Child Component
Data Flow

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.

Injection
● Facilitates Loose Coupling and Reusability.
● hierarchical injection system ensures that each component receives the
appropriate instance of the service.

Forms
● Used to handle User Input.

Thank You :)
GDSC GHRCE
Follow us:

Kalpak Goshikwar
Web Dev Lead @GDSC GHRCE

Backend
Reference: MDN Web Docs

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.

Tools
Authentication Functions
Firestore

Tools
Cloud Storage Firebase
ML
Hosting

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.

Integrating firebase with Angular
● To add firebase to your angular app, run command:
ng add @angular/fire

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.

Firestore
● It is a NoSQL database.
● Hosted on cloud.
● Easily accessible.
● Data is stored in JSON format.

Firestore
Collection
Collection
Document
Document
Document
Document
Document

Firestore Security Rules
● Used to control access to data.
● By default, ﬁrestore denies access to all third-party users.
● Can be made as complex as you want.

Add Data to ﬁrestore
● To add data to ﬁrestore setDoc() method is used.
● This method will update the document if it already exists.

Retrieve data from Firestore
● getDoc() function is used to retrieve a single document
from ﬁrestore.
● To retrieve the entire collection we use getDocs()
function.

Cloud Storage
● Cloud storage in ﬁrebase 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.

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.

Deploy your Angular project
● First use the command:
firebase experiments:enable webframeworks
● Then, run:
Firebase init hosting
● And, finally run:
firebase deploy

Want to learn More?
Refer to: Firebase Docs

Solution Challenge GDSC GHRCE WEB DEVELOPMENT.pdf

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Solution Challenge GDSC GHRCE WEB DEVELOPMENT.pdf

Ähnlich wie Solution Challenge GDSC GHRCE WEB DEVELOPMENT.pdf (20)

Mehr von GoogleDeveloperStude22

Mehr von GoogleDeveloperStude22 (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Solution Challenge GDSC GHRCE WEB DEVELOPMENT.pdf