0% found this document useful (0 votes)

47 views93 pages

Web Design

The document outlines a course on Web Design as part of the Bachelor of Science in Office Administration at Gingoog City Colleges, Inc. It covers HTML and CSS basics, website development using CMS tools, and includes a structured course outline with assessments and grading criteria. Students are expected to gain practical experience through projects and demonstrate their ability to create standards-based websites by the end of the course.

Uploaded by

Gabriel Villamor

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

47 views93 pages

Web Design

Uploaded by

Gabriel Villamor

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 93

Gingoog City Colleges, Inc.

University
Brgy. 24-A, Gingoog City
Logo

Bachelor of Science in Office Administration

Prof. Elect. 2 – Web Design
2nd Semester of A.Y. 2021-2022

Course Description Credit Units: 3

This course is intended to provide students with the knowledge and skills necessary
for building and evaluating web sites. It covers a range of topics including: basic
concepts of the Internet and internet browsers, fundamentals of Website design,
Websites building tools and languages, basics of HTML5 (text, fonts, colors, images, lists,
tables, frames, forms),
COURSE GUIDE

After completing this course, the student must demonstrate the knowledge
and ability to apply the design principles, techniques and technologies to the
development of creative websites using CMS i.e., Wix or google site.

Course Outcomes

A. CO1 Providing students with the necessary knowledge and skills in using the various
technologies and tools for developing web sites
B. CO2 Students will gain the skills and project-based experience needed for entry into
web design and development careers.
C. CO3 Students will develop awareness and appreciation of the many ways that
people access the web, and will be able to create standards-based websites that
can be accessed by the full spectrum of web access technologies.
D. CO4 Introducing students to the concepts, terms and technologies used in website
design
Course Outline

Unit 1. HTML Intro

Lesson 1: HTML Basic Elements and Attributes
Lesson 2: HTML Headings, and Paragraphs
Unit 2. HTML Tags
Lesson 1: HTML Formatting, Colors, Links, and Images
Lesson 2: HTML Block & Inline, Classes, ID, and Layout

Page 1
Unit 3. HTML Advanced Topics
Lesson 1: HTML Forms
Lesson 2: HTML Media and APIs

Unit 4. CSS Implementation

Lesson 1: CSS Colors, Formatting, Text, Fonts, Display, and Position
Lesson 2: CSS Box Model, Navigation, Dropdowns and Image Gallery
Lesson 3: CSS advanced topics

Unit 5. Content Management System

Lesson 1: Wix
Lesson 2: Free Web hosting
Lesson 3: WordPress

Course Materials

List of the materials needed for you to will engage with for the course.
• Course Guide
COURSE GUIDE

• Course Module
o Recommended: Web sites
o www.w3schools.com/html and www.w3schools.com/css
o www.wix.com/Create-a-Site/with-CMS
o www.site.google.com
o www.000webhost.com/
• Mobile Phone
• Desktop/Laptop Computer
o Sublime, notepad, notepad++
• Connectivity DSL/Mobile Internet

Study Schedule
WEEK TOPICS ACTIVITY

Week 1: Syllabus, Course Overview • Problem and

Unit 1: HTML Introduction and basic tags Exercises

Unit 2: HTML Tags

• Problem and
Week 2: L1: HTML Formatting
Exercises
L2: HTML Blocks and Inline

Unit 3: HTML Advanced Topics

Week 3: • Problem and
Unit 4: CSS Implementation
Exercises
L1: CSS Colors, Formatting, Text, Fonts,
Display, and Position
Midterm Examinations
(March 4, 2022)

Page 2
Unit 4: CSS Implementation
L2: CSS Box Model, Navigation, Dropdowns • Problem and
Week 4:
and Image Gallery Exercises
L3: CSS advanced topics

Unit 5: Content Management System

Week 5: Create a website as a
L1: Explore Wix
Final Output
L2: Create a website using Wix

Unit 5: Content Management System

Week 6: Create a website as a
L1: free domain & web hosting
Final Output
L2: Use 000Webhost

Unit 5: Content Management System

Week 7: Create a website as a
L1: Explore WordPress
Final Output
L2: Create a website using WordPress
COURSE GUIDE

Final Examinations
(April 6, 2022)
Course Requirements

Assessment Tasks and Final Output (Individual)

There will be problems and assessment task which must be submitted. The
due dates for the assessment tasks are final and there will be no make-ups or
individual extensions. In addition to the hardcopies of assessment tasks, electronic
(and certifiably virus free) copies should be e-mailed to me on the date they are due.
The subject of the e-mail should identify the course and the tasks. File names should
clearly identify the course and the task.

Grading System

Midterm Points System Final

Assessment Task: 50 points Written Works (40%) +
Written Works (40%) + Final Output: 100 points Output (30%) +
Output (30%) + • Website Idea – 15 points Exam (30%) = FT Rating
Exam (30%) = • Content – 15 pts
(100%)
• Navigation – 15 pts
Midterm Grade
• Overall Look – 40 points
(100%) Final Rating (70%) +
• Timeliness – 15 points
Class Attendance and Midterm Grade (30%)
Participation – 20 points = Final Grade (100%)

Page 3
Important Reminders

• Begin by reading and understanding the Learning Outcomes/Competencies.

These will tell you what you should know and be able to do at the end of this
course.
• Find out what you are going to know about this course guide/module by taking
the Assessment Tasks.
• Do the required Assessment Tasks. It begins with one or more Information. An
Information contains important notes or basic information that you need to
know. After reading the Information, test yourself on how much you have
learned by means of the Assessment Tasks. This will ensure your mastery of basic
information.
• This course uses Problem Based Learning (PBL) and other novel methods to drive
learning. The central theme of these pedagogies is to place a significant duty
on YOU to take charge of your learning. YOU will drive your own learning. I will
facilitate this by providing a number of resources, problems, questions and
acting as a coach through the semester.
• You will need to prepare for the class sessions ahead of time by reading the
materials provided, and working on questions and problems that are to be
COURSE GUIDE

discussed in class - either individually or as part of a team.

• Class sessions will be interactive, though guided by the instructor with the help
of a number of questions, as well as small cases and problems.
• The team project will be the core learning experience. It is necessary that you
perform this "on time," "professionally," and "comprehensively" keeping me
informed throughout the semester.
• The deliverables for the assessment tasks and projects should be delivered as
agreed upon, at or before the deliverables, unless prior approval is obtained
from the instructor.

Instructor’s Contact Details

ARL KHEEM REY B. GALARIO

09058651165
[email protected]
https://www.facebook.com/vaudevelle/

Page 4
Gingoog City Colleges, Inc.
University Brgy. 24-A, Gingoog City
Logo

Bachelor of Science in Office Administration

Prof Elect 2 – Web Design
2nd Semester of A.Y. 2021-2022

Introduction

In this course we will be able to learn the basics of HTML and CSS along
with building a project which will be a single page website. That is by following
this course you will also get the chance to practically apply that knowledge to
design an actual website. We believe that the easiest and efficient way to learn
anything is by actually doing it. So, the idea is to teach you everything about
HTML and CSS in the process of making the project.
COURSE MODULE

Course Guidelines

• Don’t hurry up: We recommend you to not hurry up and finish up the entire course
in just one day by taking the course for long hours.
• Practice Along Side: Repeatedly practice the course alongside by typing the
codes in your own code editor and render it in your browser.
• Do not Copy Paste: Avoid directly copying and pasting the codes from your
instructors’ code to your editor. Instead, first try to understand the codes and type
that code on your own. If you make a mistake and get a different output then
comeback and match your code to your instructor to find out where you went
wrong.
• Do not Skip any section: Please do not skip any section by just reading the title.

Intended Learning Outcomes

A. Learn about all of the basics of HTML and CSS needed to design a website.
B. You will get to practice your knowledge alongside.
C. You will get a project of your own by the end of this course.
D. Teaches you everything from the scratch, so even if you do not have any prior
knowledge of HTML and CSS, it is completely fine.

Module 1 | Web Design | Galario, A. 1

Page 5
Discussion

HTML Introduction
The <HTML> is a markup language that is used by the browser to manipulate text,
images, and other content to display it in the required format.
Tags in HTML: Tags are one of the most important part in an HTML Document. HTML
uses some predefined tags which tells the browser about content display property,
that is how to display a particular given content. For Example, to create a
paragraph, one must use the paragraph tags(<p> </p>) and to insert an image one
must use the img tags (<img />).
There are generally two types of tags in HTML:

1. Paired Tags: These tags come in pairs. That is they have both opening(< >)
and closing(</ >) tags.
2. Empty Tags: These tags do not require to be closed.
COURSE MODULE

Below is an example of (<b>) tag in HTML, which tells the browser to bold the text
inside it.

Structure of an HTML Document

An HTML Document is mainly divided into two parts:
• HEAD: This contains the information about the HTML document. For
Example, Title of the page, version of HTML, Meta Data etc.
• BODY: This contains everything you want to display on the Web Page.

HTML Document Structure

Module 1 | Web Design | Galario, A. 2
Page 6
Let us now have a look at the basic structure of HTML. That is the code that is a must
for every webpage to have:

• HTML
<!DOCTYPE html>

</title>
</head>

<body>
COURSE MODULE

</body>
</html>

Every Webpage must contain this code. Below is the complete explanation of each
of the tag used in the above piece of HTML code:
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the
version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements
that can be used inside the <head> element are:

• <style>
• <title>
• <base>
• <noscript>
• <script>
• <meta>
<body>: Body tag is used to enclose all the data which a web page has from texts
to links. All the content that you see rendered in the browser is contained within this
element.
So far, we already have learned about the structure of an HTML document, tags
etc. Let us use this knowledge to create our first web page which will print the
text “Hello World!” on the screen.
Open your text editor, and type the below code in it and save it with the name
“index.html”.
Note: HTML files are saved with the file extension .html

Module 1 | Web Design | Galario, A. 3

Page 7
Code: index.html

• HTML
<!DOCTYPE html>

<html>
<head>
<title>
First Web Page
</title>
</head>

<body>
Hello World!
</body>
</html>
COURSE MODULE

Output: On opening the file in a web browser, you will see the below output.

Yes, it’s that easy to print anything on the Web Page. You don’t need to compile
your HTML code to run it in a Web Page. As HTML is a scripting language, you can
simply change your code and hit the refresh button and the changes will be
reflected to your Web page immediately.
Make “Hello World!” Bigger: The text “Hello World!” seems to appear small. Let us
make it look a bit bigger.
We have seen usage of <h1/> tags in our previous articles. This is a heading tag in
HTML which is used to represent headings in a Web Page.

Module 1 | Web Design | Galario, A. 4

Page 8
Heading Tags: There are six levels of headings defined by HTML. These six heading
elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 the
least.
Let us use these six different Heading tags separately to print “Hello World!” and see
the difference. Modify your code in index.html with the below code:
Code: index.html

• HTML
<!DOCTYPE html>

<html>
<head>
<title>
First Web Page
</title>
</head>
COURSE MODULE

<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
</body>
</html>

Output: On refreshing the web page you will see the output will change to this

Module 1 | Web Design | Galario, A. 5

Page 9
Supported Browser:
• Google Chrome
• Microsoft Edge
• Firefox
• Opera
• Safari

In this part, we will go through all the basic stuff required to write HTML. There are
various tags that we must consider and know about while starting to code in HTML.
These tags help in organization and basic formatting of elements in our script or web
pages. These step-by-step procedures will guide you through the process of writing
HTML.
HTML Paragraph
These tags help us to write paragraph statements in a webpage. They start with
the <p> tag and ends with </p>. Here the <br> tag is used to break line and acts as
a carriage return. <br> is an empty tag.
COURSE MODULE

Example:

• html
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
</body>
</html>

Output:

