SAED ICT TRAINING:

WEB DEVELOPMENT
CLASSIC SYSTEM INFOTECH LIMITED
30, IBADAN ROAD, MAYFAIR, ILE-IFE.
WEB DEVELOPMENT

MADE OF TWO WORDS:

1. WEB : It refers to websites, web pages
2. DEVELOPMENT: It refers to building the application

• Web development refers to the creating, building, and maintaining of websites.

• It includes aspects such as web design, web publishing, web programming, and database
management.
• It is the creation of an application that works over the internet i.e. websites.
BENEFITS OF BEING A WEB DEVELOPER

• Most Promising Career Opportunity: People and businesses

• A great income. Average of $65,000 in the US
• Work from Where You Want:Your laptop is a portable device
• Be your own boss. Create the next big social media platform
• There are always freelance opportunities
• Work for multiple companies anywhere in the word
• It is creative and fun
TYPES OF WEBSITES

• Business Websites
• Blog Websites
• Portfolio Website
• E-commerce Websites
• Personal Websites
• Landing page Websites
• News Websites
WEB DEVELOPMENT TYPE

• CODING: not necessarily programming

• CMS: WordPress etc usually used for creating blog websites
• WYSIWYG: Drag and drop web development

It is only when you code you have full control over your content, layout and style.
WEB DEVELOPMENT (CODING)

THIS IS GROUPED INTO FRONTENT AND BACK END DEVELOPMENT

• FRONT-END: Dictates how the website looks
HTML, CSS, JavaScript, *Bootstrap, *ReactJs
• BACK-END: Dictates how page works. Controls the database
PHP, PYTHON, SQL
• FULLSTACK: Front-end and back-end

Facebook’s front-end are those boxes, back-end are the pictures, videos and posts
 WORLD WIDE WEB COMMUNICATION

• The World Wide Web is about communication between web clients (browser) and web servers
(computers in the cloud).
Communication between clients and servers is done by requests and responses through (HTTP):
• A client (a browser) sends an HTTP request to the web
• A web server receives the request
• The server runs an application to process the request
• The server returns an HTTP response (output) to the browser
• The client (the browser) receives the response which are files (HTML, CSS, Js, PNG, JSON) stored
on the web server, interpret and then display to the user.
FRONT-END
WEB DEVELOPMENT
HTML: STRUCTURES WEB PAGES
CSS: STYLE WEB PAGES
JAVASCRIPT: ADD INTERACTIVITY TO WEB PAGES
 DEVELOPMENT ENVIRONMENT (EDITORS)

• Laptop: Visual studio code, Sublime text, Atom, Notepad

• Android: Spck editor, Treb edit
• IOS: Spck editor
• Online: W3schools html tryit editor

Note: All plain text editors (that does not format text) will work fine for writing
codes e.g Notepad
 FILE FORMATS

Just like music and movies have file formats (commonly mp3 and mp4), web
files have too. This tells the web browser (interpreter) what a file is meant to do
(structure, style, add interactivity) and how it reads it.

• Create files with name that preferably describes its use and ending the file
name with dot (.) html or css if it were to contain HTML or CSS code
respectively.
• JavaScript file names are to end with dot (.) js
• Imported images can end with dot (.) png, jpg, jpeg
 HTML: Hyper-text Markup Language

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements with attributes
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
• HTML attributes provide additional information about HTML elements.
 HTML ELEMENTS
• An HTML element is defined by a start tag, some content, and an end tag.

• HTML ELEMENTS ARE NESTED

HTML ELEMENT TAGS
HTML ELEMENT TAGS EXAMPLE
HTML LIST EXAMPLE
 HTML ELEMENT ATTRIBUTES
• Attributes usually come in name/value pairs like: name="value“ in the start
tag ▪ The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:
▪ The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed:
▪ The <img> tag should also contain the width and height attributes, which specify the width
and height of the image (in pixels):
▪ The required alt attribute for the <img> tag specifies an alternate text for an image
▪ The style attribute is used to add styles to an element, such as color, font, size, and more.
▪ The title attribute defines some extra information about an element as tooltip

• Example is:
<img src=“nysc.jpg" width="500" height="600” alt=“nysc logo”>
HTML ELEMENT ATTRIBUTES EXAMPLE
 HTML TABLE
• A table is declared with <table> tag in HTML and it consists of table cells
inside rows and columns.
• <tr> is use for table rows, <th> - table head and <td> for the data in each
rows
 HTML LINKS
• <a> tag is use for links and the href attribute indicates the link's destination.
• Links can be absolute (external) or relative (internal).

• It is also used with id ‘#’ to create webpage bookmarks linking to the id element
<h2 id="C4">Section two</h2> <a href="#C4">Goto Section two</a>
 HTML FORMS
