Professional

Diploma
in

Web Design
Course Educator:
Kate Savage

Lesson 1:
Professional Diploma In Web Design – Professional
Introduction to Web Design
Module 1Diploma in Web Design – Module 1
Did you know?
• On average a user will have an opinion about

your site in 50 MILLESECONDS!

• 39% of users will leave if your websites images

load too slowly or fail to load at all.

Professional Diploma In Web Design – Module

Diploma 1 in Web
Professional Design
Diploma in X – – Module
Module 1 1
MEET Story

YOUR Computer nerd since 2013, I graduated with 15

Distinctions and some great experiences. I am
here to share my passion for everything IT with
Educator you!

Kate Savage
Skills
Experienced College Lecturer
Web Design
“No thief, however skillful, Web Development
can rob one of knowledge,
Programming
and that is why knowledge
is the best and safest Karaoke
treasure to acquire.” ―L.
Frank Baum

Diploma
Professional Diploma In Web Design in1Web
– Module Design – Module 1
 Download the app
Handy
reminder!

Join class or
watch the
recording

Click ‘courses’
Remember to ‘allow
notifications’

Professional
Professional Diploma
Diploma in Nutrition
In Web Design – Module
– Module 1 1
 www.shawacademy.com

Professional
Professional Diploma
Diploma in Nutrition
In Web Design – Module
– Module 1 1
Professional Diploma In Web Design – Module 1
Professional Diploma In Web Design – Module 1
 How to
interact
ASK & ANSWER QUESTIONS HERE

Chat with Morpheus

Chat with the classroom

Remember to rate the responses so

we can improve them

[email protected]

Professional
Professional Diploma
Diploma In
In Web Diploma
Web Design
Design – in11Web
– Module
Module Design – Module 1
 Module Break Down

Module 1 Module 2 Module 3 Module 4

Basic Intermediate Advanced Proficient

4 Weeks 4 Weeks 4 Weeks 4 Weeks

8 Lessons 8 Lessons 8 Lessons 8 Lessons

Professional Diploma In Web Design – Module 1

 What Do You Get Out Of This?
A Professional Diploma in Web Design

B Become a Master Web Designer

C Design Experience

D Tips & Tricks

Professional Diploma In Web Design – Module 1

 Lesson
Objectives
– Discover HTML & CSS

– Learn The Difference Between

Designers & Developers

– The Internet & Cloud Explained

– Creating a Basic Site

– Inserting Images Into A Website

Professional Diploma In Web Design – Module 1

 Welcome To The World Of Web Design!

Professional Diploma In Web Design – Module 1

Website Web Application
• Informational • Interactive

• Websites are static • Web Apps are dynamic

• User authentication is not • Prompt the user to sign up

needed to view informal before granting full access to
Websites the application

Professional Diploma In Web Design – Module 1

 Web Designers

• Uses HTML and CSS to structure and

style websites.

• Overall look and feel of a website in

terms of fonts, colour, images, etc.

• User experience and interface is the

prime focus of the designer.

Professional Diploma In Web Design – Module 1

 What is the Internet?
• “The global Internet consists of tens of thousands of
interconnected networks run by:

• Service providers
• Individual companies
• Universities

• Permission from a central authority is not required

before content can be creates.” (Internet Society, 2019)

• *Internet Society. (2019, July 19). About the Internet. Retrieved from Internet Society:
https://www.internetsociety.org/internet/?gclid=EAIaIQobChMI2MO074rB4wIVDOh3
Ch16qgcFEAAYASAAEgIqEfD_BwE

Professional Diploma In Web Design – Module 1

 What is The Cloud?
• “A global network of servers, each with a unique function.

• Vast network of remote servers around the globe which are hooked
together and meant to operate as a single ecosystem.

• These servers either store and manage data, run applications, or deliver
content or a service.

• Instead of accessing files and data from a local or personal computer,

you are accessing them online from any Internet-capable device.

• The information will be available anywhere you go and anytime you need
it.”(Microsoft Azure , 2019)

*Microsoft Azure . (2019, July 19). What is the cloud? Retrieved from Microsoft Azure :
https://azure.microsoft.com/en-us/overview/what-is-the-cloud/

Professional Diploma In Web Design – Module 1

 Web Designer Web Developer
• Develops the backend code.
• Ensure that the website
looks appealing to • Focuses on functionality &
users.
Usability
• Focuses on Content
• User Interface Oriented
Creation
• Uses languages such as Java
• User Experience
Script & PHP
• Colour Schemes,
Images and content

Diploma
Professional Diploma In Web Design in1Web
– Module Design – Module 1
 The Four Stages of Web Design

Launch
Graphics – Site signed off and
ready to go live.
Content – Colors
– Final testing
– Fonts
Layout – Content Placement completed
– Images
– Navigation – Monitoring site hits
– Wireframes – Weighing up
– Graphics functionality and
– Text content.
– Advertisements

