Web Design

Introduction to the Course

- This comprehensive course will equip aspiring freelance web
designers with the skills and knowledge needed to excel in the
field.
- It covers essential web design technologies, including:

2
Introduction to the Course
- Many of the activities you do every day can be entirely performed
online.

Online shopping Social Media Online Games

- You can work, engage with your colleagues, and be productive all
from the comfort of your home.
- All of that is possible because of the Internet, infrastructure
and technologies, and skilled professionals who build the apps
that you use.

3
Introduction to the Course
- In this course, you will cover an introduction to how the web
works, including:

Web-pages Web-servers Web-browsers

and what their role is in bringing the Internet to you.

- You will also get hands-on practice using core Internet
technologies like HTML, CSS, and JavaScript.
- You will learn how developers bring these technologies together
and build functional and interactive websites and web
applications.

4
Introduction to the Course
- You will explore some of the tools used by professional
developers:

web browsers built-in

Integrated development
developer tools
environment or IDE

- Professionals use IDEs to write code more efficiently.

5
Introduction to the Course
- You will begin your coding journey with an introduction to HTML
and CSS.
- You will learn the basics of each of these languages and how they
compliment each other to layout and style elements on a web
page.
- Additionally, to ensure your web-page is accessible to everyone,
you will learn how to code with JavaScript for web accessibility.
- In summary, this course provides you with an introduction to
web development.

6
Course Structure

- Module 1: Introduction to Web Design

- Module 2: Styling with CSS

- Module 3: JavaScript for Web Designers

- Module 4: UI/UX Principles

- Module 5: Project-Based Learning

7
Overview of Web Design

8
Front-end, back-end and full-stack developer
- Many roles are involved in delivering web applications to users.
- Web developer roles are usually split into front end, back end
and full stack

Full-stack

Front-end Back-end

9
Front-end
- A front-end developer is someone who works on all parts of a
website or web app that users will interact with.
Style Buttons Menus
Colors User interactions
- The skills of a front-end developer can vary, but they will always
focus on three leading technologies.

10
Front-end
- For example, suppose you are a front-end developer assigned
the task of adding a newsletter sign-up option to the home page
of a website.
- In this case, you would use HTML to build the display elements

11
Front-end
- You can then use CSS to position, color and style these elements
on the page.

12
Front-end
- And finally, you can use javascript to process the activity when
the user clicks the button.

13
Back-end
- A back-end developer works on the parts of a website or web app
that the end users don't see.
- Back-end developers are responsible for creating and
maintaining functionality when users request information or
when the website needs to communicate with another part of
the web architecture.
- For example, completing an online purchase using a credit card.
- A back-end developer will facilitate the interaction of the website
and the content stored in the database.
- Back-end development requires knowledge relating to back-end
programming language, database management systems, API,
and web servers;

14
Full-stack
- A full-stack developer is someone equally comfortable working
with front- end and back-end technologies.
- Full-stack developers have skills and knowledge in all areas of
the web development project cycle.
- For example, they have relevant expertise in the planning
architecture, design, development, deployment, and
maintenance of the website or web.

15
How Internet Works?
- Thanks to the internet, devices can connect and communicate
via a wired or wireless connection.
- When we use websites or video streaming services on the
Internet, these are provided by computers called servers.
- Our devices are called clients.
- This is known as the client-server model.

16
What is Web Server?
- A web server, a computer that runs applications and services,
plays a crucial role in the digital world, from hosting websites to
managing instant messaging.
- It's called a server because it provides a service to other
computers and users, who are also known as clients.
- A web server has many functions, which include website storage
and administration, data storage, and security.
- Another primary function of a web server is to handle web
requests.
- When you open a browser on your device and type the website's
name, the web server sends you back to its content. This process
is known as the request-response cycle.
- Web servers are also designed to respond to thousands of
requests from clients per second
17
Request-response Cycle

18
Question
- A server is a computer that runs applications and services, such
as websites and instant messaging. You have just learned about
a web server, which is a specific type of server. Which of the
following statements is true? Choose all that apply.
q A web server can handle security.
q Web servers don't perform email management.
q A web server can function as website storage and administration.
q Web servers can handle thousands of requests from clients per
second.

19
Web Pages and Websites
- A web page is a document that displays images, texts, videos
and other content in the web browser.
- A website is a collection of webpages that link together.
- For example, where you visit your favorite website.
- When you arrive at the homepage, it contains many links to
different pages. Clicking on one of those links brings you to a new
webpage, and that page may link to even more pages and other
web pages.
- However, the links on the page do not all have to link to the same
website, they can also link to other websites.

20
Web Pages and Websites
- In its most basic form, a webpage is just a text document, you
can open and edit with any text editor.
- Developers usually use more sophisticated tools for working with
webpages.
- If you want to work with a webpage, you need to know about
three technologies and understand how they interact, their
HTML, CSS and JavaScript.
- HTML structures the content you see, CSS controls the colors and
style and JavaScript is responsible for the user interaction.

21
Web Pages and Websites

22
Question
- Which of the following technologies is used to structure content
on a webpage?
q HTML
q CSS
q JavaScript

23
Web Browser
- You now know about the essential technologies that the web
page contains, But how exactly does this code translate to
display the content you see on your screen?
- When a copy of that webpage is sent from the web server to your
browser, each line of code is processed in sequential order.
- As each line is interpreted, the browser creates the building
blocks, which is the visual representation you see on the screen.
- This creation process is known as page rendering.

24
Web Browsers
- A web browser, or browser for short, is a software application for
browsing the World Wide Web.
- It works by sending a request to a web server and then receiving
a response containing the content that is to be displayed on the
screen of your device.
- Once the browser is open on your device, there is the address bar
where you input the address of the website that you want to visit.

25
Web Browsers
- The address is commonly known as the Uniform Resource
Locator or URL for short.
- The URL contains the protocol or the HTTP, the domain name,
usually the name of the website, and the file path, or the path to
the page that is displayed.

- When you make a request using this URL, the browser and server
communicate using a protocol known as the Hypertext Transfer
Protocol or HTTP.
- Once the web browser receives the content, it displays it on the
screen of your device.
26
Question
- True or false: A web browser is a software application that you
use to browse the world wide web.
q True
q False

27
Web Hosting
- But what if you wanted to create your own website?
- Do you really need your own data center with specialized
hardware and software?
- Thankfully, the answer is no.
- Developers can launch websites to the Internet using something
known as web hosting.
- Web hosting is a service where you place your website and files
on the hosting companies web server.
- You're essentially renting the space in return for stable and
secure storage.

28