Web Design

Week 1
 What is CodeLagos?
●
CodeLagos is an initiative of the Lagos State
Ministry of Education aimed at making coding
education accessible to Lagos State residents
●
The program launched a successful pilot phase
in 2017 with 23 Government schools and 32
Private schools. Since then, it has expanded to
130 Government schools and 145 Private
schools
●
Started with 4 Out of School centres but has
since expanded to 21

2
 Code of Conduct
●
Uphold the tenets of CodeLagos and conduct myself in a
manner that promotes the values and objectives of the program
●
Refrain from the use of tobacco, alcohol or non-prescription
controlled substances during the program
●
Follow the instructions of the program staff at all times
●
Turn off my phone or put them on silent mode while training is
on. You are not allowed to use your phones while the class is in
session
●
Show respect to my instructors, fellow scholars and any other
persons involved in this program
●
Not partake in side conversations or any other form of distraction
while training is going on

3
 Code of Conduct
●
Avoid loitering during training sessions
●
Refrain from fighting, use of force or abusive
language
●
Not to litter the training facilities before, during and
after each session
●
Abide by all other rules of the program, including any
additional conduct rules or requirements set forth in
the program materials
●
Smoking is not allowed within the learning facilities
●
Alcohol is not allowed within the training facilities

4
 Eligibility for Graduation
●
Attend a minimum of 85 percent of your classes
●
Complete all assignments and assessments
●
Be punctual to all training sessions

5
6
 Course Objectives
●
Understand the technology behind the web
●
Design websites from scratch using HTML and
CSS
●
Build responsive and interactive websites using
WordPress

7
 What is Web Design?
●
Design is the process of collecting ideas, and
aesthetically arranging and implementing them,
guided by certain principles for a specific
purpose
●
Web Design is a similar process of creation,
with the intention of presenting the content on
electronic web pages, which the end-users can
access through the internet with the help of a
web browser

8
 Elements of Web Design
●
Layout: This is the way the graphics, ads and text are arranged
●
Colour: The choice of colours depends on the purpose and
clientele; it could be simple black-and-white to multi-coloured
design, conveying the personality of a person or the brand of an
organization, using web-safe colours
●
Graphics: Graphics can include logos, photos, clipart or icons, all
of which enhance the web design
●
Fonts: The use of various fonts can enhance a website design.
Most web browsers can only read a select number of fonts, known
as "web-safe fonts"
●
Content: Content and design can work together to enhance the
message of the site through visuals and text. Written text should
always be relevant and useful

9
 What is a Browser?
A browser is software that allows you to access
the web. It lets you visit websites and carry out
your activities on them

10
 How Does a Browser
Render a Webpage?
1) You type an URL into address bar in your preferred
browser
2) The browser parses the URL to find the protocol, host,
port, and path
3) It forms a HTTP request (that was most likely the protocol)
4) To reach the host, it first needs to translate the human
readable host into an IP number, and it does this by doing a
DNS lookup on the host
5) Then a socket needs to be opened from the user’s
computer to that IP number, on the port specified (most often
port 80)

11
 How Does a Browser
Render a Webpage?
6) When a connection is open, the HTTP request is sent to the
host
7) The host forwards the request to the server software (most
often Apache) configured to listen on the specified port
8) The server inspects the request (most often only the path), and
launches the server plugin needed to handle the request
(corresponding to the server language you use, PHP, Java, .NET,
Python?)
9) The plugin gets access to the full request, and starts to prepare
a HTTP response
10) To construct the response a database is (most likely)
accessed. A database search is made, based on parameters in the
path (or data) of the request

12
 How Does a Browser
Render a Webpage?
11) Data from the database, together with other information the
plugin decides to add, is combined into a long string of text
(probably HTML)
12) The plugin combines that data with some meta data (in the
form of HTTP headers), and sends the HTTP response back to the
browser
13) The browser receives the response, and parses the HTML
(which with 95% probability is broken) in the response
14) A DOM tree is built out of the broken HTML
15) New requests are made to the server for each new resource
that is found in the HTML source (typically images, style sheets,
and JavaScript files). Go back to step 3 and repeat for each
resource

13
 How Does a Browser
Render a Webpage?
16) Stylesheets are parsed, and the rendering
information in each gets attached to the matching node
in the DOM tree
17) Javascript is parsed and executed, and DOM nodes
are moved and style information is updated accordingly
18) The browser renders the page on the screen
according to the DOM tree and the style information for
each node
19) You see the page on the screen
20) You get annoyed the whole process was too slow.