Professional Diploma In Web Design – Module 1

 Wireframes

• Basic layout of your website.

• Ensures the layout is appropriate

for your site before you begin work.

• Allows you to play with the

arrangement on elements to
highlight important features.

Professional Diploma In Web Design – Module 1

 What is HTML?

• Hyper Text Mark up language

• What HTML does is allow designers and

developer to structure websites in a user
friendly way.

• Creates docs designed to be shown in

web browsers.

Professional Diploma In Web Design – Module 1

 Most websites follow a basic structure:

Professional Diploma In Web Design – Module 1

CSS – Cascading
Style Sheets
• Describes how your HTML will appear
in the web browser.

• Font, borders, image formatting,

customising elements, etc.

• Can be saved separately to your HTML

file but will remain linked.

Professional Diploma In Web Design – Module 1

 JavaScript
• Programming language used to add
advanced functionality to websites and
develop computer programs.

• JavaScript is a great foundation coding

language.

• A common language for client-side

interactions.

Professional Diploma In Web Design – Module 1

 Recommended Software:

Professional Diploma In Web Design – Module 1

Java Integrated Development Environment

Professional Diploma In Web Design – Module 1

 How To Inspect Webpages
Professional Diploma In Web Design – Module 1
 Let’s Talk Tags!

Professional Diploma In Web Design – Module 1

 HTML Basics – Let’s
Talk Tags:
• Allows the designer to customise
the website using different tags.

• Remember that all tags have an

opening and closing tag!

• Tags can be recognised by these

braces = < >.

Professional Diploma In Web Design – Module 1

 Important Tags

<body> - Contains a
<!DOCTYPE> - Defines <!- - This is a <head> - Contains
large majority of site
Document Type comment - - > document details.
data.

<title> - What will be <h1> - Formats text <p> - Uniform format

shown on Internet using bold and for general
Tabs. increased font information.

Professional Diploma In Web Design – Module 1

 FAQ’s
1. Is HTML case sensitive?
It is not, but lower case is more commonly used.

2. Which Web browser should I be using?

Your best option would be Google Chrome, please do
not use Internet explorer (certain functionality is not
supported).

3. Will my notepad HTML be live on the internet straight

away?
No, you will need to host your website on a webserver.
(Explained in later modules)

Professional Diploma In Web Design – Module 1

 Creating a
Basic
Webpage
Professional Diploma In Web Design – Module 1
 How To Include
Images

Professional Diploma In Web Design – Module 1

<img alt="Happy Robot" src="../Demo%20image/robot.jpg“>

• img alt –alternate name for the image, that will

Image Link show if your image does not display.

• src – explains where the image can be found on

the web/PC.

Professional Diploma In Web Design – Module 1

<link rel="stylesheet" type="text/css“href="HelloCSS.css">

• link – creates a connection between HTML

documents and external documents such
HTML to CSS as CSS.

• rel – States the relationship between

documents.

Diploma
Professional Diploma In Web Design in1Web
– Module Design – Module 1
Professional Diploma In Web Design – Professional
Module 1Diploma in Web Design – Module 1
 Coming up
In the
Next
Lesson
Professional Diploma In Web Design – Module 1
 Your Sneak Peak
into Lesson 2:

Create a basic webpage for ‘The Gaming Den’:

• How to create a table

• How to change font-families

• Footers

• Background images

And so much more… So don’t miss out!

Professional Diploma In Web Design – Module 1

• HTML - Hyper Text Mark-up Language, structures the content of websites.

• CSS - Cascading Style Sheets, make the site more appealing by introducing
colour, fonts, etc.

• The Cloud - Describe a global network of servers, each with a unique function.

• The Internet - the global Internet consists of tens of thousands of interconnected

networks run by: service providers, individual companies etc.

Professional Diploma In Web Design – Module 1

 Lesson Challenge
Post on any of our Social media

platforms the most interesting

fact you learnt during this

lesson.

https://www.facebook.com/shawacademy
Professional Diploma In Web Design – Module 1
 Congratulations on
Completing Lesson 1!

• You have just taken the first step on the road

to getting your Diploma!

• Please feel free to send us feedback and any

suggestions.

Email: [email protected]

Professional Diploma In Web Design – Module 1

 THANK YOU
For attending!
Lesson
Eight
Lesson
Six
Lesson
Two Lesson
Lesson Four
One
Lesson
Week One
Three Lesson
Completed!
Five Lesson
Seven

SEE YOU SOON FOR YOUR NEXT LESSON!

Professional Diploma In Web Design – Module 1

 THANK YOU
For attending!
Lesson
Eight
Lesson
Six
Lesson
Two Lesson
Lesson Four
One
Lesson
Week One
Three Lesson
Completed!
Five Lesson
Seven

SEE YOU SOON FOR YOUR NEXT LESSON!

Professional Diploma In Web Design – Module 1