• Form, input and label elements
• Form input type can be button, checkbox, text, radio, submit, password, email
HTML CLASS AND ID

• HTML class and id attribute are used to specify a class or id for an HTML element.
• Multiple HTML elements can share the same class but not an Id. It is unique.
• These two are often used by CSS to style the elements that contain them. Class name is
prefixed by ‘.’ while id is prefixed by ‘#’
SEMANTIC HTML ELEMENTS

• A semantic element clearly describes its meaning to both the browser and the developer.
• Non semantic elements include <div> and <span>
 CSS: Cascading Style Sheets

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• Inline style is defined with as style attribute on elements opening tag
• The internal style is defined inside the <style> element, inside the head section.
• External stylesheets can control the layout of multiple web pages all at once.
• External style sheet file is referenced inside the <link> element in the head
section. <link rel="stylesheet" href="mystyle.css">
 CSS SYNTAX
• A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.

• Declaration can be one or more which includes a CSS property name and a
value, separated by a colon. Multiple each end in semi column.
▪ p is a selector in CSS (it points to the HTML element you
want to style: <p>).
▪ color is a property, and red is the property value
▪ text-align is a property, and center is the property value
 WAYS TO INSERT CSS
• Inline

• Internal External

<head>
<style> <link rel="stylesheet" href="mystyle.css">
------------
</style>
</head>
CSS: COMMONLY USED
CSS: TEXT FORMATTING
TEXT ALIGN TEXT DECORATION
h1 { h1 {
text-align: center; text-decoration-line: overline; TEXT TRANSFORM
} } p.uppercase {
text-transform: uppercase;
h2 { h2 { }
text-align: left; text-decoration-line: line-through;
} } p.lowercase {
text-transform: lowercase;
h3 { h3 { }
text-align: right; text-decoration-line: underline;
} } p.capitalize {
text-transform: capitalize;
p{ p{ }
text-align: Justify text-decoration-line: overline
} underline;
}
CSS: EXAMPLE
HTML–CSS PROJECT
HTML–CSS PROJECT cont.
HTML–CSS PROJECT cont.
 CSS FRAMEWORK: BOOTSTRAP

• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other,
as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs.
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.
 HOW BOOTSTRAP WORKS

• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins.
• Bootstrap also gives you the ability to easily create responsive designs. Responsive
web design is about creating web sites which automatically adjust themselves to
look good on all devices, from small phones to large desktops.
• CSS and JavaScript codes have been writing for us. We just need to add classes
that correspond to the functionality we want to our html to use them.
 USING BOOTSTRAP IN YOUR PROJECT

• Using CDN (Content Delivery Network):

• Downloading Bootstrap 5
If you want to download and host Bootstrap yourself, go to
https://getbootstrap.com/, and follow the instructions there.
 BOOTSTRAP: GETTING STARTED

• Check out the documentation at https://getbootstrap.com/

• It is the world’s most popular web development framework for building
responsive, mobile-first sites, with jsDelivr and a template starter page
• Responsive web design makes your web page look good on all devices.
BOOTSTRAP DOCUMENTATION
BOOTSTRAP DOCUMENTATION cont.
BOOTSTRAP DOCUMENTATION cont.
BOOTSTRAP DOCUMENTATION cont.
• Check out the functionality under each of the groups. With
bootstrap, you’ll basically be doing copy-paste and editing except
for utilities group.
 BOOTSTRAP PROJECTS

• To be determined
• To be determined
• To be determined
 WEB HOSTING AND DOMAIN NAME

• Web hosting is a service that allow you to host your website files and make it
online for access through the internet.
• Domain name is the name of your website. Representing the servers IP
address.
• Most web hosting platforms also provide domain names.
• Hosting is your house where you keep your files, domain is your address.
• Cheap web hosting providers include NAMECHEAP and HOSTINGER
• Free web hosting providers include NETLIFY and GITHUB
• Signup and follow the instruction of any of the sites above to host your site.
 EDITING HOSTED WEBSITE

• Though each hosting website has there own unique interface and features
provided to update your hosted contents, you will generally find it the link to it
on your dashboard after login into your account.
• When providers don have an editor to allow you directly edit your files, you
have to delete the old and upload the recent one.
DOCUMENTATIONS FOR FUTHER STUDYING

• Sams Teach yourself web publishing with html and css in one hour a day - 6th edition
(Sams, 2010)
• CSS: The definitive guide. 5th edition (O’Reilly, 2017)
• W3schools http://w3schools.com
• Mozilla developer network (MDN) http://developer.mozilla.org
• Bootstrap https://getbootstrap.com/
SAED ICT TRAINING:
WEB DEVELOPMENT
INSTRUCTOR
ABDULRAHAMAN KEHINDE
08103346220