WEB DEVELOPMENT
Web development is a process of creating a website.
We have access to this website through a browser;
e.g Chrome, Mozilla/firefox, phoenix, opera-mini.
Web development is made up of three main part;
1. Front-end (Client side): This is what the user see
and interact with. It is built using what we call; HTML
and CSS.
HTML=> Build the structure (Hyper-text MarkUp
Language)
CSS => color, font and layout, animation and other
aesthetic (Cascading Style Sheet)
2. Back-end (Server-side): This is the behind-the-
scene part. It is this part that stores all data, manages
account and process all request. Tools for building the
backend include; [Link], phyton, PHP, etc. And
databases like; MongoDB, MySQL etc
3. Full-Stack: A developer who works on both the
FrontEnd and the BackEnd. They are called
FULLSTACK DEVELOPER.
DEVELOPMENT ENVIRONMENT
For all website to be built, programmers need
something to work with; called, I.D.E; (Integrated
Development Environment). It is a software used for
programming. Examples of I.D.E include; Atom,
Sublime, Jupital, VsCode etc. The most commonly
used is VSCode.
DOWNLOADING VSCODE
1. From any browser; Using any preferred
search engine; search “Downloading
VsCode”,
2. Then, download; for either Windows or
Mac.
3. Once downloaded, install the setup file.
4. Once installed, open the software.
5. To aid easy building, go to the extension
tab, search ‘Live server’; install it and also
search ‘Prettier’; install. Live Server help to
run code live on our local machine browser
which prettier helps to format code i.e
helps highlight errors and ensure
consistency.
HTML
HTML has a full meaning; Hyper-Text Markup
Language. It is structuring a website i.e.
every text, button and input field that is been
seen on the website is written with HTML.
The way our machine or computer
understands language is called SYNTAX.
English can say GO
Yoruba will say LO
The basic syntax of HTML is called TAGS.
This tags are subdivided into two;
1. Opening Tag: <>
2. Closing Tag: </>
How do Tags work in HTML; They work hand
in hand with what is called ELEMENT
ELEMENTS
Elements are the building block of web
pages. Each element tells the browser how to
display all pieces of content.
SETTING UP AN HTML FILE
1. Open the installed VSCODE
2. Create a new folder at any location on your
machine,
3. import the folder to VSCODE.
At the top left corner; click on file,
Click on open folder,
Scroll to the location of the folder you
want to import to VSCODE,
Select the folder and click on ‘select
folder’.
4. hover your mouse on the folder and click
on ‘new file’
5. create a new file with the name;
[Link].
Index => Is the name {can be anything}
.html => Is called ‘Extension’ of ‘language
declaration’
6. on the new file created; press ‘shift + 1’ and
press ENTER.
7. A kind of menu will come up; we call it;
‘BROILER PLATE’
BROILER PLATE
1. <!DOCTYPE html>
This means my type of document
2. <html></html>
This means I want to write with html
This html tag now comprises of;
(a) <head></head>
This head tag contains meta data, title
and other external links. It is the brain of
our HTML.
(b) <body></body>
This body is what displays everything that
will be seen on our browser
COMMON TAGS IN HTML TO BUILD WITH
1. h1 – h6: We call them headings. H1 is the
biggest heading while H6 is the smallest.
<h1>HELLO WORLD</h1>
TAG
ELEMENT CONTENTS
2. P: We call this a paragraph.
<p>once upon a time, …</p>
ELEMENT TAG
CONTENTS
3. b: We call this a bold
<b>This is a bold Text</b>
TAG
ELEMENT CONTENTS
4. strong: This is an alternative tag to <b></b>
<strong>This is also a bold Text</strong>
ELEMENT TAG
CONTENTS
5. mark: This is used to write a highlighted
text
<mark>This is a highlighted Text</mark>
TAG
ELEMENT CONTENTS
6. Anchor Tag: We use anchor tag to create a
hyperlink. i.e to tie one or multiple pages together.
<a href=“location” >This is an anchor tag</a>
ELEMENT CONTENTS TAG
7. Textarea: Textarea is used to create a kind of
comment section on a website., e.g blog website
<textarea ></textarea>
ELEMENT TAG
8. Button: Button is use to submit a form.
<button>This is a button</button>
ELEMENT CONTENTS TAG
9. strike: The strike tag is use to write a text
that will be line-through
<strike>This is a strike tag</strike>
ELEMENT CONTENTS TAG
10. INPUT: Input tag is use to collect user
data. Anything that is collecting something
from the user is an input. E.g. Facebook login
page that ask for our username and password
before redirection to our profile.
<input type=“text” >
ELEMENT TAG
Types of Input
a. TEXT: Normal English A – Z
b. NUMBER: 0,1,2,3,4,5,6,7,8,9
c. PASSWORD: Anything that’ll be written
inside of this input will be hidden.
d. E-mail: To collet user mail
e. FILE: We use this type of input to collect a
user files. E.g image/passport, documents
etc.
f. COLOR: To take any color from the user.
g. RANGE: To take a range of something or
value from a user
h. DATE: To take a date specification from a
user.
i. TIME: To take a time specification from a
user.
j. RADIO: This type of input is use to make a
confirmation click.
k. CHECKBOX: To also make a confirmation
click. An input tag is a self-enclosed tag,
i.e
it does not have a closing tag (</>)
ATTRIBUTE
Attribute is used to modify an element.
Attributes works in key and values. And an
attribute is always inside of the opening tag
of an element
<h1 > </h1>
<h1 key=“Value;”>Hello World</h1>
attribute
e.g human being complexion;
complexion => black
complexion => dark
complexion => brown
complexion => albino
TYPES OF ATTRIBUTE
STYLE ATTRIBUTE
Text Properties
1. Color
2. font-size:
3. Font-family: Font family changes the way
our text looks
4. Font-style: Italic, oblique and normal
5. Text-align: left, right, center and justify
6. font-weight: To adjust the thickness of our
text… 100 - 900
7. Text-decoration: underline, over-line or
line-through
8. text-transform: Capitalize, lowercase and
uppercase.
9. letter Spacing: The spacing in between
the letter of each word.
10. Text-shadow: This is use to create a kind
of underlay to our texts.
Text shadow takes four parameters;
Style= “Text-shadow: p1 p2 p3 p4;”
a. offset-X: Deals with the shadow direction
of the horizontal axis
b. offset-Y: Deals with the shadow direction
on the vertical axis.
Offset-Y
-
- +
Offset-X
+
c. Blur percentage: This is use to determine
how blur we want our shadow to be.
d. color: To specify our shadow color