Professional

Diploma
in

Web Design
Course Educator:
Kate Savage

Lesson 2:
Diploma in Web Design – Web
ModuleDesign
1 Foundations
Did you know?

• On a daily basis, 2.9 billion Google

searches are executed.

• Website design is an important

factor for determining credibility
for 48% of visitors.

Diploma
Diploma
Diploma ininWeb
in
Diploma Web
inWeb
Web
Professional Design
Design
Design
Design
Diploma in X – – –––Module
Module
1Module
Module
Module 1 11
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
Develop a passion for Web Development
learning. If you do, you will
Programming
never cease to grow -
Anthony J. D'Angelo Karaoke

Diploma in
Diploma in Web
Web Design
Design –– Module
Module 1
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

support@shawacademy.com

Diploma
Diploma in Web
in
Diploma Web Design
in WebDesign –– Module
Module
Design – Module 1 1
1
Did you miss any lessons? Worried you
will fall behind?

DON’T PANIC!

Remember all lessons are recorded and

available for catch up on
shawacademy.com!

You can also reschedule classes to

better suit your time!

Simply go to
https://live.shawacademy.com/login to
find recordings and rescheduling
options!

Diploma in
Diploma in Web
Web Design
Design –– Module
Module 1
1
 Diploma
Professional Diploma in Diploma in
Nutrition – in Web1Design
Web
Module Design –– Module
Module 1
1
Diploma in Web Design – Module 1
Lesson Objectives:
Comments Explained

Deep Dive Into HTML

Breaking Down Tags

Introduction to Color Codes

The Position Property

Link HTML & CSS

Diploma in Web Design – Module 1

 Why You Should
Comment!

Diploma in Web Design – Module 1

 Why Do We Comment In Our Scripts?

Comments can be used as

Commenting is used to
place marks for where you
explain what your script is
would like to change or add
doing/supposed to do.
something.

In short it is a very necessary evil!

It comes in handy if you are Most importantly it allows anyone

sick or ask someone to help viewing your scripts to be able to
you at work. understand them.

Diploma in Web Design – Module 1

 Comment Tags
HTML

CSS
<!-- -->
/* */
Diploma in Web Design – Module 1
 Dive Into
HTML

Diploma in Web Design – Module 1

 <footer> Details such as copyrights

<img> Allows the use of Images

Let’s Talk <div> Allows the addition of sections

Tags <table> Allows the creation of Tables

<tr> Creates Table Rows

<th> Creates Table Headings

Diploma in Web Design – Module 1

CSS Explained
Diploma in Web Design – Module 1
 CSS Syntax Explained
Selector Property Value

p {text-align: centre;}
Declaration

Diploma in Web Design – Module 1

 Property Description
Name
Static This is the default position and will be positioned in the
regulatory order.

Relative Defines the elements new position with help form elements
such as top. Bottom, left & right.

The Position Fixed This means it stays in the same place even when the page is

Property
scrolled through. This prevents empty space on the page.

Absolute This element allows you to place the element anywhere on

the web page, by using the elements top, bottom, left &
right.

Sticky This is a mixture of fixed and relative. This is based on the

users scroll.

Diploma in Web Design – Module 1

 It’s Time For
A Demo

Diploma in Web Design – Module 1

Website Outline
Diploma in Web Design – Module 1
 Color codes are used to format color in a way that computers
can read.

Introduction To The most commonly codes used are Hex Color Codes made

Color Codes up of 6 digits.

The Three Primary colors are Red, Green and Blue.

#XX XX XX This hex code (RGB) represents Red, Green & Blue by mixing
the highest intensity of one color with the lowest intensities of
the other two you can create any desired color.

Diploma in Web Design – Module 1

 Outline
with CSS

Diploma in Web Design – Module 1

 Table HTML

Diploma in Web Design – Module 1

 Introducing
CSS to Tables

Diploma in Web Design – Module 1

Shaw
Academy
Membership

Diploma in Web Design – Module 1

Coming up
In the
Next
Lesson
Diploma in Web Design – Module 1
Your Sneak Peak
into Lesson 3:
Add additional pages to The Gaming Den and
incorporate more advanced feature such as:

• Navigation Bars
• Creating Multiple Web Pages
• Background Images Cont.
• Formatting Tables Cont.

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

Diploma in Web Design – Module 1

Link between HTML and CSS: Table Format Skeleton:

<link rel="stylesheet" href="GDenCSS.css"> <table>

<tr>
<th> </th>
</tr>
Footer Template: <tr>
<td></td>
<div class="footer"> <td></td>
<p>Copyright 2019</p> </tr>
</div> </table>

Diploma in Web Design – Module 1

Lesson Challenge
Post on any of our Social media

platforms a Screenshot of your

customized site from today’s lesson.

https://www.facebook.com/shawacademy

Diploma in Web Design – Module 1

 Congratulations on
Completing Lesson 2!
• I hope you all had a great time and learnt
something new!

• Please feel free to send us feedback and any

suggestions.

• Email: support@shawacademy.com

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!

Diploma in Diploma
Professional WebinDesign
Photography– Module
– Module 1 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!

Diploma in Diploma
Professional WebinDesign
Photography– Module
– Module 1 1