This document provides an overview of web development topics including: - Front-end development focuses on the user interface using HTML, CSS, and JavaScript. Back-end development involves server-side logic, databases, and security. - Popular programming languages for web development include JavaScript, Python, and PHP. - Browsers like Chrome, Firefox, and Edge allow users to view websites and act as a gateway to the internet. - HTML is the core markup language that forms the building block of web pages. IDEs (Integrated Development Environments) are tools that help develop web applications.

1. Web Development
Oumaima Inejjarne
Rim Jayed
Wiam Zlihi
Presented by:

2. Formation Planning :
Week 1
Introduction
to the web
Introduction
to HTML
Setting up
IDE
Week 2 & 3 Week 4 &5 Week 6
HTML Document
structure
HTML &
Styling tags
Review &
practice
Introduction
to CSS
Box Model, Display &
Positionning
Tailwind
CSS
Project
presentation

3. Web
What is the Web ?
The web, short for "World Wide Web," is a vast network
of connected computers and servers that enables
people to access, share, and interact with information,
services, and resources over the internet. It's like a
massive digital library where you can browse websites,
view content, and connect with others online.

4. Web
•User Interface (UI): Front-end developers create the user interface, which
includes designing the layout, buttons, forms, and visual elements that you
see on a website.
•User Experience (UX): They also work on the user experience, making sure
the website is easy to navigate and that it looks good on different devices
like computers, tablets, and phones.
Front-End Development
Imagine the front-end as the "face" of a website or web application. It's
what users see and interact with directly when they visit a website.

5. Web
•Languages and Tools: Front-end developers use languages like HTML (for
content), CSS (for styling), and JavaScript (for interactivity) to build the visual
and interactive parts of a website.
Front-End Development

6. Now, think of the back-end as the "brain" of a website or
web app. It's where data is processed, stored, and the
logic that makes things happen behind the scenes.
• Server and Database: Back-end developers work on the
server, which is like a powerful computer that stores
data and responds to requests from the front-end.
Web
Back-End Development

7. • Security: Back-end developers focus on security to
protect data and ensure that only authorized users
can access certain parts of a website.
Web
Back-End Development

8. JavaScript:
• JavaScript is used to add interactivity and
functionality to web pages.
• It enables features like form validation, animations,
and dynamic content.
Exemple of langages used in web developement
Web

9. Python:
Python is used in web development, especially with
frameworks like Django and Flask.
It simplifies building web applications with clean and
readable code.
Exemple of langages used in web developement
Web

10. PHP (Hypertext Preprocessor):
• PHP is a server-side scripting language often used
for web development.
• It can interact with databases, handle form
submissions, and more
· PHP can interact with databases, handle user input,
and create web applications.
Web
Exemple of langages used in web developement

11. Browsers
The Gateway to the Internet
Welcome to the world of browsers! Browsers are your
gateway to the internet, allowing you to access all the
amazing content that exists online. From social media
to shopping to streaming videos, browsers make it all
possible.

12. Browsers
But what exactly is a browser?
At its core, a browser is a software application that allows you to view and
interact with websites. It interprets HTML code and displays it in a user-friendly
format, allowing you to easily navigate through web pages and access the
content you need.

13. Popular Browsers and Their Features
•Google Chrome is known for its speed and simplicity.
•Mozilla Firefox is praised for its privacy features and customization options.
•Microsoft Edge is designed specifically for Windows 10 and offers features
such as Cortana integration and annotation tools for web pages.
Browsers
When it comes to browsing the internet, there are several popular browsers
available. Each browser has its own set of features that make it unique and
appealing to different users.

14. The Building Blocks of the Web
HTML, or Hypertext Markup Language, and it is the
language in which virtually all Web pages are written,
invented by Tim Berners-Lee in 1983.
HTML

15. HTML
•Hypertext means you can create a link in a Web page that leads the visitor
to any other Web page or to practically anything else on the Internet. It
means that the information on the Web can be accessed from many
different directions. The creator of the web wanted it to work more like a
person’s brain and less like a static source of data, such as a book.
•Markup Language is a computer language that uses tags to define
elements within a document. It is human-readable, meaning markup files
contain standard words, rather than typical programming syntax.
So how does Hypertext Markup Language work?

16. Inspiring Examples of Websites
stockfishchess.org
Examples
thisissand.com
amazon.com

17. What is an IDE ?
An integrated development environment (IDE) is software
for building applications that combines common developer
tools into a single graphical user interface (GUI).
I
IDE

18. IDE
•Editing source code .
•Building executables : compilation.
•Debugging : help to identify the bugs in code.
An IDE typically consists of:

19. •An IDE detects the programming language.
•Applies specific colors, fonts, and styles to certain keywords, words, and text.
•Makes your code readable, clean, easier to detect syntax errors, and lots
more.
How it work?
IDE

20. Choice of IDE :
•Some work only online, while others work locally and possibly online.
•Some are dedicated and only work with specific languages, while others are
multi-language and support multiple languages.
Important features:

21. Examples of IDE:
Specialized IDE
PyCharm
for Python
Intellij IDEA
for Java
Code::Blocks
for C/C++
Multi-language IDE
Visual Studio Code or
Visual Studio
Eclipse
Jupyter
Link to download vs
code :
https://code.visualst
udio.com
Choice of IDE :

22. Examples of resources :
•w3school : https://www.w3schools.com
•Freecodecamp : https://www.freecodecamp.org
•OpenClassroom : https://www.openclassrooms.com
•net ninja (youtube)
Learning from online resources.

23. Hope it helps you
Thank you
•web formation