Module 1 | Web Design | Galario, A. 6

Page 10
HTML Horizontal Lines
The <hr> tag is used to break the page into various parts, creating horizontal
margins with help of a horizontal line running from left to right hand side of the
page. This is also an empty tag and doesn’t take any additional statements.
Example:

• html
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
COURSE MODULE

A Computer Science portal for geeks<br>

</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>

Output:

Module 1 | Web Design | Galario, A. 7

Page 11
HTML Images
The image tag is used to insert an image into our web page. The source of the
image to be inserted is put inside the <img src=”source_of_image“> tag.
Example:

• html
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<img src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/Geek_logi_-low_res.png">
</body>
</html>
COURSE MODULE

Output:

HTML – Attributes
An attribute is used to provide extra or additional information about an element.

• All HTML elements can have attributes. Attributes provide additional

information about an element.
• It takes two parameters: a name and a value. These define the properties
of the element and is placed inside the opening tag of the element. The
name parameter takes the name of the property we would like to assign to
the element and the value takes the property’s value or extent of the
property names that can be aligned over the element.
• Every name has some value that must be written within quotes.
HTML – Comments
It is used for inserting comments in the HTML code. Using comments, especially in
complex code, is the best practice of coding so that coder and reader can get
help for understanding.

• It is simply piece of code which is wiped off by web browsers i.e, not
displayed by browser.
• It gives help to coder / reader of code to identify piece of code specially
in complex source code.

Module 1 | Web Design | Galario, A. 8

Page 12
Syntax of HTML Comments Example:

• HTML
<!DOCTYPE html>

<html>

<body>

<p>geeksforgeeks.</p>

</body>

</html>

HTML – Lists
COURSE MODULE

What is a list?
A list is a record of short pieces of information, such as people’s names, usually
written or printed with a single thing on each line and ordered in a way that makes
a particular thing easy to find.
For example:
• A shopping list
• To-do list
Lists in HTML
HTML offers three ways for specifying lists of information. All lists must contain one or
more list
elements.
The types of lists that can be used in HTML are :
• ul : An unordered list. This will list items using plain bullets.
• ol : An ordered list. This will use different schemes of numbers to list your
items.
• dl : A definition list. This arranges your items in the same way as they are
arranged in a dictionary.

Module 1 | Web Design | Galario, A. 9

Page 13
We already have learned a lot of things about HTML. We know:

• The structure of an HTML Page.

• What are Tags and Elements?
• Detailed explanation about some of the Basic Tags the are most
commonly used.
• Created our First Web Page to print “Hello World!” in different sizes.
Prerequisites: Before starting the project, we first need to download a suitable code
editor for writing our code. Some popular HTML text editors are given below:
• VS Code
• Notepad
• Notepad++
• Sublime Text 3
• Atom
Let us now begin with the project that we saw at the introduction of this course.
COURSE MODULE

The very first step to take will be to create the directories. That is, the folders and files
which we need to create to write codes and keep them structured for a well
compiled and clean project. Below is the list of files and folders needed:

You can clearly see in the above image the folders and files we have used in the
project in the left sidebar of the editor. But here arise a few questions:

• Why is it important to create so many folders?

• What is the convention to follow for creating folders?
• Is there any naming-conventions for naming the folders and files?
So, these are a few basic questions that arise in the mind of everyone who is
creating a project for the first time.
Module 1 | Web Design | Galario, A. 10
Page 14
Answers:

1. If you don’t want to create any folders and instead keep all the files,
images etc in the root directory and link them properly wherever needed,
your project will still work fine. But that’s not enough. Making separate
folders for a separate set of files makes things organized and easily
understandable for others. For example, keeping all the images in a
separate folder with name “image”, keeping all stylesheets in a folder
named “CSS” etc.
2. There is no standard convention of doing this. Every organization creates
their own set of rules to keep things structured. But the basic approach
which is followed is to keep separate folders for a separate set of files as
explained above.
3. Again, there is not any standard convention of naming the files and folders
except “index.html”. The page named “index.html” is the base of a project
COURSE MODULE

which the browser considers as the homepage. So, you must name your
homepage as “index.html” and for the rest of files and folders, you can
name them anything which best describes the content they have.

Let us now dive into details about the directories that we created for our project:

• sample project: This is the root directory of our project which will contain all
the folders and files which we will be creating during building the project.
• css: This folder will contain all the CSS files that we will use to style our
project. For now, we have kept this folder empty.
• fonts: This folder will contain all the font files used in the project.
• images: This folder consists of all the images that we will be used in the
project. For now, this is empty.
• index.html: The page named “index.html” is the base of a project which
the browser considers as the homepage. Everything inside this will be
rendered when our website will load in the browser.

We have created all of the directories needed for our project. Let’s just start writing
our HTML code. Since we are designing a single page website – Website with a
single HTML page (No internal links). So, we will write all of our codes in the file
“index.html”. We do not need any other HTML to create for this project.
Before we begin with writing code, keep in mind these two things:
• All of our HTML code will be in the “index.html” file.
• All of our code will follow the standard HTML5 rules.

Module 1 | Web Design | Galario, A. 11

Page 15
What is HTML5?

HTML5 is the fifth version of the HTML scripting language. It supports a lot of new
things that older versions of HTML do not.
For Example: In HTML5 there is something new called the Semantic Elements.

Semantic elements have meaningful names which tell about the type of content.
For example, header, footer, table, … etc. HTML5 introduces many semantic
elements as mentioned below which make the code easier to write and understand
for the developer as well as instructs the browser on how to treat them.
Let us now start with actually coding our website.
Remove everything from your index.html and only keep the standard HTML
structure. That is, your index.html will now look like as something below:
COURSE MODULE

• HTML
<!DOCTYPE html>

<html>
<head>
<title>Sample Webpage</title>
</head>
<body>

</body>
</html>

Let us now divide our website in smaller parts following the HTML5 semantics. We will
divide the page in different parts as follows:

1. HEADER: This will be further divided into:

• Nav: Navigation menu.
• Image Section: To contain the image.
2. MAIN: This will further contain smaller SECTIONS to display different
information.
3. FOOTER

Let us have a look at the below images for clear understanding of the division
stated above:

• Header with Navigation menu and Image:

Module 1 | Web Design | Galario, A. 12

Page 16
COURSE MODULE

• Body with different Sections:

Module 1 | Web Design | Galario, A. 13

Page 17
• Footer:
COURSE MODULE

•
Write the following code in your index.html file to create all of the sections as shown
above:

• HTML
<!DOCTYPE html>

<html>
<head>
<title>
First Web Page
</title>
</head>

Module 1 | Web Design | Galario, A. 14

Page 18
</div>

<nav>

</nav>
</div>

<!-- Image menu in Header to contain an Image and

a sample text over that image -->
<div id="header-image-menu">

</div>
</header>

<main>

COURSE MODULE

</section>

</section>

</section>
</main>

<footer>

</footer>
</body>
</html>

If you run the above code, you will see an empty web page as till now we are not
printing anything. In the above code we have just outlined the skeleton of the
website using the available tags in HTML5.

Module 1 | Web Design | Galario, A. 15

Page 19
CSS Introduction
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages presentable.
CSS allows you to apply styles to web pages. More importantly, CSS enables you to
do this independent of the HTML that makes up each web page.
CSS is easy to learn and understand, but it provides powerful control over the
presentation of an HTML document.
COURSE MODULE

WHY CSS?
• CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
• Easy Maintenance: To make a global change simply change the style, and
all elements in all the webpages will be updated automatically.
• Search Engines: CSS is considered a clean coding technique, which means
search engines won’t have to struggle to “read” its content.
• Superior styles to HTML: CSS have a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison
to HTML attributes.
• Offline Browsing: CSS can store web applications locally with the help of an
offline cache. Using this we can view offline websites.

CSS Syntax:
A CSS comprises style rules that are interpreted by the browser and then applied to
the corresponding elements in your document.
A style rule set consists of a selector and declaration block.

Selector -- h1
Declaration -- {color:blue;font size:12px;}

Module 1 | Web Design | Galario, A. 16

Page 20
The selector points to the HTML element you want to style.
•
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated
by a colon.
For Example:
–; color is property and blue is value.
–; font-size is property and 12px is value.
• A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.
Example :
In the following example all p elements will be center-aligned, with a blue text color:

• CSS
COURSE MODULE

p {
color: blue;
text-align: center;
}

CSS Selectors
CSS selectors are used to “find” (or select) HTML elements based on their element
name, id, class, attribute, and more.

1. THE UNIVERSAL SELECTORS: Rather than selecting elements of a specific type, the
universal selector quite simply matches the name of any element type

• CSS
* {
color: #000000;
}

This rule renders the content of every element in our document in black.

Module 1 | Web Design | Galario, A. 17

Page 21
2. THE ELEMENT SELECTOR: The element selector selects elements based on the
element name. You can select all p elements on a page like this (in this case, all p
elements will be center-aligned, with a red text color) :