14
 Explaining Terms
●
Web Page: A document which can be displayed in a
web browser such as Firefox, Google Chrome, Opera,
Microsoft Internet Explorer or Edge, or Apple's Safari
●
Website: A collection of web pages which are grouped
together and usually connected together in various
ways
●
Web Server: A computer that hosts a website on the
Internet.
●
Search Engine: A website that helps you find other
web pages, such as Google, Bing, or Yahoo

15
 Tools You will Need
1)A Computer
2)A Text Editor (Notepad++, Sublime Text or Visual
Studio Code)
3)Web Browsers (Firefox, Chrome, Opera, Safari,
Internet Explorer, and Microsoft Edge)
4)A Web Server (WAMP, XAMPP)

You won’t need a web server until it is time to

work with WordPress

16
 What is HTML?
●
HTML stands for Hyper Text Markup Language
●
HTML describes the structure of Web pages using
markup
●
HTML elements are the building blocks of HTML
pages
●
HTML elements are represented by tags
●
HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
●
Browsers do not display the HTML tags, but use them
to render the content of the page

17
 What is CSS?
●
CSS stands for Cascading Style Sheets
●
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
●
CSS saves a lot of work. It can control the
layout of multiple web pages all at once
●
External stylesheets are stored in CSS files

18
 What is JavaScript?
●
JavaScript is the programming language of HTML
and the Web
●
It adds interactivity to web pages
●
Web pages are not the only place where
JavaScript is used. Many desktop and server
programs use JavaScript. Node.js is the best
known. Some databases, like MongoDB and
CouchDB, also use JavaScript as their
programming language
●
We won’t be covering JavaScript in this course

19
How They All Fit

20
 Setting Up
1)Create a template folder on a location on your
machine
2)Inside the folder, create a folder for your CSS
and image files
3)Create a template.html file using a text editor of
your choice

21
 Setting Up

Your folder should look like this

22
 Using the Template
●
For each project we want to create we can
simple rename the template folder and work
with it
●
The template.html file will also be renamed as
the need arises
●
The template.html file gives us a clean place to
start from every time we want to create a web
page

23
Modify Your
Template File

24
 Understanding the
Template file
●
The <!DOCTYPE> declaration must be the very
first thing in your HTML document, before the
<html> tag
●
The <!DOCTYPE> declaration is not an HTML
tag; it is an instruction to the web browser about
what version of HTML the page is written in

25
 Understanding the
Template file
●
The <html> tag tells the browser that this is an
HTML document
●
The <html> tag represents the root of an HTML
document
●
The <html> tag is the container for all other
HTML elements (except for the <!DOCTYPE>
tag)

26
 Understanding the
Template file
●
The <head> element is a container for all the
head elements
●
The <head> element can include a title for the
document, scripts, styles, meta information, and
more
●
The head supports other tags such as: <style>,
<base>, <link>, <script>, <noscript>

27
 Understanding the
Template file
●
Metadata is data (information) about data
●
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable
●
Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata
●
The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services
●
HTML5 introduced a method to let web designers take control over
the viewport (the user's visible area of a web page), through the
<meta> tag

28
 Understanding the
Template file
●
The <title> tag is required in all HTML
documents and it defines the title of the
document
●
The <title> element defines a title in the
browser toolbar
●
This provides a title for the page when it is
added to favorites
●
This also displays a title for the page in search-
engine results

29
 Understanding the
Template file
●
The <body> tag defines the document's body
●
The <body> element contains all the contents
of an HTML document, such as text, hyperlinks,
images, tables, lists, etc

30
 Creating Your
First Webpage
●
Copy your template folder
●
Rename your copy of the template folder to
first_webpage

31
 Creating Your
First Webpage
●
Go inside the folder and rename template.html
to index.html

32
 Note
●
Every website must have an index.html file
●
The index.html file is the default file to be
rendered on a website
●
Create the index.html file first then the other
pages of your website

33
Edit Your index file

34
 Render Your Index File
●
Preview your index file
●
It will appear as shown below:

35
 Note
●
<!--This is a comment –> did not display in the
browser
●
The text for the title tag shows up in the title
●
The text for the <h1> tag shows up in the page
rendered
●
Comments are never rendered in the web page
●
They can be viewed when you view the source
of a web page

36
 <h1></h1>
●
Headings are defined with the <h1> to <h6>
tags
●
<h1> defines the most important heading. <h6>
defines the least important heading
●
<h1> headings should be used for main
headings, followed by <h2> headings, then the
less important <h3>, and so on

37
 Finding Help Online
1)www.w3schools.com
2)https://developer.mozilla.org/en-US/
3)www.codecademy.com

