ADNAN SALMANI

Crafting
the Web
An Introduction to Web Development
 Agenda

Introduction to Web Development 3 Frond-End vs Back-End 8-9

Why Learn Web Development? 4 Building Your First Website 10

Case Study 11
Key Concepts in Web Development 5
Web Security 12

Web Development Languages 6 Responsive Design 13

Web Development Tools 7 Resource Page 14

Introduction to
Web Development
Web development involves creating websites and web applications accessible
via the internet or private networks.
It includes both front-end development and back-end development.
Developers use languages like HTML, CSS, JavaScript, and more to build web
projects.
Web development focuses on delivering a user-friendly and visually appealing
experience.
It requires ongoing maintenance, updates, and security enhancements to keep
websites and apps functional and secure.
 High Demand for Skills

Why Learn Versatility

Creative Expression
Web
Entrepreneurial Opportunities
Development?
Remote Work Opportunities
Learning web development offers
numerous compelling reasons, making it Lucrative Salaries
an attractive skill set for various
individuals and professionals.
Global Reach
Problem Solving
 Client-Server Architecture

HTTP and HTTPS

Key Concepts
Uniform Resource Locator (URL)
in Web Domain Name System (DNS)

Development Web Browsers

Key concepts in web development
Hypertext Markup Language (HTML)
encompass fundamental principles and
ideas that underpin the creation and
Responsive Design
maintenance of websites and web
applications. Application Programming Interfaces (API)

Search Engine Optimization

Web Development
Languages
HTML
form the foundation of creating dynamic
and interactive websites and web
applications.
CSS

HTML CSS

JS
JS PHP

PYTHON SQL
 Web Development Tools
Web development involves a wide range of tools that help developers create,
test, debug, and manage websites and web applications.

#1 #2 #3 #4 #5

IDEs Version Control Package Managers Web Browsers DBMS

Visual Studio Code Git Node Package Microsoft Edge MySQL

Sublime Text GitHub Manager Google Chrome MongoDB
Atom Yarn Mozilla Firefox PostgreSQL
FRONT-END
Front-end is responsible for the user interface and user experience of a website...

ROLE
Front-end developers, often referred to as client-side developers, focus on the user interface and user
experience of a website or web application.
They are responsible for creating the visual elements that users interact with directly.

TECHNOLOGIES
HTML (Hypertext Markup Language): Used for structuring the content and layout of web pages.
CSS (Cascading Style Sheets): Used for styling and formatting the visual presentation of web pages.
JavaScript: Used for adding interactivity, animations, and dynamic behavior to web pages.

RESPONSIBILITIES
Creating the layout and structure of web pages.
Styling web pages to make them visually appealing and user-friendly.
Implementing interactive features and user interfaces.
BACK-END
Back-end manages server-side logic and data storage...

ROLE

Back-end developers, also known as server-side developers, work on the server-side logic and database of
a website or web application.
They handle the behind-the-scenes functionality that powers the front-end.

TECHNOLOGIES
Server-Side Programming Languages: Back-end developers use languages like Python, Ruby, and others to
build server-side logic.
Databases: Designing and managing databases using technologies such as MySQL,or SQL Server.
APIs: Creating APIs that allow communication between the front-end and back-end, often using REST.

RESPONSIBILITIES
Handling user authentication and authorization.
Processing and storing data in databases.
Building APIs to serve data to the front-end.
 Maintenance
Deployment
Content Creation

Optimization
Design

Building Your
First Website Security Website Planning

The web development process is a

systematic approach to creating Scope
websites and web applications. Development

Database
Research
Front-End

Back-End
Budget
Testing
 Technologies
Netflix, the world's leading streaming platform, utilizes a tech stack that
Netflix heavily relies on microservices architecture. They use JavaScript
(React) for the front-end, a combination of Java and Python for back-
These real-world end services, and Apache Cassandra and Elasticsearch for data
storage and retrieval.
examples showcase the
importance of a diverse Challenges
technology stack, the Netflix faces challenges in delivering high-quality video streaming across
ability to address various devices and network conditions, optimizing content
recommendation algorithms, and ensuring smooth international
scalability and
expansion.
performance issues, and
the significance of user Solutions
experience and security in To overcome these challenges, Netflix employs adaptive streaming
web development algorithms, personalization and recommendation engines powered by machine
projects. learning, and a content delivery network (CDN) that caches content closer to
users. They also invest heavily in content production and localization.
SQL Injection
Use parameterized queries or prepared statements, and
input validation to sanitize user inputs.

Cross-Site Scripting (XSS)

Sanitize and validate user input, and implement Content
Security Policy (CSP) to restrict script sources.
Web
Cross-Site Request Forgery (CSRF) Security
Use anti-CSRF tokens, validate requests, and ensure state
changing operations require user authentication. Web security is a critical aspect of web
development to protect websites and web
Session Hijacking and Fixation applications from various threats.
Implement secure session management, use HTTPS, and
regenerate session IDs upon login.

Brute Force and Credential Stuffing Attacks

Implement account lockout mechanisms, CAPTCHA, and
encourage strong password policies.
 User Experience (UX)
Multi-device Accessibility
Consistent Look and Feel

Responsive SEO Benefits

Google's Mobile-First Indexing
Single URL
Design Increased Reach and Engagement
Emphasizing the importance of responsive Broad Audience Reach
design in web development is crucial Reduced Bounce Rates
because it directly impacts user experience,
Maintenance Efficiency
SEO, and the success of a website or web
Saves Time and Resources
application.
Future-Proofing

Competitive Advantage
Stand Out
Positive Brand Image
 Resource Page
Certainly, here are some resources for further learning and reference in the field of Web Development

“Eloquent JavaScript" by Marijn Haverbeke - Read

1 4 GitHub
Online

"Clean Code: A Handbook of Agile Software

2 5 Stack Overflow
Craftsmanship" by Robert C. Martin

3 W3Schools or Coursera 6 The Net Ninja

THANK
YOU..