Websites Design
Dr. Mahmoud Bakr
1
Agenda
• Introduction
• Why do we need to create a website?
• Steps to create a website:
o Select Domain Name
o Select Hosting
o Develop website
o Secure Website
o Website Design
o UI & UX
o Website promotion
o Performance metrics analysis
2
Introduction
Course name:
Website Design
General objectives of the course:
The course aims to provide the student with the necessary
skills to use the basic tools to build a website on the World
Wide Web (the Internet).
3
Intended learning outcomes of the course
A- Knowledge and understanding
• Direct interaction with websites.
• Recognizing the importance of the Internet and the web.
• Recognizing web design languages.
• Recognizing web design language editing programs.
• Recognizing models of different types of websites.
B- Mental skills
• Understanding the components of web design languages.
• The student learns the basics of one of the design languages
4
Intended learning outcomes of the course
C - Professional and practical skills
• Building a site with diverse content using application programs.
• Publishing a site on the World Wide Web WWW
• Dealing with website design programs.
D - General and transferable skills
• Acquires the skill of dealing with information technology
• Acquires the ability to self-educate
• Acquires the skill of teamwork
5
Course Content
1- Introduction
2- Web Design
3- HTML
4- Style sheets
5- JavaScript
6- PHP
6
Marks
Item Marks
Attendance, 10
Assignments and Activities (Reports)
and Quiz
Mid Term Exam 20
Practical or Project 10
Final Exam 60
Total 100
7
Introduction
• Internet:
The Internet is a vast global network that connects millions of computers and
devices, allowing them to communicate and share information. It is a
decentralized system of interconnected networks that use standardized
communication protocols, primarily TCP/IP (Transmission Control
Protocol/Internet Protocol).
8
Introduction
How It Works
Networks & Servers – The internet consists of servers (which store websites, files,
and data) and client devices (like computers, phones, and smart devices) that access
these resources.
Protocols – The internet follows rules (protocols) like HTTP/HTTPS (for websites),
FTP (for file transfers), and SMTP (for emails).
IP Addresses & Domain Names – Every device has an IP address (like a digital
home address), while domain names (e.g., google.com) make it easier for humans to
navigate.
Data Transmission – Information travels in small packets across various paths
(routers and switches) until it reaches its destination.
The World Wide Web (WWW) – The internet hosts the Web, which includes
websites, online services, and cloud-based applications.
9
Website
A website is a collection of web pages that are hosted on the
internet and accessible through a web browser (like Chrome,
Firefox, or Safari). Each website has a unique domain name
(e.g., google.com) that helps users find it easily.
10
Key Components of a Website
1. Web Pages – Individual pages that contain text, images,
videos, and links.
2. Domain Name – The address of the website (e.g.,
example.com).
3. Web Hosting – A server that stores the website's files
and makes them accessible online.
4. HTML, CSS, & JavaScript – The code that structures,
styles, and adds interactivity to a website.
5. Navigation – Menus and links that help users move
between pages.
11
Types of Websites
• Static Websites – Simple, fixed content (e.g., personal blogs,
portfolios).
• Dynamic Websites – Interactive, database-driven (e.g.,
social media, news sites).
• E-commerce Websites – Online stores (e.g., Amazon,
Shopify).
• Web Applications – Advanced interactive tools (e.g., Gmail,
Google Docs).
12
Why do we need to create a website?
• Introducing people to you, your business and your services.
• Attracting new customers.
• Showing people your products and services.
13
Steps to create a website:
• Choosing your website domain name
o Choose a name that expresses the activity and content of the site, is
easy to remember, and is short.
o Choose the appropriate extension: .com, .org, .net
o Domain name is purchased from service providers like namecheap,
godaddy,...
o Open godaddy and try to search about domain name
14
Steps to create a website:
• Hosting
o A place on the Internet where your website's files will be stored.
o Hosting Types:
االستضافة المشتركةshared hosting
صصة
ّ استضافة ُمخDedicated hosting
االستضافة الخاصة الوهميةVirtual Private Server VPS
o : شركات االستضافة مثلGodaddy , hostgator , …
15
Steps to create a website:
• Determine how to create the website:
o Use website building platforms such as:
https://app.site123.com/
https://sites.google.com/new
https://www.wix.com/
https://www.canva.com/
https://app.wuilt.com/account/login
...
o Create a website from scratch
By yourself or with the help of web developers
Gives you complete control over your site.
16
Steps to create a website:
• If you decide to build a website yourself, you must know
these techniques necessary to create a professional website
from scratch.
• HTML
• CSS
• JS
• DB
• Server Side Language : C# , Php, Java, Python, Node js ,…
17
Steps to create a website:
• Securing website
SSL
Backup
SQL injection
Session Hijacking
DOS (Denial of Service)
18
Steps to create a website:
• Attractive website design
Color themes
Simple
Interactive
Responsive
Easy to use
User Experience like other sites
19
Steps to create a website:
• Easy and smooth user experience
o Loading speed
o Break long texts into short paragraphs.
o Use bullet points
o Choose colors, formats and fonts carefully
o Search
o Responsive website
20
Steps to create a website:
• Website Promotion
o SEO
o Social Media Marketing
o Advertising
o Email Marketing
21
Steps to create a website:
• Website Performance Metrics Analysis
o Google Analytics.
o Hosting management Apps (Plesk, cPanel,…)
o Online Tools like (simpleanalytics.com)
22
Assignment 01
o Create a website using one of website building platforms such as:
https://app.site123.com/
https://sites.google.com/new
https://www.wix.com/
https://www.canva.com/
https://app.wuilt.com/account/login
…
And Send me the URL (website address) and your name on WhatsApp
Group or MS Teams
23
Thanks
24