• CSS
p {
text-align: center;
color: red;
COURSE MODULE

3. THE DESCENDANT SELECTOR: Suppose you want to apply a style rule to a particular
element only when it lies inside a particular element. As given in the following
example, the style rule will apply to the em element only when it lies inside the ul
tag.

• CSS
ul em {
color: #000000;
}

Module 1 | Web Design | Galario, A. 18

Page 22
4. THE ID SELECTOR:
• The id selector uses the id attribute of an HTML element to select a specific
element.
• The id of an element should be unique within a page, so the id selector is
used to select one unique element!
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
• The style rule below will be applied to the HTML element with id=”para1″:

5. THE CLASS SELECTORS:

• The class selector selects elements with a specific class attribute.

• To select elements with a specific class, write a period (.) character,
followed by the name of the class.
• In the example below, all HTML elements with class=”center” will be red
COURSE MODULE

and center-aligned:

You can apply more than one class selector to a given element. Consider the
following example:

• html
<p class="center large">This paragraph refers to two classes.</p>

6. GROUPING SELECTORS
If you have elements with the same style definitions, like this:

• CSS
h1 {
text-align: center;
color: blue;
}

h2 {
text-align: center;
color: blue;
}

Module 1 | Web Design | Galario, A. 19

Page 23
p {
text-align: center;
color: blue;
}

It will be better to group the selectors, to minimize the code. To group selectors,
separate each selector with a comma. In the example below we have grouped the
selectors from the code above:

• CSS
h1, h2, p {
text-align: center;
color: red;
}
COURSE MODULE

Before CSS:

• html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>

Module 1 | Web Design | Galario, A. 20

Page 24
After CSS
In this example, we add some CSS.

• html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
main {
width: 200px;
height: 200px;
padding: 10px;
background: beige;
}
COURSE MODULE

h1 {
font-family: fantasy, cursive, serif;
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
p {
font-family: sans-serif;
color: orange;
}
</style>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>

All we did was add the following code to the example:

• CSS
<style>
main {
width: 200px;
height: 200px;
padding: 10px;
background: beige;
}
h1 {

Module 1 | Web Design | Galario, A. 21

Page 25
font-family: cursive;
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
p {
font-family: sans-serif;
color: orange;
}
</style>
COURSE MODULE

CSS Versions
1. CSS1
2. CSS2
3. CSS3
4. CSS4
Version 4 comes with:-
• CSS-Pro
• CSS-Mobile

Module 1 | Web Design | Galario, A. 22

Page 26
In the last lessons, we created the entire structure of our website using HTML
elements and Tags. Let’s now start building the website in parts.
The first part of the website is the header. So the first thing we will create is the
navigation menu in the Header of the webpage.
The navigation bar contains:
• A logo aligned to the left.
• A menu of five items aligned to the right.
Let’s look at the part of the code of the header menu from our index.html file. Below
is the portion of code of the Header menu where the highlighted part is the top
navigation bar:

• HTML

<header>

COURSE MODULE

</div>

<nav>

</nav>
</div>

<!-- Image menu in Header to contain an Image and

a sample text over that image -->
<div id="header-image-menu">

</div>
</header>

The first task is to add the image for the logo. Steps to include image and create
logo:
• Download image (ask your instructor)
• Copy and paste the image to the directory: root/images. Where root is the
top directory of our project. In our case it is named as “sample project”.
• Include the image in the code using img tag.

The second task is to create an unordered-list in HTML inside the navigation section
of the header menu:
• Add an unordered list in the navigation menu section with 5 list-items
Module 1 | Web Design | Galario, A. 23
Page 27
named “Home”, “About Us”, “Our Products”, “Careers”, and “Contact Us”.
The code of the Header section after adding the above two things will look like as
shown below:

• HTML

<header>

<div id="top-header">

COURSE MODULE

<nav>
<div id="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div>

<!-- Image menu in Header to contain an Image and

a sample text over that image -->
<div id="header-image-menu">

</div>
</header>

If you now open the index.html file in a browser, you will see the below output:

Module 1 | Web Design | Galario, A. 24

Page 28
This looks very different than what we saw in the screenshots of the final project. This
is because our website is missing CSS for now. That is we have just created the
structure of the navigation bar, to make it look beautiful, we will have to add styles
using CSS.
We will design the navigation bar later but first create a file named “style.css” and
add it to the folder “sample project/css“. Also include the CSS file created to the
“index.html” file by adding the below line in between head tags.

• HTML
<link rel="stylesheet" href="css/style.css">

Before we begin styling the navigation menu, the first thing needed to do is to set
the default CSS values for the HTML elements. Copy and paste the below code in
your “style.css” file:
COURSE MODULE

• CSS
html, body{
height: 100%;
}

body{
margin: 0px;
padding: 0px;
background: #FFFFFF;
font-family: 'Roboto';
font-size: 12pt;
}

h1, h2, h3{

margin: 0;
padding: 0;
color: #404040;
}

p, ol, ul{
margin-top: 0;
}

p {
line-height: 180%;
}

ol, ul{
padding: 0;
list-style: none;

Module 1 | Web Design | Galario, A. 25

Page 29
}

.container{
/* Set width of container to
1200px and align center */
margin: 0px auto;
width: 1200px;
}

As you can see in the above CSS that we have set the default values for almost
every useful HTML element required for the project. Also, we have created a CSS
class named “container “. This basically defines a container with a width of 1200px
and all of the text within it aligned to center. Add this class named container to
the <header> tag.
The next step is to assign some id’s to our HTML elements and then use those id’s in
the CSS file to style them. Here, we already have assigned id’s to the HTML elements
COURSE MODULE

as you can see in the above code. Let’s just begin adding styles to them.
Below is the step-by-step guide to style the navigation bar:

• Styling overall Header: There isn’t much styling needed for the header tag.
The header tag is just needed to be set to “overflow: hidden” to prevent
window from overflowing on browser resize.
Add the below code to style.css:

• CSS
header{
overflow: hidden;
}

• Styling Navigation Bar(#top-header): Set a fixed height of 60px for the

navigation bar and align the texts to center.
Add the below code to style.css:

• CSS
#top-header{

text-align: center;
height: 60px;
}

• Styling Logo(#logo): Remove padding from the parent div of logo. Make
both parent and image floated towards left and assign widths to them.
Add the below code to style.css:

Module 1 | Web Design | Galario, A. 26

Page 30
• CSS
#logo{
float: left;
padding: none;
margin: none;
height: 60px;
width: 30%;
}

#logo img{
width: 60%;
float: left;
padding: 10px 0px;
}

• Styling Navigation Menu(#menu):

COURSE MODULE

Add below code to style.css:

• CSS
#menu{
float: right;
width: 70%;
height: 100%;
margin: none;
}

#menu ul{
text-align: center;
float: right;
margin: none;
background: #0074D9;
}

#menu li{
display: inline-block;
padding: none;
margin: none;
}

#menu li a, #menu li span{

display: inline-block;
padding: 0em 1.5em;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
line-height: 60px;

Module 1 | Web Design | Galario, A. 27

Page 31
}

#menu li a{

color: #FFF;
}

#menu li:hover a, #menu li span{

background: #FFF;
color: #0074D9;
border-left: 1px solid #0074D9;
text-decoration: none;
}

OUTPUT 1
Open the index.html file in browser now, can you see something as shown in the
COURSE MODULE

below image. If not, please tally and recheck your code with this module, you must
have missed something:

So, we have successfully created the navigation bar for the header of our website.
The next thing is to insert the image and a text over the image just below the
navigation bar in the header.

Module 1 | Web Design | Galario, A. 28

Page 32
Building Header of the Website

So far, we have created the navigation bar for the header of our website. The next
thing to complete the header is to include the image and text above the image as
shown in below screenshot:
COURSE MODULE

Let’s again look at the part of the code for the header in our index.html file. The
highlighted part of the code shows the image menu of the header:

• HTML

<header>

<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>

Module 1 | Web Design | Galario, A. 29

Page 33
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>

<!-- Image menu in Header to contain an Image and a sample

text over that image -->
<div id="header-image-menu">

</div>
</header>

To complete the image menu, we first need to add the image and text inside the
div tag with id “header-image-menu” as shown in the above code.
Adding Image:
• Ask instructor to download the given image.
COURSE MODULE

• Add it to the images folder of your project.

• Include it inside the div with id = “header-image-menu”.

Adding Text: Add the text inside an <h2> tag and give the tag an id = “image-text”
which will be used for adding styles.
Below is the final HTML code for the header menu after adding the images and
text:

• HTML

<header>

<div id="top-header">

<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>

Module 1 | Web Design | Galario, A. 30

Page 34
</ul>
</nav>
</div>

<!-- Image menu in Header to contain an Image and

a sample text over that image -->
<div id="header-image-menu">
<img src="images/slider.jpg">
<h2 id = "image-text">
A Basic Web Design course by GeeksforGeeks
</h2>
</div>
</header>

Our webpage will now look like as in the below screenshot:

COURSE MODULE

Can you point out what is wrong with the above image? The answer is that the text
is below the image and not at its correct position as shown in the template.
We will have to use CSS to add styles to the text and image inorder to place the text
over the image. Let’s begin with adding CSS.
• Styling the main image menu(#header-image-menu): Give the image
menu parent a margin of top as 10px and set it position to relative.
Add the below code to style.css:

• CSS
#header-image-menu{
top: 10px;
position: relative;
}

Module 1 | Web Design | Galario, A. 31

Page 35
• Styling the image inside the image menu: Set the width of the image to
100% of the parent and remove the margins and padding.
Add the below code to style.css:

• CSS
#header-image-menu img{
width: 100%;
margin: none;
padding: none;
}

• Positioning the text(#image-text): Set the position of the text to absolute

first and give appropriate margins from left and top. Set the color and
translate the text by 30% using the translate() function.
Add the below code to style.css:
COURSE MODULE

• CSS
#image-text{
position: absolute;
top: 60%;
left: 60%;
font-family: 'Roboto';
color: #000;
transform: translate(-30%, -30%);
text-align: center;
}

OUTPUT 2
On opening the index.html in the browser now, you will see the exact same header.

We have completed building the header of our website.

Module 1 | Web Design | Galario, A. 32
Page 36
Building Main Content – Section 1

We just completed building the header for our website. Let’s start building the main
content for the website. As we described while creating the HTML layout of the
website, the main content was divided into three sections as shown below:

• HTML

<main>

<section>

</section>
COURSE MODULE

</section>

</section>
</main>

In this post, we will build the section 1 of the main layout. The section 1 of the main
layout is highlighted in the below image:

Module 1 | Web Design | Galario, A. 33

Page 37
Let’s note down the content and some properties of the Section 1 that will be useful
in designing:

• Title: It contains a title “Welcome to Our Website”, which is aligned to the

center.
• Sample Text: It has a sample text or we can say a paragraph just below
the title which is also aligned to center.
Let’s start writing HTML for the section 1 of our website, follow the below steps:

• Give the section tag the class container to fix it width to 1200px and align
it’s childrens to center.
• Create a new div tag inside the section tag with an id “title“.
• Add the title “Welcome to Our Website” inside an <h1> tag and assign it
an id title.
COURSE MODULE

• Assign the sample tag below the title inside a paragraph <p> tag.

Below is the complete HTML code for Section 1 of Main layout:

• HTML

<main>

<section>
<div id="welcome">
<h1 class="title">Welcome to our website</h1>

<p>
This is a <strong>Sample Webpage</strong>, a HTML
and CSS template designed by the <a href="#"
target="_blank" rel="nofollow">GeeksforGeeks Team</a>.
The photos in this template are designed by our
<b>Graphic Design Team</b>. This template is designed
to explain the basics of HTML and CSS in our first
Web Design course.
</p>

</div>
</section>

Module 1 | Web Design | Galario, A. 34

Page 38
</section>

</section>
</main>

After adding the HTML codes the page index.html will look like as below:
COURSE MODULE

Let’s add styles to the classes to make this look as shown in the template:

• Styling div with id (#welcome): This div will include both the title and the
sample text. So set it’s overflow to hidden and use “margin: 0px auto” to
align it’s children to center. Also set it’s width to 1000px.
Add below code to style.css:

• css
#welcome
{ overflow: hidden;
width: 1000px;
margin: 0px auto;
}

• Styling the title h1 tag: Give at top margin of 20px, padding of 20px and
align it’s text to center.
Add below code to style.css:

Module 1 | Web Design | Galario, A. 35

Page 39
• css
#welcome .title{
margin-top: 20px;
padding: 20px;
text-align: center;
}

• Styling the p tag for sample text: Give it a margin from bottom of 40px and
align it’s text to center.
Add below code to style.css:

• css
COURSE MODULE

#welcome p{
margin-bottom: 40px;
text-align: center;
}

OUTPUT 3

That’s it, on opening the index.html file in a browser now, you will see the below
output:

Everything looks fine till now. But there seems to be some problem. The font’s in our
project does not seem to be the same as that of the template.

We have used the font “Roboto”, but it seems to be not working for some reason.
Module 1 | Web Design | Galario, A. 36
Page 40
This is because the browser does not support each and every font implicitly.

We will have to explicitly define the source of the font within the head tags. Add
the below line inside the head tags of index.html file:

• HTML
<link href='https://fonts.googleapis.com/css?family=Roboto'
rel='stylesheet'>

After including the above line within the head tags. Reload your index.html in the
browser:
COURSE MODULE

Module 1 | Web Design | Galario, A. 37

Page 41
Building Main Content – Section 2

In the last lesson, we began building the main section of the website and have
completed the first section. Let us now move to the section 2 of Main Content.
You can see the Section 2 of the Main Content in the below image:
COURSE MODULE

If you observe carefully, you can say that the section 2 is divided into three columns
as shown below:

This is also referred to as 3-Column layout in terminology of Web Development.

Let’s start writing HTML for Section 2 of our Website, follow the below steps:

1. Declare a parent div with a class named row.

2. Declare three div’s inside the parent row div to contain three columns and
assign them id’s as column1, column2 and column3 respectively.
3. For Each Column:
Module 1 | Web Design | Galario, A. 38
Page 42
Declare a div with class = “column-title”. For the title of the
•
column.
• Declare a paragraph p element for the description of the
content.
• Declare an anchor tag <a> to add an external link which will be
styled as a button later.
Below is the complete HTML code for the Section 2 of the Main Content:

• HTML

<section class="container" id="section-2">
<div class="row">
<div id="column1">
<div class="column-title">
<h2>GFG Content</h2>
</div>
COURSE MODULE

