Website development is also known as software
developer.
Introduction to HTML
H-Hyper
T-Text
M-Markup
L-Language
Types of editors we can use to write
Html
1. Notepad or Text Edit
2. Visual studio code
When making a document
1. Create a folder in the desktop which makes it
more visible. To rename press F2 key on the
laptop.
2. To open a folder in visual studio code:
Go to the welcoming page and press open
folder then select the folder in your desktop.
To create a new file in visual studio code go to the
explorer and create a new file then you click on it.
To write an html document, the new file must end
with .html
To get the shortcut for Doctype html, you press
shift and !
Steps to start html
1. Create html file
2. Inside html file, first line should be:
<DOCTYPE html>
<html lang=”en”>
<head>
<title> </title>
</head>
<body>
</body>
</html>
NOTE: it is separate that the <head> is the
border of the website design.
TEXT SIZE
The biggest size in html is <h1> and the
smallest is <h6>
Paragraph
To write a paragraph write <p> </p>
TYPES OF TAG
1. Area tag
2. Article tag
3. Aside tag
4. HR tag
5. Bold tag
6. Break tag (BR)
7. Button tag
8. A tag
9. Code tag
10. Button tag
11. Div tag
12. Font tag
13. Head tag
14. Header tag
15. Image tag
16. Input tag
17. Label tag
18. List tag
19. Main tag
20. Nav tag
21. Option tag
22. Paragraph tag
23. Output tag
24. Progress tag
25. Small tag
26. Section tag
27. Mark tag
28. UL tag
29. Li tag
Functions
[Link] it open, open-close or close tag
[Link] tag
[Link] tag usage
[Link]
[Link] tag: it is an open tag
ii. </tag>
iii. It is used to map the portion of an image
iv.</tag Area one>
</tag Area two>
</tag Area three>
[Link] tag: it is an open tag
ii. </span>
iii. It is used to make it lighter or darker
iv. color, Weight,Bold
[Link] tag: close tag
ii. <br>
iii. It is used to break a sentence
iv. I love my mother<br>including my father
[Link] tag: open-close tag
ii. <h1> </h1>
iii. It is used to display heading
iv.<h1>Heading One</h1>
Note:H1 is the biggest and H6 is the smallest
[Link] tag: open-close tag
ii. <p> </p>
iii. It is used to put paragraph in a sentence
iv. Jesus is the same yesterday<p>today and
forever-mon.
[Link] tag: close tag
ii. <article>
iii. The article elements represent a section of a
content that forms an independent part of a
document or site.
iv. Used for:
Magazine, Newspaper Article, blog or Entry
[Link] tag: open-close tag
ii. <Aside>
iii. it is used to describe the main object of the verb.
iv. Tectarea ii Input iii. Forms
8. Hr tag: the <hr>
ii. element is most often displayed as a horizontal
rule to separate content
iii. The tag: The <hr> tag is an empty element.
iv. The usage: it creates a visible line that spans the
width of the web page.
9. Audio tag: is a useful tag, if you want to add
audio such as songs.
ii. <Audio> </Audio>
10. it is used to specify the bold text without any
extra importance.
ii. <b>Html Introduction </b>
11. Div tag: it is used to make a list of directory
titles.
ii. <div> </div>
13 & 14. Head and Header tag: to display headings
ii. it starts from h1- h6 no h7 downward
iii. h1 is the biggest while h6 is the smallest
iv. <h1> </h1>
15. Image tag: To display images
ii. <img src=”/assets/my-image” alt=””>
16 & 17. Input and Label Tag: To make a typing stuff
for input while labeling is what will be displayed
inside like First name but once something is
typed the label input will disappear and the
typed text will show. Label tag can be inside
input tag
ii. <input> <label for=”first name”> </input>
Full Meaning of Some Words in
coding.
HTML: Hyper Text Markup Language
Alt: Abbreviation For Alternative
URL: Uniform Resource Locator
CSS: Cascading Style Sheet
Img: Images
UL: Unordered list
LI: List item
STYLING
NOTE: styling will be done at the and of your body
before your Html.
<style>
Body{
Background color: yellow
}
e. t. c
<style>
Give your div a class name and style with that name
<div class=center> Type Anything</div>
In your styling:
.center{
}
<img> : used to embed an image in a web page.
Example:
<img src=”assets/images (31)” alt=”sample”
To put a text at the center this should be used
under your styling:
Justify- content: center
Align-items: center
Text-align: center
To make a Form
<div>
<form action="[Link]"></form>
<label for="fname">First name :</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name :</label><br>
<input type="text" id="lname" name="lname" value=""><br>
<label for="fname">Address:</label><br>
<input type="text" id="aname" name="aname" value=""><br>
<label for="pname">Profession:</label><br>
<input type="text" id="pname" name="pname" value=""><br>
<label for="gname">Gmail :</label><br>
<input type="text" id="gname" name="gname" value=""><br>
<label for="nname">Telephone :</label><br>
<input type="text" id="nname" name="nname" value=""><br>
<label for="dname">Date Of Birth :</label><br>
<input type="date" id="dname" name="dname" value=""><br>
</div>
JAVASCRIPT INTRODUCTION
-It can update and change both HTML and
CSS.
-it can calculate, manipulate and validate
data.
USES OF JAVASCRIPT
[Link]: To define the content of the web
pages.
[Link]: To specify the layout of webpages.
[Link]: To program the behaviour of
web pages. Just like making it interactive.
HOW YOU CAN LEARN WEB DEVELOPER
Sites:
W3 schools
Solotech and many other more.
By also watching tutorial videos on
youtube
Be determined, focused, teach yourself.
Do not stay on what you are being taught
alone. Do research, do
more project,teach
yourself and never stop
because coding is mainly
the practical aspect: you
learn more as you code.
Sites that can help you when you need
help while coding:
META AI: THIS IS LIMITED BECAUSE IT’S
NOT SPECIFICALLY FOR
CODING QUESTION.
BETTER SITES: CHAT GPT AND MANY
MORE
YOU CAN ALSO DOWNLOAD W3 SCHOOLS
How to make money as a coder
YOU CAN MAKE MONEY ON SITES LIKE FREELANCER, LINKELDN, FREE CODE CAMP AND MANY
MORE.
BUT YOUR LOCATION ALSO DEPENDS BECAUSE IN NIGERIA AND SOME OTHER AFRICAN
COUNTRIES AFTER RECEIVING YOUR MONEY ON PAYPAL, YOU CANNOT SEND IT TO YOUR
NORMAL BANK ACCOUNT SO TAKE NOTE.
BY CREATING EMAIL TEMPLATES FOR CLIENTS OR COMPANIES (CLIENTS).
YOU CAN ALSO TELL PEOPLE ABOUT YOUR JOB AND PEOPLE THAT ARE INTERESTED CAN TELL
YOU TO CREATE A WEBSITE FOR THEIR BUSINESS AND YOU MAKE MONEY.
YOU CAN ALSO CREATE YOUR OWN APP BUT NOTE THAT THERE IS NO SUCCESSFULL PERSON
THAT DID IT ALONE.
THIS IS JUST A NOTE ON WHAT I HAVE LEARNT AS A WEB DEVELOPER WHICH I AM STILL
LEARNING.
HOPE YOU LIKE THE NOTE.
IF YOU DON’T I JUST COVERED SOME BASIC OR FUNDAMENTAL PRINCIPLES IN CODING.
THANK YOU FOR READING!
STAY BLESSED!!!