Scribd
Upload
7 views

Web Application Development

Uploaded by

Nida malantawan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Web Application Development

Uploaded by

Nida malantawan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Web Application

Development
Understanding the Basics of Building
Web Applications
Overview
Agenda
• Front-end vs. Back-end Development
• HTML, CSS, and JavaScript Basics
• Introduction to Frameworks (React, Angular, Vue.js)
• Building a Simple Web Application
Front-end vs. Back-
end Development
Front-end Development:
• Focuses on the user interface and experience
• Technologies: HTML, CSS, JavaScript
• Frameworks: React, Angular, Vue.js
• Tools: Chrome Developer Tools, Visual Studio
Code
Front-end vs. Back-
end Development
Back-end Development:
• Focuses on server-side logic and databases
• Technologies: Node.js, Python, Ruby, PHP
• Databases: MySQL, MongoDB, PostgreSQL
• Tools: Postman, Database Management
Systems
HTML, CSS, and
JavaScript Basics
HTML (HyperText Markup Language):
• The structure of web pages
• Tags: <div>, <h1>, <p>, <a>, etc.
HTML, CSS, and
JavaScript Basics
CSS (Cascading Style Sheets):
• Styling of web pages
• Properties: color, font-size, margin, padding,
etc.
HTML, CSS, and
JavaScript Basics
JavaScript:
• Adds interactivity to web pages
• Concepts: Variables, Functions, Events, DOM
Manipulation
Introduction to
Frameworks
Why Use
Frameworks?
• Simplify development processes
• Code reusability and modularity
Popular Front-end
Frameworks:
• React: Developed by Facebook, component-
based
• Angular: Developed by Google, full-featured
MVC framework
• Vue.js: Lightweight, flexible, easy to integrate
Choosing the Right
Framework:
• Project requirements
• Team expertise
• Community support
Building a Simple Web
Application
Setting Up the
Environment
• Install necessary tools (e.g., Node.js, npm)
• Set up a project directory
Creating the Front-end

• Use HTML for structure


• Use CSS for styling
• Add interactivity with JavaScript
Introducing a
Framework (e.g., React)
• Install React
• Create components
• Render a simple user interface
Testing and Deployment

• Test your application locally


• Deploy using platforms like GitHub Pages,
Netlify
Thank You

You might also like