<p>
A Computer Science portal for geeks. It
contains well written, well thought and
well explained computer science and
programming articles, quizzes and ...
</p>

<a href="#"
target="_blank" class="button">
Learn More
</a>
</div>

<div id="column2">
<div class="column-title">
<h2>GFG Practice</h2>
</div>

<p>
A practice poratal to test your knowledge
of data structures and algorithms by solving
problems asked in interviews of many tech giants
like, Amazon, Microsoft etc.
</p>

Module 1 | Web Design | Galario, A. 39

Page 43
<a href="#"
target="_blank" class="button">
Learn More
</a>
</div>

<div id="column3">
<div class="column-title">
<h2>GFG IDE</h2>
</div>
<p>
An integrated development environment to
run and test your codes in almost all of
the popular and widely used programming
languages.
</p>
COURSE MODULE

<a href="#"
target="_blank" class="button">
Learn More
</a>
</div>
</div>
</section>

If you run the index.html in your browser, you will be able to see something as shown
below:

Module 1 | Web Design | Galario, A. 40

Page 44
This nowhere looks close to our final Section 2 in the Main Content. Let’s start adding
styles to it.

• Adding basic styles for layout: Firstly, set the overflow to hidden and add
all the required margins and paddings. Next is to give the thin 1px border
at the top of the section to separate it from the previous section and align
all of the text inside it to center.
Add the below CSS code to your style.css:

• CSS
#section-2{
overflow: hidden;
margin-top: 5em;
padding-top: 1em;
border-top: 1px solid rgba(0, 0, 0, 0.2);
COURSE MODULE

text-align: center;
}

• Aligning Columns In-line: The next step is to align all of the columns in
single line one after the other. To do this, add the below CSS code to your
style.css file:

• CSS
.row #column1,
.row #column2,
.row #column3{
float: left;
width: 320px;
padding: 80px 40px 80px 40px;
}

• Styling the Title of columns: The next good thing to do is to style the title of
the columns. To give them appropriate font-sizes and weights apart from
the default values. Add the below CSS code to your style.css file:

• CSS
.column-title h2{
margin: 1em 0em;
font-size: 1.6em;
font-weight: 700;
}

Once you have added the above styles successfully, your Section 2 now will look
something as shown below:
Module 1 | Web Design | Galario, A. 41
Page 45
COURSE MODULE

It looks good now apart from the buttons at the bottom. The buttons are still
appearing as simple links. Let’s make them look good by adding some CSS.
Styling Buttons
To make the buttons look good, do the following:

• Remove text-decoration.
• Align text to center.
• Set the display property to “inline-block”.
• Set appropriate font-size, color and background color of the button.
• Add paddings and margins.
• Set the cursor property to pointer so that whenever the user hovers over
the button the mouse pointer will change into a nice-looking hand
representing a pointer.
• Use the :hover selector to add styles whenever user hovers over the button.

OUTPUT 4
Now, the Section 2 of our website is complete and will look something as shown
below:

Module 1 | Web Design | Galario, A. 42

Page 46
Building Main Content – Section 3

In the previous lessons we have seen the 3-Column layout and completed
the Section 2 of the main content. The main content of the website is now almost
complete. We just need to build the Section 3 of the main content. The Section 3 is
shown in the below image:
COURSE MODULE

If you look at the above image carefully then it can be seen that the Section 3 is
almost the same as that of the Section 2 of the Website. The only difference is that it
has 4 columns instead of 3 and every column has an image at the top before the
title.
Let’s start writing HTML for Section 3 of our Website, follow the below steps:

1. Declare a parent div with a class named row.

2. Declare four div’s inside the parent row div to contain four columns and
assign them id’s as column21, column22, column23 and column24
respectively.
3. Download the images given by your instructor and save them to
your images folder.
4. For Each Column:
• Use <img> tag to insert image for the respective column.
• Declare a div with class = “img-title”. For the title of the column.
• Declare a paragraph p element for the description of the
content.
• Declare an anchor tag <a> to add an external link which will be
styled as a button. We will use the same button we created in the
last article. So, assign the class “button” to the anchor tag.

Module 1 | Web Design | Galario, A. 43

Page 47
Below is the complete HTML code for the Section 3 of the Main Content:

• HTML

<section class="container" id="section-3">
<div id="row">

<div class="img-title">
<h3>Technical Content Writer</h3>
</div>
<p>
The work requires understanding of Computer
COURSE MODULE

Science concepts. Candidates who are active

on Practice Portal will be preferred.
</p>
<a href="# "
target="_blank" class="button">
Apply Here
</a>
</div>

<img src="images/developer.jpg" class="image image-full">

<div class="img-title">
<h3>Software Developer</h3>
</div>
<p>
Good knowledge of PHP, JavaScript, Amazon AWS
and Web Development in general. Candidates who
are active on Practice Portal will be
preferred.
</p>
<a href="#"
target="_blank" class="button">
Apply Here
</a>
</div>

Module 1 | Web Design | Galario, A. 44

Page 48
<div id="column23">

<img src="images/support.jpg" class="image image-full">

<div class="img-title">
<h3>Teaching Assistant</h3>
</div>
<p>
It involves taking the doubt sessions,
coordinating with mentors and requires
in-depth knowledge of Data Structures
and Algorithms.
</p>
<a href="#"
target="_blank" class="button">
Apply Here
</a>
COURSE MODULE

</div>

<div class="img-title">
<h3>Mentor / Tutor</h3>
</div>
<p>
Job involves teaching, problem solving
in classes as well as doubt sessions and
thus requires in-depth knowledge of Data
Structures and Algorithms.
</p>
<a href="#"
target="_blank" class="button">
Apply Here
</a>
</div>
</div>
</section>

On running the index.html file in the browser now, you will be able to see the
content of Section 3 in a distorted order as that of Section 2 before adding CSS.
Therefore, let’s start adding styles to the classes and complete Section 3 of Main
Content:

Module 1 | Web Design | Galario, A. 45

Page 49
• Adding basic styles for layout: Firstly, set the overflow to hidden and add
all the required margins and paddings. Next is to give the thin 1px border
at the top of the section to separate it from the previous section and align
all the text inside it to the center.
Add below CSS code to your style.css file:

• CSS
#section-3{
overflow: hidden;
padding-top: 5em;
border-top: 1px solid rgba(0, 0, 0, 0.2);
text-align: center;
}

• Aligning Columns In-line: The next step is to align all the columns in a single
line one after the other. To do this, add the below CSS code to your
style.css file:
COURSE MODULE

• CSS
/* Add fixed width for each column and
align text to center */
#column21,
#column22,
#column23,
#column24
{
width: 282px;
text-align: center;
}

/* Float first 3 columns to left */

#column21,
#column22,
#column23,
#column24 {
width: 282px;
text-align: center;
}

#column21,
#column22,
#column23,
#column24 {
float: left;
margin: auto 25px;
}

Module 1 | Web Design | Galario, A. 46

Page 50
• Styling the Title of columns: The next good thing to do is to style the title of
the columns present just below the images. To give them appropriate font-
sizes, padding color etc. apart from the default values. Add the below CSS
code to your style.css file:

• CSS
.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}

• Styling the images: We have added two classes for our images in the
column, namely image and image-full.
COURSE MODULE

• CSS
.image
{
display: inline-block;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
}

.image img
{
display: block;
width: 100%;
}

.image-full
{
display: block;
width: 100%;
margin: 0 0 3em 0;
}

.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}

Module 1 | Web Design | Galario, A. 47

Page 51
OUTPUT 5

With this the Section 3 of the main content is successfully completed and will now
look something as shown in the below image:
COURSE MODULE

Building Footer

So, we have completed building all parts of our website except the footer. So, let’s
take a look at what our final footer will look like:

Module 1 | Web Design | Galario, A. 48

Page 52
Our footer mainly consists of two sections:

• Company Details: This contains of three columns with address details,

phone details and Email details.
• Copyright Information: This contains information about the Copyright and
links to social media handles.
We will be using font awesome icons at different places in the footer. To use
fontawesome icons, follow below steps:

• Include Font Awesome CSS. Paste the below code in between your head
tags present at the top of index.html file.

• HTML
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
COURSE MODULE

awesome/4.7.0/css/font-awesome.min.css">

• Now, to use the icons just add the below class to a span tag.

<span class="fa fa-icon_name"></span>

Where, icon_name is the name of the icon.

Let us now just start writing the HTML structure of the website’s footer. We have
divided the footer in two sections namely Company Details and Copyright
Information.
Follow the below steps:

1. Create two div’s with class names as “company-details” and “copyright”

respectively.
2. Steps For div with class “company-details”:
• Add a div with class named as “row”.
• Add three div’s inside the previous div with id’s col1, col2 and
col3 respectively.
• For each of the column divs declare two span tags. One for the
font awesome icon and second for the information.
3. Steps For div with class “copyright”:
• Add a paragraph element to show the text: “© All rights reserved
| GeeksforGeeks.”
• Add an unordered list of three elements to show the three social
media icons.

Module 1 | Web Design | Galario, A. 49

Page 53
Below is the complete HTML code of the footer:

• HTML

<footer id="footer">

<div class="company-details">
<div class="row">
<div id="col1">
<span id="icon" class="fa fa-map-marker"></span>
COURSE MODULE

<span>
710-B, Advant Navis Business Park,
<br />Sector-142, Noida
</span>
</div>

<span>
Telephone: +91-890 * * * * * * *
</span>
</div>

<div id="col3">
<span id="icon" class="fa fa-envelope"></span>
<span>[email protected]</span>
</div>
</div>
</div>

<p>© All rights reserved | GeeksforGeeks.</p>

Module 1 | Web Design | Galario, A. 50

Page 54
</a>
</li>

</a>
</li>

</a>
</li>
</ul>
</div>
COURSE MODULE

</footer>

Look at the red marked portion in the below image. This is what the website’s footer
look like now:

Let’s now add styles to the footer.

Module 1 | Web Design | Galario, A. 51

Page 55
Adding Styles to div “website-details”
• First style the basic layout: Set the basic margins, paddings, background
color and align the texts to center.
Add the below CSS code to your style.css:

• CSS
.company-details{
overflow: hidden;
padding: 3em 0em;
background: #E3F0F7;
text-align: center;
margin-top: 5em;
}

• Aligning the three columns in one line: Float all of the three columns to the
left and assign a width of 320px to each one of them.
Add the below CSS code to your style.css file:
COURSE MODULE

• CSS
#footer #col1,
#footer #col2,
#footer #col3{
float: left;
width: 320px;
padding: 0px 40px 0px 40px;
}

• Adding Styles to the FontAwesome Icons: Set the font-size of the icons to
3em and a bottom-margin of 1em and display them as block.
Add the below CSS code to your style.css file:

• CSS
#footer #icon{

display: block;

margin-bottom: 1em;

font-size: 3em;

Module 1 | Web Design | Galario, A. 52

Page 56
Adding Styles to div “copyright”

• Adding Styles to basic layout: Set the basic margins, paddings,

background-colors etc. for the copyright class.
Add the below CSS code to your style.css file:

• CSS
.copyright
{
overflow: hidden;
padding: 3em 0em;
border-top: 20px solid rgba(255, 255, 255, 0.08);
text-align: center;
background: #4CAF50;
}
COURSE MODULE

• Adding style to the paragraph element: Add styles to the copyright

information stored in <p> tags. Add letter-spacing, color etc.
Add the below CSS code to your style.css file:

• CSS
.copyright p
{
letter-spacing: 1px;
font-size: 0.90em;
color: rgba(255, 255, 255, 0.6);
}

• Adding Styles to the anchor tag: Set the color of the anchor tag and text-
decoration to none:

• CSS
.copyright a
{
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
}