38
 Homework
1)Complete your first web page to provide a
detailed description of yourself
2)Learn how to view the source of a web page
3)Create a single page resume of yourself

39
 Conclusion
●
HTML is a means of creating web pages
●
CSS handles the presentation of a web page to
the user
●
JavaScript enhances the interactivity of a web
page

40
41
 Code of Conduct
●
Uphold the tenets of CodeLagos and conduct myself in a
manner that promotes the values and objectives of the program
●
Refrain from the use of tobacco, alcohol or non-prescription
controlled substances during the program
●
Follow the instructions of the program staff at all times
●
Turn off my phone or put them on silent mode while training is
on. You are not allowed to use your phones while the class is in
session
●
Show respect to my instructors, fellow scholars and any other
persons involved in this program
●
Not partake in side conversations or any other form of distraction
while training is going on

42
 Code of Conduct
●
Avoid loitering during training sessions
●
Refrain from fighting, use of force or abusive
language
●
Not to litter the training facilities before, during and
after each session
●
Abide by all other rules of the program, including any
additional conduct rules or requirements set forth in
the program materials
●
Smoking is not allowed within the learning facilities
●
Alcohol is not allowed within the training facilities

43
 Eligibility for Graduation
●
Attend a minimum of 85 percent of your classes
●
Complete all assignments and assessments
●
Be punctual to all training sessions

44
 Review
●
Last time we met, we created a profile for
ourselves
●
It is assumed that you know how to view the
source of a web page
●
You should also have a 1 page CV of yourself
because we shall use it today

45
 Class Overview
●
Structure a Simple Web Page
●
Use Headings and Paragraphs
●
Create Sections for your content
●
Create Unordered and Ordered List

46
 Structure a
Simple Web Page
●
We are going to create a simple recipe web
page
●
Before you create a web page, it is important to
plan how your page will look like
●
This means that you should understand you
pages layout
●
This layout is called a wireframe

47
 Wireframing Tools
1)Pen and Paper
2)Any Image Editing Application
3)Pencil Project
4)Mockplus
5)Wireframe CC

48
 Mockup for
Our Web Page

Created using MS Paint

49
 Creating our
Web Page
●
To create the heading section of our web page,
we will use headings and paragraphs
●
The recipes will be created using sections
●
For the sections, once we create the template for
the first one we can use that for the others
●
Copy the template folder and rename it to recipe
●
Open the recipe folder and rename template.html
to index.html
●
Open up the index.html file in your text editor

50
 Use Headings
and Paragraphs
●
The <h1> to <h6> tags are used to define
HTML headings
●
<h1> defines the most important heading
●
<h6> defines the least important heading
●
For our page, the title will be an <h1>

51
 Use Headings
and Paragraphs

Edit your index.html file and

add the <h1>

52
Use Headings
and Paragraphs

Preview the HTML file in

your browser
53
Use Headings
and Paragraphs

Add a description

54
 Using the
Paragraph Tag
●
The <p> is used to add a paragraph to a web
page
●
When you preview you web page you get the
page shown below:

55
 Create Sections
for your content
●
The <section> element is a structural HTML
element used to group together related
elements
●
Each <section> typically includes one or more
heading elements and additional elements
presenting related content

56
Add a Section to
Your Web Page

Add a <section>
to your web page

57
Add a Section to
Your Web Page

Add a Recipe title and

description

58
Add a Section to
Your Web Page

Preview the Page

59
 Create
Unordered and Ordered List
●
To create a list, the items of the list are
enclosed in <li> tags
●
Using <ul> to encase the <li> tags will create
an unordered list
●
Using <ol> to encase the <li> tags will create
an ordered list

60
 Create an
Unordered List
●
For the list of ingredients, the order in which
they are presented does not matter
●
The code to create an unordered list is shown
below:

61
Preview the
Ingredients

62
 Create an
Ordered List
●
Display the list of steps for preparations of the
recipe

63
Preview the
Web Page

64
 Homework
1)Add 4 more dishes to the recipe project
2)Complete your one page resume
3)Add your profile picture to your resume
4)Research on wireframing tools

65
 Conclusion
●
It is a good practice to create wireframes for a
web page before you create
●
The <section> helps you divide your web page
into relevant sections
●
<h1> to <h6> are used based on priority
●
A page should only have one <h1>

66