Module 1 | Web Design | Galario, A. 53

Page 57
If you open the index.html file in the browser now, you will see the footer as shown
below:

The above footer looks good, the only difference is in the display of the social icons
COURSE MODULE

of facebook, twitter etc. Let’s fix this. The last thing left is to add styles to the social
media icons.

Adding styles to the Social Icons:

• Remove the margin from the ul or class named “contact”, add padding
and set the list-style to none:

• CSS
ul.contact{
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}

• Set the list items to display as inline-block so that the icons can be
displayed horizontally instead of vertically. Also add padding and font-size
to the list items.

• CSS
ul.contact li{
display: inline-block;
padding: 0em 0.10em;
font-size: 1em;
}

• After adding the above two styles, the icons will now be arranged

Module 1 | Web Design | Galario, A. 54

Page 58
horizontally and at the center of the copyright div. Refresh and see the
result in your browser after making the above changes.
• The last thing is to add background for the social icons. To do so, add the
below style for the anchor tags of each list item:

• CSS
ul.contact li a{
color: #FFF;
display: inline-block;
background: #4C93B9;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
COURSE MODULE

OUTPUT 5
The Footer

Module 1 | Web Design | Galario, A. 55

Page 59
Reflection

Instruction: Write a 100 words REFLECTIVE ESSAY about what you have learned in
this unit that will help you to continue growing especially in your chosen field.
Consider the grading rubric below for your guidance. Strictly use the format;
Font Size: 12, Font Style: Bookman Old Style, Spacing: 1.5, Margin: 1.5 left, 1 right
top and bottom, Short bond paper, Justify. Submit your encoded output next
class session.

CRITERIA EXEMPLARY SATISFACTORY NEED

IMPROVEMENT

The student clearly

Some aspects of the
understood the topic in The student did not
essay are not clear and
detailed and organized show an adequate
the reader is left
Understanding manner. Leads the understanding of the
the topic wondering what the
reader to the topic.
writer is trying to say.
conclusion.
COURSE MODULE

(1 point)
(5 points)
(8 points)

The essay was written

in 100 words. Font Size:
12, Font Style: One of the previously More than one of the
Bookman Old Style, described aspects is previously described
Presentation Spacing: 1.5, Margin: missing. aspects is missing
(output) 1.5 left, 1 right top and
bottom, Short bond (3 points) (1 point)
paper, Justified.

(5 points)

Essay is free of Writer makes more

distracting spelling, Essay has few spelling, errors in grammar
Grammar and punctuation and punctuation and and/or spelling that
mechanics grammatical errors. grammatical error. distract the reader
from the content.
(5 points) (3 points)
(1 point)

Submitted on time.
Timeliness
(2 points)

Module 1 | Web Design | Galario, A. 56

Page 60
Gingoog City Colleges, Inc.
University Brgy. 24-A, Gingoog City
Logo

Bachelor of Science in Office Administration

Prof Elect 2 – Web Design
2nd Semester of A.Y. 2021-2022

Introduction

As technology advances, it enables us to achieve more and more tasks

without even realizing how complex they are. Learning how to design a website
by yourself is one of these.

Thanks to the evolution of website builders, you can design a website and
craft an impressive online presence of your own. Using professional web design
COURSE MODULE

features, you can generate revenue, nurture a community of fans, and

promote your brand online.

Course Guidelines

Intended Learning Outcomes

A. Understand how to design every element of your site using Wix.

B. Build a website using a website builder with its own domain.
C. Publish and update a working portfolio website.

Module 2 | Web Design | Galario, A. 1

Page 61
Discussion

HOW TO DESIGN A WEBSITE

1. Set your goal
2. Choose a website builder
3. Define your layout
4. Claim your domain name
5. Gather your content
6. Add the right pages
7. Design your website elements
8. Pick the professional tools you need
9. Make it accessible to everyone
COURSE MODULE

10. Optimize for mobile

11. Strengthen your SEO
12. Engage with visitors
13. Ask for feedback
14. Publish and update

01. Set your goal

Before you design a website, be crystal-clear about what you want to achieve. With
so many types of websites out there, you should start by deciding which kind will help
you meet your goals:

• An online store to sell your products

• A portfolio website to showcase your art
• A business website to manage and grow your business
• A resume website to grab the attention of potential employers
• A blog to share your knowledge with the world
• An event website for weddings, parties and company events
• A photography website to display and sell prints
• A fitness website to book new clients
• A restaurant website to help with online orders, delivery and payment
Once you decide which type you need, it’s time to start the exciting part - designing
Module 2 | Web Design | Galario, A. 2
Page 62
your site. As you set off on this journey, keep your overarching purpose in mind and
think about how the design will help achieve your objectives.

As you move forward with designing a website, you’ll find that your choice of
elements to include will vary depending on what you want to accomplish. For
example, if you want to sell your photos online, try displaying your work in a portfolio
format and including an online store where you can sell prints. Or, if you’re creating a
website with the goal of landing a job, a simple and professional resume website sans
embellishment might suit your needs perfectly.

02. Choose your website builder

Now that you’ve identified your goal, your next step is to choose the right website
COURSE MODULE

builder to accomplish it. A website builder (also known as a CMS) is a platform on

which you can design, personalize and publish a website without any knowledge of
coding.

There are dozens of platforms available on the market. Not sure which one to use?
Wix.com was ranked #1 out of the best website builders in the world, and for good
reason. Here are a few Wix advantages:

Diverse pricing models: Creating, publishing and hosting your website is totally free,
for as long as you wish. If you want to upgrade your online presence with some
tailored features, Premium packages are also available. They include everything you
need to succeed online, from professional templates and web design features, to a
custom domain name.

Module 2 | Web Design | Galario, A. 3

Page 63
COURSE MODULE

Design customization: Whether you’re a seasoned website designer or are still

learning how to design a website, you’ll find that Wix offers different creative routes
for everyone.

One option is the Wix Editor, whose drag-and-drop technology gives you complete
design freedom. Each element of your website’s design can be customized for the
look you want, while plenty of tools and built-in features will heighten its professional
presence.

Beginners might also enjoy using Wix ADI (Artificial Design Intelligence), the first
artificial intelligence platform that creates websites for you. This is a great solution for
designing a website quickly - after answering a few questions, you’ll get a complete
website that you can customize afterwards.

Module 2 | Web Design | Galario, A. 4

Page 64
At the same time, experienced creators can look into Velo by Wix, which lets you
dive into your site’s engine to build sophisticated apps, APIs and databases. This way,
you’re sure to have a one-of-kind result that suits your brand perfectly, and looks like
no other website in the world.

Professional solutions: Because your website is the hub of your online life, Wix puts all
of the professional solutions you need in one place. Tools like email marketing,
invoices, bookings, social media accounts and more can be integrated into your
website’s design for the best experience of managing your site and business. On top
of this, you’ll also be able to optimize your site with Wix SEO to increase your chances
of getting found on Google.
COURSE MODULE

Unique design features: Wix’s design features are completely customizable, which
means you can design your website exactly the way you want. From a suite of
imagery and backgrounds to innovative features like transparent videos and scrolling
effects, you’ll have plenty of options to start with, and you can always upload files of
your own.

Customer service: You’re not alone in your journey of learning how to design a
website. If you need assistance, you’ll always have someone to talk to thanks to Wix’s
24/7 support team and social media pages. If you want to read up on web design
tips, find web design tutorials, and get inspiration, you’ll find plenty of helpful material
available online, too. To grow your knowledge in web design, online marketing, SEO
and more, - take a look at the Wix Blog (sincerely yours) and Help Center.

Ready to design a website? Here’s how to get started:

1. Go to Wix.com from your desktop or mobile.
2. Enter your email address, pick a password - and voilà! You now have
your account, from which you can create as many websites as you wish.

3. Explore the vast collection of website templates, pick the one that’s most
relevant for your needs, and start customizing it with the tools and

Module 2 | Web Design | Galario, A. 5

Page 65
features of your choice. If you’d rather build your website from scratch,
you can start with a blank canvas and take it from there.

03. Define your layout

Once you’re logged into your platform of choice, it’s time to conceptualize your
website layout. If you want to start from scratch, you may want to map out your
website’s design on paper before you start to drag and drop. However, another
option is to use a template, which is a pre-designed layout created by a professional
designer.
COURSE MODULE

Wix offers an extensive library of free website templates. You’ll find designs for every
kind of website, whether you’re looking to create a business website, a blog or a
personal website. Start by browsing through the hundreds of options until you find a
layout that you love. Then, you can make it your own by fully customizing all its
elements and removing, adding or changing details like text, images and color.

Of these designs, you can pick between a multi-page template and a single-page
one. If your website includes a hefty amount of content, you’ll probably opt for a
multi-page site. However, with less content to display, you may want to go for a one-
page website. This trendy option is a popular choice for landing pages, event
websites and other short-form content sites.

Pro tip: There’s no better way to get your web design juices flowing than by seeking
creative inspiration. A good way to start is to look at website examples that got it
right. Grab a pen and paper, and jot down ideas you like as you browse through
some of the best website designs. There are plenty of social media platforms
dedicated to design inspiration, such as Pinterest and Dribbble, so make sure to
check those out too.

Module 2 | Web Design | Galario, A. 6

Page 66
04. Claim your domain name

To put it in simple terms, your domain name is your address on the internet. It’s what
your visitors will see in the bar of their browser, right after the “www.”

Registering your domain name is critical for online success. Websites with a
customized domain are automatically perceived by internet users as more
professional and trustworthy.

When chosen wisely, a domain name also helps search engines (like Google and
Bing) understand what your website is about. This is important because it helps bring
in more traffic to your website.
COURSE MODULE

Now, how do you choose a domain name for your brand? To make it memorable,
keep it:
• Short: The longer it is, the higher the chances of visitors misspelling it.
• Simple: Avoid symbols, special characters and numbers.
• Professional: Your domain name should incorporate your own name or
your business name, to avoid confusion.
• Evocative: Hint about what you do into your domain name by
incorporating words that are related to your business.

You can find out if your dream domain name is available by using this domain
registration tool. If your top choice is still up for grabs, don’t hesitate to acquire your
piece of virtual property. If it’s not, don’t panic. Try out different variations of your
original choice by playing around with the word order, or adding “the” at the start.

Pro tip: Picking a domain name also means using the right domain extension. From
.org to .com and .net, you can choose from 45 top-level domain extensions. It’s best
practice to use one that suits your business type and geographic location.

05. Gather your content

Module 2 | Web Design | Galario, A. 7
Page 67
Now that you’ve set the foundations for your design, it’s time to get practical and
prepare the content that will be featured on your website. This includes your images,
text, logo, videos, and more.

Use your own material as much as possible to ensure you’re offering unique and
branded content. If you’re not using original content, just make sure to acquire your
resources legally. Wix comes with a wide selection of media features, including a
library of over one million free photos from our partners at Unsplash, Vector
illustrations, and interactive videos that are exclusive to Wix. There’s also endless stock
photo and image reservoirs you can check out.
COURSE MODULE

While having plenty of material on your website is great, remember to always put
quality over quantity. In an era of decreasing attention spans, the best way to catch
your visitors’ attention is to showcase only your best content.
Finally, make sure your content is fully branded. Think of your website as an online
persona - everything from the written content to the colors and fonts you use should
reflect who you are or what your brand identity is.

Pro tip: New to the marketing game, or feel like you could sharpen up your brand
language? From creating a logo to defining your tone of voice, this guide explains
everything you need to know about building a solid brand identity.

06. Add the right pages

Every business is unique, and so is every website. Nevertheless, there are some
traditional sections that your site visitors will expect to see. If you’re going for a multi-
page website design, here are some must-have pages:

Homepage: You have one chance to make a good first impression, and your
homepage is it. Since it’s likely to be the first thing visitors will see, aim for a homepage
design that’s clean, organized and eye-catching. It should clarify who you are and
Module 2 | Web Design | Galario, A. 8
Page 68
what you do, and serve as a starting point for visitors to navigate through your site.

Make sure it contains the most crucial information: your logo, the name of your
business, and a navigation menu inviting visitors to browse further. Once you’ve got
these basics down, consider what sort of website background, imagery, written
content, and calls-to-action you can add here to engage with visitors.
COURSE MODULE

About Us page: Tell your story, and share your values, methods and any other
information that defines your brand with an About Us page. Welcome new visitors by
using the first person (“I” or “We”), since it adds a friendly touch of friendliness and
warmth. Also, don’t forget to include a picture of yourself or your team members,
since clients always like to see the face behind a business.

Contact page: When visitors want to reach out, they should be able to get hold of
you easily. That’s where a contact page comes in. Make sure to include your phone

Module 2 | Web Design | Galario, A. 9

Page 69
number, postal address, business email address and social media accounts. You can
also consider adding a live chat widget that gives visitors the chance to reach out
and get an immediate response, or a contact form where they can write their
message directly through your site.
COURSE MODULE

Extras (but highly recommended):

Your product or service page: The product page (or service page, depending on
your industry) is where your visitors discover what you have to offer, and if they’re
convinced, take out their credit card and make a purchase.

When you design a website with a product or service page in mind, here are some
key recommendations: Add high quality product photography, write precise and
engaging product or service descriptions, and be transparent about your conditions
(such as shipping, return, or cancelation policies).

Module 2 | Web Design | Galario, A. 10

Page 70
A blog: Creating a blog boosts your reputation as an expert, helps you foster a loyal
community, and is an effective way to drive traffic to your website.

If you’re not a natural-born writer, don’t fret - you have much more to say than you
think. You can write about your clients (success stories, case studies, interviews) or
yourself (events you attend, new employees, and more). But the most valuable blog
ideas will come from your own expertise. Your readers will love to discover the tips,
methods and hacks you use to solve the problems you meet, and will definitely
appreciate the added value.

Testimonials: An honest testimonials page is a wonderfully effective addition to your

website design. Studies show that 77% of satisfied customers will recommend your
COURSE MODULE

business or service to a friend after having a positive experience. If the purpose of

your website is to bring in new customers, leverage the power of word-of-mouth and
let your satisfied clients do the selling for you.

Splash page: A splash page acts as a preview to your site, greeting visitors before
they reach your homepage. This is a great way to engage with visitors using high
quality visuals or interesting text, or to promote a special offer or event.

FAQ page: An FAQ page is a dedicated page on your website that provides visitors
with quick and simple answers to common questions in an organized and structured
manner. It can save time by providing automated answers and provide a great
experience for users.

07. Design your website elements

You’ve got your content ready, claimed your domain name and set up your
website’s pages. It’s officially time to design the elements of your website.

In this section, we’ll talk about all the details that will bring your website together and
how to arrange them to form one cohesive design. Ultimately, these decisions should
Module 2 | Web Design | Galario, A. 11
Page 71
be guided by your brand identity - the distinct appearance and voice you use to
communicate your message to audiences. On top of this, keep usability in mind: your
website should always facilitate easy navigation and strive to give visitors an
engaging experience.

Here are some elements to work on when learning how to design a website:

Website architecture: In order to provide the best website navigation experience for
visitors, your pages need to be properly connected to one another. Make sure visitors
can easily find the pages they need by adding a navigation menu and
implementing internal links. Ultimately, follow the “two-click rule:” Your visitors
shouldn’t have to click more than once to access any page of your site, wherever
COURSE MODULE

they are.

Menu: This central element of your design will display the different items featured on
your website, ensuring that visitors can easily find and navigate from one page to
another. Website menus range from the standard horizontal header menu, to the
condensed hamburger menu. Whichever style you choose, it’s recommended to
make it accessible on every page of your site, and to keep the number of items to a
minimum to avoid clustering the screen.

Colors: Color psychology proves that different hues have different impacts on human
behavior, which is what makes it such an important aspect of website design. When
choosing your website color scheme, a general rule is to limit yourself to three shades:
one primary color (60% of the mix), one secondary color (30%), and one accent color
(10%). Of course, if you’ve already solidified brand colors for yourself or your business,
these should be included.

Fonts: When you choose the best fonts for your website, pick ones that are legible
(both on desktop and mobile) and consistent with your brand identity. While the
world of typography is vast, opt for a maximum of three fonts in order to avoid visual
Module 2 | Web Design | Galario, A. 12
Page 72
chaos.

Header & footer: Your website’s header and footer are found at the very top and
bottom of your website, respectively. Both of these elements can be used in your
website’s design to enhance usability and engagement.

A website header is a great place to include features that you want visitors to
discover immediately, such as your own logo or navigation menu.

While a website footer won’t be seen right away, it can still be used to help your
visitors in a number of ways. For example, it’s a great place for you to add your
contact information, social media buttons, or an email sign up form.
COURSE MODULE

Motion: This refers to all of the non-static elements of your website, which can be very
handy when you’re trying to catch the eye of visitors. Motion can come in many
shapes, sizes and locations across your website design: implementing hover effects to
encourage interaction, using VideoBox to add stunning effects, or even uploading a
full video background.

While animations will definitely spruce up your site, use them in moderation. This guide
explains all the dos and don’ts of adding animation to your website design.

Scroll effects: As the name suggests, scroll effects appear when the visitors scroll up or
down your site. Their sophistication has the potential to draw attention, but most
importantly, they help create a smooth transition between the different layers of a
website page.

One such effect is parallax scrolling. This professional 3D effect can add a sense of
depth to your page, resulting in a lively browsing experience. This, along with other
scroll effects (such as reveal or zoom-in), can be achieved using the Wix Editor.
Favicon: A favicon is a small icon that will be used in a website browser to “represent”
your website. Take a second to look up at this tab in your browser, and you’ll see a
Module 2 | Web Design | Galario, A. 13
Page 73
tiny Wix logo in the left-hand corner - that’s a favicon.

Despite its small size, a favicon is a great tool for helping users locate your website in
those moments when one too many tabs are open. It will also contribute to your
website’s branding by presenting your logo in an extra location, and its sharp
appearance adds a measure of professionalism to your website design.

Whitespace: This is the area of your website that doesn’t include anything. Frightened
by all this empty space? Don’t be. Not only is the increasing use of white space
trendy (minimalism, it’s here to stay), white spaces also give your visitors room to
“breathe” between images or pieces of content, contributing to a much better user
experience.
COURSE MODULE

Pro tip: What would artists like Leonardo da Vinci have to say about how to design a
website? A lot, we imagine. Some of the same rules that governed art and design for
centuries are also applicable to the internet.

08. Pick the professional tools you need

The internet is becoming one of the most important marketplaces in the world. It’s
estimated that in 2022, over 2.14 billion people worldwide will purchase goods and
services online. For the creative and professionally minded alike, adding some of the
following tools to your website can help facilitate efficient and secure transactions.

To further help you design your site, Wix encompasses several bespoke solutions to
help businesses across all sizes and industries interact with clients. Incorporating these
features will elevate your website so that it not only looks good, but operates
seamlessly:

Scheduling software: If you run a service business, your website needs to be able to
receive online reservations and payments, 24/7. Wix’s scheduling software does just
that. It includes the most sophisticated options on the market, from letting clients
Module 2 | Web Design | Galario, A. 14
Page 74
book appointments online to the ability to manage your staff’s calendars.

Online store: Want to sell your goods online and generate a continuous stream of
revenue? An online store is the way to go. From tracking your orders to using Wix
COURSE MODULE

Payments to get paid easily, you’ll be able to manage everything from one
dedicated place.

Social posts: Raise brand awareness and drive traffic to your site by creating eye-
catching social media graphics and sharing your posts directly to Facebook and
Instagram.

Music: Wix Music is a cutting-edge platform for musicians who want to expand their
audience while maintaining total creative freedom. It enables you to sell your music
directly on your website and keep 100% of the profits. Simultaneously, it distributes
your tunes to over 120 digital stores.

Video Maker: Did you know videos can boost organic search traffic to your website
by 157%? With the Wix Video Maker, you can enhance your website design with
customized videos in order to engage with your audience and improve traffic. These
can be used to promote your products or services, share exciting updates, and more.

Owner app: The Wix Owner app conveniently allows you to run your site from
anywhere, whether this means live chatting with visitors, or designing your website on-
the-go. You’ll even have a mobile space where your regular followers and clients can
Module 2 | Web Design | Galario, A. 15
Page 75
join.

Expert tip: The Wix App Market includes a large selection of apps to boost your
website’s business potential. From chat to payment, pop-ups and advertising on
Google, there’s a tool for every aspect of your business.

09. Make it accessible to everyone

These days, a truly great website design should be accessible to everyone. Web
accessibility ensures that all people, regardless of their abilities, can comfortably
experience and interact with your website. This includes people with vision
impairment, temporary injuries, hearing loss and more. With over one billion people
COURSE MODULE

living with some form of disability, catering to everyone’s needs is crucial. It also shows
that you and your business value inclusivity and diversity.

There are a number of ways to improve user experience on your website for
everyone. Make sure to build your website layout hierarchically, using clear headers
to define the different levels of information. In addition, ensure that your site is fully
operable with a keypad, write alt text for your images, use heading tags and more.

10. Optimize for mobile

Smaller screens do not equal smaller impact. With an increase in smartphone and
tablet usage, it’s crucial that you ensure a seamless browsing experience across all
devices by optimizing your mobile website design.

When creating a site with Wix, a mobile version of your site is automatically generated
Module 2 | Web Design | Galario, A. 16
Page 76
with the Mobile Editor. This means that you won’t have to worry about building a new
structure from scratch. However, it’s still up to you to make sure you’re optimizing your
content to fit this smaller piece of real estate.

Firstly, on your mobile website design, try to keep only the most important elements
on the page, removing whatever isn’t absolutely necessary. Secondly, optimize the
space above the fold by placing the most vital bits of information there, such as your
menu or name. This is what your visitors will see first, so keep it engaging and
informative.

11. Strengthen your SEO

After you design a website, nothing is more satisfying than watching the number of
COURSE MODULE

visitors grow. One way to increase traffic to your website is by improving your SEO.
SEO (search engine optimization) is the practice of optimizing your website’s content
so that it ranks well in search results.

SEO requires time, patience and persistence in order to get results, but you can start
setting up your SEO as you design your website. Here are some SEO tips that you can
apply to your content to improve your chances of ranking in the top results:

• Conduct keyword research: Keyword research will help you find the
keywords that are most relevant for your site. Once you have them, pick
one main keyword, and a couple of secondary ones - but no more than
that. Place your keywords in strategic locations across your site (SEO title
and description, homepage, etc.), but don’t overdo it. Search engines
penalize websites that “stuff” keywords unnaturally into their content.

• Include on-page SEO: This is about telling search engines what your
pages include. On each page, your website builder will ask you to fill in
the meta-data. This includes the URL, the SEO title (the blue link you see
on Google’s results page) and the description. Although visitors may not
notice these elements, they’re important when it comes to ranking.
Module 2 | Web Design | Galario, A. 17
Page 77
• Add alt text: Alt text refers to the descriptions that you give to your
pictures. These won’t be visible to your visitors, but they give a strong
indication to Google as to what the media is about. Google may have a
lot of knowledge, but it can’t “see” photos or GIFs (yet!). Alt text will help
your visual content appear in Google results pages. Plus, writing SEO
friendly alt text for your images is also an important practice in improving
your website’s accessibility.
• Boost internal linking: This will make ultimately it easier for Google’s bots
to navigate through and recognize your website. Adding links throughout
your website design will also encourage visitors to discover more pages.
COURSE MODULE

Pro tip: You can regularly track the growth and performance of your site by utilizing
Wix’s marketing integrations and connecting your website to tracking tools, like
Google Analytics or Google search console.

12. Engage with visitors

These days, visitors expect to engage with you on your site and beyond. Including
some of the following features when you design a website will keep your audience
connected and informed. Connecting with your followers across multiple channels is
a powerful way to build relationships with them - and will ultimately bring more eyes
to your site.
Live chat: Adding a live chat widget to your site makes a big difference in your
visitors’ ability to interact with you. Whether it’s to provide fast customer support or to
help undecided visitors make their way to the cart, this small window at the bottom of
your users’ screen is a friendly addition.

Module 2 | Web Design | Galario, A. 18

Page 78
COURSE MODULE

Social media: Similar to your website, your social media channels are an important
aspect of your online presence. As you design your website, add links to your social
accounts to build your social following and provide another outlet for visitors to
connect with you. These should be located somewhere visible, such as under the
menu, on the right or left side of your page, or in the footer.

Newsletter: Email marketing is a great way to maintain a connection with your

audience. You can use email newsletters to update visitors about the latest sales on
your online store, promote new blog articles, or celebrate your achievements with
subscribers. Invite visitors to subscribe to your newsletter by placing a lightbox on your
website.

Forms: One powerful way to build long-lasting relationships with your customers is to
ask for their feedback. Creating an online form for your website makes sure that

Module 2 | Web Design | Galario, A. 19

Page 79
visitors have a safe place to share their thoughts about your products, services,
website or customer support.

13. Ask for feedback

At this point, you may know how to design a website successfully, but there’s still room
for growth. Being impartial is especially difficult when it comes to your own creation,
which is why designing a website involves asking for honest feedback from individuals
you trust.

Be receptive to their critique, and remember that you may not always like what you
hear. To ensure a flawless final result, ask a friend or colleague to double check the
COURSE MODULE

following elements:

• Is the text correct? Spelling mistakes can ruin the professional reputation
that you’ve worked so hard to build.

• Are the pages easy to navigate? If it takes too long to find a strategic
page of your site, it means that you may need to rethink your site
architecture or improve the visibility of your menu.

• Is your web design optimized for mobile? Over 50% of internet users
browse websites using a mobile device. You certainly don’t want to
leave half of the world’s population frustrated.

• Are all the links working? Click on every link to make sure none of them
return a 404 page (this indicates that the page doesn’t exist anymore).

• Are the SEO elements filled out correctly? From alt text to title tags, there
are some items to verify so you can rank higher and grow your search
engine visibility.

Module 2 | Web Design | Galario, A. 20

Page 80
14. Publish and update

Having a website is a necessity in 2022. But having a website that is up-to-date is what
really makes the difference. A site that looks like it’s been lying dormant for too long is
uninviting and unreliable. Make sure to be alert, stay in-the-know, and update your
content as often as you can.

As you learn how to design a website that constantly grows and evolves, you’ll need
to know how to update your site. There’s always room for improvement, and you
want to make sure that you keep your website design fresh.

Stay savvy by keeping up with web design trends, and use that knowledge to update
COURSE MODULE

your site’s design overtime. Don’t forget to keep your content up-to-date, too. Make
sure it’s always relevant and proves to visitors that you’re on top of the latest
developments in your industry.

Module 2 | Web Design | Galario, A. 21

Page 81
FREE DOMAIN & WEB HOSTING AT 000WEBHOST

What Is Hosting and How Does Web Hosting Work?

In short, web hosting is a service that stores website’s data on the internet. Think of it
as an apartment renter – you pay a monthly (or yearly) fee, to live and store your
things in their property.
This is exactly what a hosting provider does. They rent out a server for people to store
and run their website data in.
Depending on your needs and technical knowledge, you can choose between a
couple of different types of hosting.

Different Types of Hosting

COURSE MODULE

Web hosting companies typically offer several hosting plans such as shared hosting,
VPS hosting, dedicated server hosting, and cloud hosting.

Module 2 | Web Design | Galario, A. 22

Page 82
Shared Hosting.
Shared hosting refers to a setup where many sites are all hosted together on the
same server. This hosting plan is best for beginners and those, who don’t need a lot of
resources.
Pros:
• The resources are split among the clients, this helps keep costs low
• It allows users to personally maintain their site
Cons:
• Traffic spikes can disrupt every site hosted in that server
• You don’t get the freedom to fine-tune various settings as you would with your
own server
VPS Hosting
COURSE MODULE

A Virtual Private Server (VPS) simulates multiple individual servers partitioned on one
central server. It gives you more control and power, however, to manage VPS
hosting, you need advanced knowledge.
Pros:
• Dedicated amount of resources per user
Cons:
• Hard to manage
• No support
• Steeper price tag
Dedicated Server
This plan is when you rent out the entire server for yourself. It is like owning a house.
Dedicated Servers are best for business’ sites that require high performance and
loads of resources.
Pros:
• The highest level of resources
• An unparalleled degree of freedom
Cons:
• The most expensive plan for web hosting
• Requires a lot of technical knowledge

Module 2 | Web Design | Galario, A. 23

Page 83
Cloud Hosting
Cloud hosting is a team of servers working together to provide hosting. It is the best
combination of shared and VPS hosting plans.
Pros:
• Allows multiple computers to handle high traffic websites
• Cheaper than a dedicated server
Cons:
• Usually doesn’t have access to the root directory
• The configuration file (php.ini) is not available

How Much Does It Cost to Host a website?

Different hosting providers have different costs for their plans. However, if you want to
COURSE MODULE

host a website for free at 000webhost you can host a website free of charge!
The free services are perfect for beginners and those, who don’t have a big budget.
What is more, we will provide you with PHP, MySQL, and control panel with no ads!
The only drawback of free hosting is the lack of support and resources.
However, if you feel like you need more functionality for a low price – you may use
Hostinger as the best choice.

Hostinger’s premium shared hosting plan is currently the most popular one. It only
costs $5.45 a month, which translates to $71.94 a year including taxes.
And you know what they say – the more you spend, the more you save. If you opt for
the four-year Hostinger services plan, hosting will only cost $2.95 a month!
So, whenever your site and audience grow, have a nice chat with our legendary
support team to help you transfer and get your website a nice premium place it
deserves.

Module 2 | Web Design | Galario, A. 24

Page 84
How to Set up Free Hosting with 000webhost?
Head to 000webhost.com, and click that free sign up button.

You can sign up using Facebook and Google Plus, or you can sign up using your
email.
COURSE MODULE

Now go to your email account and confirm the link that we’ve sent. Once verified,
you can start creating a website.

Module 2 | Web Design | Galario, A. 25

Page 85
When you click the create button, there’s a prompt asking why you sign up with us.
Choose your reason
COURSE MODULE

After that, you’ll get a form to fill the website’s name and password. This step will add
the website to your 000webhost sites list.

There are three options available to build your website: using site builder, WordPress,
or uploading a website that you’ve developed.

Module 2 | Web Design | Galario, A. 26

Page 86
Not sure what to do with the website you have just created? Don’t worry, in this
guide, we will go through the most important features and tools you can find on
000webhost members area. From domain name management to website creation -
we will cover the most necessary topics. Let’s get started!

Navigating in members area

Login to 000webhost members area https://www.000webhost.com/cpanel-login
000webhost members area was built having user experience in mind. Therefore, it’s
extremely easy to navigate to find tools needed to configure websites.

List of websites
List of your websites is presented you after login. At any time, you can click on top “+”
COURSE MODULE

to create new website. Follow on screen instructions to create new website.

Website is shown as a card with a website name. “Manage” button will provide tools
to control your website. “Info” button will show basic website information

Managing website
Using navigation buttons at the top of the members area you can quickly jump to
different website management sections:

• Build website - Start building your website here. Access easy to use website
builder. One-click WordPress install. Upload files with web file manager.
• Set web address - Change website domain name at anytime. Choose new
premium domain name or add domain name you already own.
• Upload files - Access file manager. Upload files using web browser.
• Manage database - Place to manage your databases. Create, access,
change password for MySQL databases
• Manage emails - Easy to use email forwarders. Email forwarders helps to
redirect your domain emails to mailbox you already own.
• Settings - Change website password, php version and other settings in this
section. Create cron jobs, redirects and password protected directories here.

Module 2 | Web Design | Galario, A. 27

Page 87
Creating a new website
Creating a new website has never been easier. Choose from 2 powerful tools and
start a professionally looking website with just a few mouse clicks:

• This powerful drag and drop website builder is perfect if you are not familiar
with content management systems or coding. Just choose a preferred
template and start filling your website with content.
• Using our custom-built app installer, it will take just a few minutes to install
popular apps like WordPress, Joomla, Moodle, etc.

Besides these options, you can code your own website and use already mentioned
COURSE MODULE

methods to upload files to the server.

Changing your domain name

After signing up to 000webhost.com cloud hosting you will receive default website
name such as my-name.000webhostapp.com. This is very convenient - website is
instantly online.

Creating an email
When you are ready with your website next step is to offer beautiful looking email
address and make your clients trust your service.

What is email forwarding?

Email forwarding is a service provided by 000webhost for free hosting clients without
any charge. It means an email sent to one address can be re-delivered to another
without being stored on 000webhost mail servers.

What is the difference between regular email and a email forwarding?

Regular email, and forwarding email accounts, are two different account types. You
can only have email forwarder in free hosting account.

Module 2 | Web Design | Galario, A. 28

Page 88
Regular email accounts enable you to send, receive, and access your email from
webmail, or using an email client application (like Outlook, or Apple Mail, for
example).

Forwarding email accounts allow you to automatically direct incoming messages to

another email address, such as your Gmail account. There is no inbox for a
forwarding account, and nothing is stored. We redirect any email messages sent to
your forwarding account address to the other email address you specify.

How to create email forwarder?

Before you start creating email forwarders make sure that you have parked your
COURSE MODULE

domain to 000webhost. It is not possible to use 000webhostapp.com domain for

email forwarders.

1. Login to cpanel
2. Go to “Manage Emails” section
3. Click on “Create”
4. Choose name for your mailbox
5. Enter email address to forward message to
6. Click Save

Uploading already created website

Moving or transferring website can be painful and overwhelming for many users. But
not on 000webhost! You can use 2 different tools to upload your website files:

• Web File Manager - Using web based file manager you can upload and
manage your website files. It’s fast and super easy to use. Remember you can
upload zip files and extract them.
• FTP Access - 000webhost supports File Transfer Protocol (FTP), therefore you can
use an FTP client to upload your website files.

Module 2 | Web Design | Galario, A. 29

Page 89
There are 2 ways to upload files to 000webhost.

FTP - File transfer protocol

By default websites created on 000webhost has FTP disabled for security reasons.
To enable FTP access for your website do the following:

1. Login your cpanel

2. Select website you want to manage
3. Go to Website Settings -> FTP details and turn on FTP transfer by sliding the
button to ON status
COURSE MODULE

What is my FTP username and password?

FTP username is your website name. For example my-website.000webhostapp.com so
FTP username is my-website.

FTP password is what you have chosen during website registration. Password can be
changed in Settings -> Password section

What is my FTP port?

FTP port is 21

Recommended FTP clients

• FileZilla (Windows, Mac, Linux)

• SmartFTP (Windows)
• Transmit (For Mac OS only)

FTP clients usually can use multiple FTP connections to transfer files, 000webhost has a
limit of 5 max connections.

Module 2 | Web Design | Galario, A. 30

Page 90
Web file manager
File manager can be accessed at files.000webhost.com

Username is your website name. For example my-website.000webhostapp.com so

username is my-website.

Password is what you have chosen during website registration. Password can be
changed in Settings -> Password section

Web based file manager has ability to extract ZIP files. Upload zip file and right click
on it and choose Extract
COURSE MODULE

Web file manager allows uploads up to 8MB. If you need to upload bigger files, use
FTP.

Building website content

Most important task for your website is to be found. Creating content is by far the
most influential step. Some tips for the start.

• Create unique and meaningful content - Search engines will quickly catch
interesting content you are creating. Be unique - it works
• Start Blog - Blog is very good way to start creating unique content
• Collect subscribers - No matter if you are offering products or services start
collecting email subscribers. You will soon be able to communicate with your
customers directly.
• Landing page - Your home page should introduce products or services you are
providing in simple manner.

Module 2 | Web Design | Galario, A. 31

Page 91
Reflection

Instruction: Write a 100 words REFLECTIVE ESSAY about what you have
learned in this unit that will help you to continue growing especially in
your chosen field. Consider the grading rubric below for your guidance.
Strictly use the format; Font Size: 12, Font Style: Bookman Old Style,
Spacing: 1.5, Margin: 1.5 left, 1 right top and bottom, Short bond paper, Justify. Submit
your encoded output next class session.

CRITERIA EXEMPLARY SATISFACTORY

NEED
IMPROVEMENT

The student clearly

understood the Some aspects of the The student did
topic in detailed essay are not clear not show an
COURSE MODULE

Understanding and organized and the reader is left adequate

the topic manner. Leads the wondering what the understanding of
reader to the writer is trying to say. the topic.
conclusion.
(5 points) (1 point)
(8 points)

The essay was

written in 100 words.
Font Size: 12, Font One of the previously More than one of
Style: Bookman Old described aspects is the previously
Presentation Style, Spacing: 1.5, missing. described aspects
(output) Margin: 1.5 left, 1 is missing
right top and (3 points)
bottom, Short bond (1 point)
paper, Justified.

(5 points)

Essay is free of Writer makes more

distracting spelling, Essay has few errors in grammar
Grammar and punctuation and spelling, punctuation and/or spelling
mechanics grammatical errors. and grammatical that distract the
error. reader from the
(5 points) content.
(3 points)
(1 point)

Module 2 | Web Design | Galario, A. 32

Page 92
Submitted on time.
Timeliness
(2 points)
COURSE MODULE

Module 2 | Web Design | Galario, A. 33

Page 93

Web Developmentwith HTML and CSS
No ratings yet
Web Developmentwith HTML and CSS
5 pages
Syllabus 4th Semester - 32-37
No ratings yet
Syllabus 4th Semester - 32-37
6 pages
Web Design - PDF Course Outline
No ratings yet
Web Design - PDF Course Outline
8 pages
Web Designing With Word Press
No ratings yet
Web Designing With Word Press
4 pages
Website Design Syllabus
No ratings yet
Website Design Syllabus
1 page
CCS 401 Software Project Management
No ratings yet
CCS 401 Software Project Management
10 pages
Web Development Syllabus
No ratings yet
Web Development Syllabus
4 pages
Web Design Courses Overview
No ratings yet
Web Design Courses Overview
16 pages
R. Gimarino BTLED-ICT 329 Website Development Author Wares Syllabus
No ratings yet
R. Gimarino BTLED-ICT 329 Website Development Author Wares Syllabus
26 pages
23CSE113 User Interface Design L1
No ratings yet
23CSE113 User Interface Design L1
26 pages
CC101 Introduction To Computing (HTML-CSS)
100% (1)
CC101 Introduction To Computing (HTML-CSS)
7 pages
WEBPROG-Web Programming
No ratings yet
WEBPROG-Web Programming
13 pages
Web Design I: Course Description
No ratings yet
Web Design I: Course Description
7 pages
Cit 484 Website Design & Programming
No ratings yet
Cit 484 Website Design & Programming
138 pages
Web Design & Development Course
No ratings yet
Web Design & Development Course
6 pages
Internet & Web Design Course Plan 25-26
No ratings yet
Internet & Web Design Course Plan 25-26
6 pages
BCA - SEM-1 - Static Website Designing - Syllabus
No ratings yet
BCA - SEM-1 - Static Website Designing - Syllabus
6 pages
HND S1 SWE Web Programming
No ratings yet
HND S1 SWE Web Programming
2 pages
Dal Module Performa
No ratings yet
Dal Module Performa
4 pages
Web Development 1 (WEB1) - Course Information
100% (1)
Web Development 1 (WEB1) - Course Information
12 pages
Course Pack WT
No ratings yet
Course Pack WT
15 pages
MMC5277 7f67 7f73 7303 WebPrinciples Pelasky Summer14
No ratings yet
MMC5277 7f67 7f73 7303 WebPrinciples Pelasky Summer14
8 pages
Coap 2000 Summer 2013 Hallmon
No ratings yet
Coap 2000 Summer 2013 Hallmon
13 pages
Second Syllabus IT E 203 Professional Elective 2 - Web Systems and Technologies
No ratings yet
Second Syllabus IT E 203 Professional Elective 2 - Web Systems and Technologies
6 pages
Web Design & Development Course
No ratings yet
Web Design & Development Course
16 pages
INT42D
No ratings yet
INT42D
2 pages
Fall 2009 - Course Syllabus
No ratings yet
Fall 2009 - Course Syllabus
4 pages
09CE3102 BWD Syllabuspdf 2025 07 28 11 20 07
No ratings yet
09CE3102 BWD Syllabuspdf 2025 07 28 11 20 07
4 pages
Web Design 1 Pacing Guide
No ratings yet
Web Design 1 Pacing Guide
9 pages
Web Design
No ratings yet
Web Design
2 pages
Sem1 - DSC-M-BCA-113T Intro To Web Technologies
No ratings yet
Sem1 - DSC-M-BCA-113T Intro To Web Technologies
3 pages
Web Design 1
No ratings yet
Web Design 1
8 pages
Batanes State College: Information Technology Education Department
No ratings yet
Batanes State College: Information Technology Education Department
6 pages
CPT 221
No ratings yet
CPT 221
13 pages
Course Guide WebTech1
No ratings yet
Course Guide WebTech1
3 pages
Ict 101
No ratings yet
Ict 101
6 pages
Computer Science - Syllabus
No ratings yet
Computer Science - Syllabus
25 pages
Web Design Basics for Students
No ratings yet
Web Design Basics for Students
2 pages
Computer Science
No ratings yet
Computer Science
25 pages
Web Design: Course Description & Objectives
100% (1)
Web Design: Course Description & Objectives
5 pages
Computer Information Technology
No ratings yet
Computer Information Technology
191 pages
Internet Concepts and Web Design PDF
100% (2)
Internet Concepts and Web Design PDF
191 pages
Course COAP 2000: Introduction To Web Programming Term Site Instructor
No ratings yet
Course COAP 2000: Introduction To Web Programming Term Site Instructor
13 pages
Course Compact
No ratings yet
Course Compact
10 pages
Macromedia Flash Syllabus
No ratings yet
Macromedia Flash Syllabus
27 pages
BTech I Sem WB Syllabus
No ratings yet
BTech I Sem WB Syllabus
4 pages
Web-Programming Course Description
No ratings yet
Web-Programming Course Description
8 pages
ICT Ed 437 (Web) Updated
No ratings yet
ICT Ed 437 (Web) Updated
5 pages
Web Essentials Fall 2015 Syllabus
No ratings yet
Web Essentials Fall 2015 Syllabus
11 pages
Sem 2 Major Computer SC Syllabus
No ratings yet
Sem 2 Major Computer SC Syllabus
4 pages
T104 Internet Technology Course Specification V2022
No ratings yet
T104 Internet Technology Course Specification V2022
10 pages
Syllabus-Graphic Design and Web Business Development (K21-CA)
No ratings yet
Syllabus-Graphic Design and Web Business Development (K21-CA)
12 pages
CHO 25CSE0101 Introduction To Web Technologies Updated
No ratings yet
CHO 25CSE0101 Introduction To Web Technologies Updated
9 pages
CCCS 310
No ratings yet
CCCS 310
9 pages
Web Development
No ratings yet
Web Development
31 pages
Introduction To Web Design Syllabus
No ratings yet
Introduction To Web Design Syllabus
2 pages
Higher Novemeber 2009 Paper 3
No ratings yet
Higher Novemeber 2009 Paper 3
16 pages
Applications of Derivatives
No ratings yet
Applications of Derivatives
16 pages
Soft Drink Industry Profitability Analysis
No ratings yet
Soft Drink Industry Profitability Analysis
3 pages
Bimaks Water Treatment Catalog 1718370506
No ratings yet
Bimaks Water Treatment Catalog 1718370506
28 pages
ThreadReader 0 Edwardw2 1443550946932543498
No ratings yet
ThreadReader 0 Edwardw2 1443550946932543498
12 pages
Disassembly and Assembly: Automatic Transmission
No ratings yet
Disassembly and Assembly: Automatic Transmission
1 page
Fish Innards Dehydrator Design & Fabrication
No ratings yet
Fish Innards Dehydrator Design & Fabrication
10 pages
Business Trust & Communication
No ratings yet
Business Trust & Communication
20 pages
Signature Analysis
No ratings yet
Signature Analysis
12 pages
2020 BBO Answers PDF
No ratings yet
2020 BBO Answers PDF
2 pages
Engineers' Guide to NMSE Walls
No ratings yet
Engineers' Guide to NMSE Walls
9 pages
Aci sp-226-2005
No ratings yet
Aci sp-226-2005
158 pages
Decentralized Control Strategy For Input-Series-Output-Parallel Modular LLC Resonant DC/DC Converters
No ratings yet
Decentralized Control Strategy For Input-Series-Output-Parallel Modular LLC Resonant DC/DC Converters
5 pages
Dimensioning A Stockpile Operation Using Principal Component Analysis
No ratings yet
Dimensioning A Stockpile Operation Using Principal Component Analysis
10 pages
CC Limp Bizkit
No ratings yet
CC Limp Bizkit
6 pages
FusionServer 2288H V7 Server User Guide 08
No ratings yet
FusionServer 2288H V7 Server User Guide 08
491 pages
Belimo NMV-D3-MFT
No ratings yet
Belimo NMV-D3-MFT
10 pages
Whistleblower Solutions for Firms
No ratings yet
Whistleblower Solutions for Firms
4 pages
Gom 6 - 10
No ratings yet
Gom 6 - 10
560 pages
Specific Speed
No ratings yet
Specific Speed
10 pages
Worksheet On The Neuron
No ratings yet
Worksheet On The Neuron
8 pages
International Retailing
100% (1)
International Retailing
29 pages
Brochure AC 800PEC Controller
No ratings yet
Brochure AC 800PEC Controller
12 pages
Risk Assessment Foundation Work
No ratings yet
Risk Assessment Foundation Work
2 pages
Chapter Two and References - 043431
No ratings yet
Chapter Two and References - 043431
9 pages
Latihan Soal Bahasa Inggris Kelas Viii-1
No ratings yet
Latihan Soal Bahasa Inggris Kelas Viii-1
5 pages
Joel M. Bowman Et Al - Variational Quantum Approaches For Computing Vibrational Energies of Polyatomic Molecules
No ratings yet
Joel M. Bowman Et Al - Variational Quantum Approaches For Computing Vibrational Energies of Polyatomic Molecules
73 pages
History 2ND Year
100% (1)
History 2ND Year
4 pages
BC Calculus Unit 7: Polar, Parametric, Vector Practice
No ratings yet
BC Calculus Unit 7: Polar, Parametric, Vector Practice
28 pages
Phase Diagram & Heat Treatment
100% (1)
Phase Diagram & Heat Treatment
16 pages