Introduction to

Web Development
Overview
1. House Rules
2. Agenda
3. List down your goals to finish
the course
4. Introduction to Web
Development
House Rules
Be On Time. Avoiding eating during the online
Sign in at least 5 session.
minutes before the
class.

Turn On Camera. Dress Properly

Always turn your camera on Wear something comfortable but
so we can see each other. presentable.

Mute Your Mic Raise Your Hand

when you are not talking. If you need help or want to
ask something.

Be prepared. Enjoy Learning !

Agenda
• Who are you?
WHO

• Why are you here?

WHY • Why should you finish the course?

• What is Web Development?

WHAT • What are Web Development Stacks?

• How to become a Web Developer?

HOW • How to Get the Most Out of the Course?

• Why are you here?

WHY
My Goals to finish the course
On a sheet of paper answer the following: (15 mins)

1. What are your motivations to learn Web Development?

2. What do you want to achieve after the bootcamp?
3. How your skills in Web Development will change your life and your
career?
4. How it will impact the lives of your family, coworkers or future
client/employer/colleagues?
5. How will you feel if you never try or accomplish this?
6. What you would be your life when you become a Web Developer?
AFFIRMATIONS
 AFFIRMATIONS
1. I Am a Great Full-stack Developer
2. I Am Living with a Purpose
3. I Am a Channel of Blessings
Keys to success
Keys To Success

Make a routine Set clear goals Strong work ethics

Keys To Success

Consistency Practice Discipline Willing to Sacrifice

Keys To Success

Communicate Be a Lifelong Learner Don’t Be Afraid to Be

Regularly Creative
“Do what is easy your life will be hard.
Do what is hard, your life will be easy.”
Introduction to WEB DEVELOPMENT
 Learning Outcomes
1. Identify web developer soft skills.
2. Explain web development
3. Differentiate HTML and CSS
4. Discuss HTML
5. Create your first HTML
The World’s First Website

Source: http://info.cern.ch/hypertext/WWW/TheProject.html
INTERNET VS WEB

INTERNET WEB

An international It is one set of software

network of connected services running on the
computers. internet.
HOW DOES THE INTERNET WORKS?
HOW THE WEB WORKS?
SERVER
- is the software (not the Web Server - is basically a computer
computer itself). that hosts many websites depending
on its capacity.

Application Server - It is a type of

server designed to install and
operate applications, and hosting
the services and applications for
end-users, IT services, and
organizations.
What is Web Development
BITE, CHEW, SWALLOW and DIGEST the Burger and you
can become a FULL-STACK DEVELOPER!

WEB PUBLISHING
DATABASE MANAGEMENT WEB DEVELOPMENT STACK
Stack is set of tools typically used in
WEB PROGRAMMING tandem to develop web apps.
WEB DESIGNING
What is Web Development

3 BURGERS to DIGEST in WEB DEVELOPMENT

Front-end Developer
Back-end Developer
3 Web Stacks in 1 Course
Career path to become a Web Developer

Front-end Developer Back-end Developer Full-stack Developer

What is Web Development

BITE
CHEW
SWALLOW
DIGEST
How To Become a Front-end Developer?
Front-end Development

Refers to everything that the end user experiences directly.

3 Core Front-end Web Technologies

HTML is a structure that holds the content of a page. </>
CSS is the styling and formatting of web pages.
Javascript is a scripting language to make a website
responsive, dynamic and interactive.
How to Get the Most Out of the Course?

1. Always try to understand why the code is being written and understand the
purpose of the code.
2. Focus in learning programming not how fast you type.
3. Jot down notes and save important and useful links.
4. Watch the recorded video if you missed any lessons.
5. Review lessons which you find too difficult to understand.
6. Practice “daily coding”.
Stuck?

1. Evaluate expectation vs
output
2. Check for typo or symbols.
3. Check your code against the
given code or code
examples.
4. Learn from your mistakes.
5. We will try to help you.
What to do when you’re stuck?
Soft skills
Communication skills
Cleary state and communicate
what you have in mind.

Adaptability
Keep up with the latest news.

Problem Solving
Solving problem and making it all
work should be your mindset.

Interpersonal Skills
interacting and communicating with others to help start, build, and sustain
relationships.
Introduction to HTML and CSS
Introduction to HTML and CSS

HTML builds web page structure CSS enhances the look and style
Basic Structure of an HTML Document
s

<!DOCTYPE html>
<html>

<head>
<title> My First HTML Page</title>
</head>

<body>
Welcome to My First HTML page!
</body>

</html>
 HTML

HyperText Markup Language

● HTML describes the
structure of the pages.
● It uses elements and tags.
● It is the most basic
building block of the Web.

XML - Extensible Markup Language

GML - Generalized Markup Language.

Manuscript Symbols
Plain Text vs HTML
Codepen (Plain Text)
HTML Overview

● Hypertext Markup Language

● Use keywords or tag names
● Enclosed within angle brackets < >
● An opening tag is paired with a closing tag (but not all tags)
<tagname> content </tagname>
● Some tags are self-closing or self-terminating (slash at the end is recommended)
<tagname />
HTML Syntax Overview
HTML BASICS

<h1> </h1> - heading tag

h1 to h6 headings tag
<br> tag
Anatomy of an HTML tag

Content

<body> Welcome to My First HTML page! </body>

<br> - self-closing tag

Start and End tag
HTML element
HTML Elements

Examples
Elements usually have opening ● Body
and closing tags that surround and ● Head
give meaning to the content. ● Title
● Meta
Kinds of Tags

Examples
Container Tags Empty Tags
● Body
always wrap around text or do●notHead
have to be wrapped
graphics and comes in a set around text and do not
● Title
with an opening and closing require
● Metaa closing tag; stand
tag. alone
<title> My First Webpage </title> <meta>
 Tag Name Description
<h1> </h1> A section heading level 1. Headings are up to <h6></h6>

<p> </p> A paragraph tag

<a> </a> Hyperlink, formerly anchor tag

<img> An image tag

<b> </b> Bold text

<div> </div> Division, a block-level element for grouping

<span> </span> An inline level grouping element

<!--- --> Insert comment in the source code. A short description of code.
Not displayed in the browser
Try to add horizontal line to the title of you poem / lyrics

<hr >
Anatomy of an HTML tag

<hr size=”3”>

self-closing tag

HTML Element
HTML ATTRIBUTE
Anatomy of an HTML tag

Exercise:

Modify your poem / lyrics title

1. First horizontal line

- color blue, size 20.

2. For the second horizontal line

- no shade, size 10.

3. Center it.
Anatomy of an HTML tag
Which is better text editor or IDE?

A text editor is a software

program that allows users to
create and edit text files.

An Integrated Development Environment (IDE)

is a software application that provides
developers with a comprehensive set of tools
for developing, testing, and debugging software
applications.
Basic Structure of an HTML Document
<!DOCTYPE html>
<html> ● <!DOCTYPE>
<head> ● <html>
<title> My First HTML Page</title>
● <head>
<meta charset="UTF-8">
● <title>
</head>
<body> ● <meta>
Welcome to My First HTML page! ● <body>
</body>
</html>
Basic HTML Tags
Tag Name Description
<html> </html> HTML Tag is the parent tag or root element of a webpage.
<head> </head> Head Tag is first child of html tag. Site page information for web browsers
and Search engines.
<title> </title> Title tag is used only once inside head tag. Title is always displayed in
browsers tab.
<meta> Meta tag is used to define the charset family, description, keywords, Author,
robots and Geo Location of a website.
<body> </body> Body tag is used to create the page structure or content. Structure
includes Headings, Paragraphs, images, tables, division, etc of the website.
HTML Boilerplate

1. Create a folder (ex. Web Dev Intro)

2. Create a folder inside the folder
( ex. HTML Personal Site)
3. Then create html file (ex.
index.html)
4. Click the file index.htm
5. Type ! (exclamation mark)
the press enter or tab.

Note:
Install and open the Visual Studio Code app
then follow the instructions
Basic HTML

If you see a dot on the tab bar of your file, that means that there's unsaved progress.
Exercise 1 : Create your first HTML

Follow these simple steps:

Basic Structure of an HTML Document
In Notepad type;

<!DOCTYPE html>

Note:
For this activity use Notepad app (for windows)
TextEdit (for Mac)
Basic Structure of an HTML Document
In Notepad type;

<!DOCTYPE html>
<html>

</html>
Basic Structure of an HTML Document

<!DOCTYPE html>
<html>
<head>
</head>

</html>
Basic Structure of an HTML Document

<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page</title>
</head>
</html>
Basic Structure of an HTML Document

<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page</title>
<meta charset="UTF-8">
</head>
</html>
Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page</title>
<meta charset="UTF-8">
</head>
<body>

</body>
</html>
Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page</title>
<meta charset="UTF-8">
</head>
<body>
Welcome to My First HTML page!
</body>
</html>
Exercise 1 : Create your first HTML

1.Save page as index.html file on your system.

2. Double click the file and your page is live on browser.
Present your first HTML page!
Basic HTML Tags
Tag Name Use
<h1> </h1> A section heading level 1. Headings are up to <h6> </h6>
<p> </p> A paragraph tag
<a> </a> Hyperlink, formerly anchor tag
<img> An image tag
<br> Line break
<b> </b> Bold text
<div> </div> Division, a block-level element for grouping
<span> </span> An inline level grouping element
<!-- --> Insert comment in the source code. A short description of
code. Not displayed in the browser.
HTML Attributes
● Provides additional information about the html tags or elements
● Two parts of attribute: attribute name and attribute value

HTML TAG HTML ATTRIBUTES

Name Value Name Value

<img src="picture.png" alt="picture">

HTML Attributes
Attribute Name Description
href Hypertext Reference specifies the url (web address) for a link.
<a href="about.html">About</a>
src Source of media elements like images, iframes, Audio, Video.
<img src="logo.png">
id Set unique id of single element
<h1 id=“MyHeader"> My First HTML Page </h1>
class Group single or multiple elements.
<p class=“intro">This is an Introduction</p>
style Specifies an inline style for an element
<p style="color:green">This is color green paragraph.</p>
alt Specifies an alternative text.
<img src="logo.png" alt=“Company Logo“ >
title Tooltip of an element.
<img src="logo.png" title=“This is Company logo”>
Activity 1 : Create an HTML File
Follow these simple steps:
1. Open a text editor, e.g. Notepad
2. Type the following text :
My First HTML page.
3. Save the file as index.html
4. Double click the file and your page is live on browser
5. Add the following text to the page:

Welcome to My First HTML page!

I am { write your name}.
My interest are { write at least three interests }.
Try to add pictures
6. Save the file as Activity1_FirstHTML
7. Discuss what your page look like.
Now let’s try to Modify Activity 1
In Notepad/Text edit
(let’s modify and add images to previous activity)
<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page</title>
<meta charset="UTF-8">
</head>
<body>
Welcome to My First HTML page!
</body>
</html>
HTML Tags and Attributes
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
<meta charset="UTF-8">
</head>
<body>
<h1 style= color:blue; text-align:center;> Welcome to My First HTML page </h1>

<p style= color:violet;> I am ….</p>

<p style= color:red;> My interests are …. </p>

</body>
</html>
HTML Tags and Attributes
<body>
<img src="images/girl.png" alt="cartoon" style="width:128px;height:128px;"> <br>
<img src="dog.png" alt="picture"> <br>
<img src="girl.png" alt="cartoon" style="width:128px;height:128px;"> <br>
<img src="face.jpeg" alt="picture" width="100" height="100"> <br>
<img
src="https://www.interactivesearchmarketing.com/wp-content/uploads/2014/06/
png-vs-jpeg.jpg" alt="flower">

</body>
</html>
HTML Tags and Attributes
<body>
<img src="images/girl.png" alt="cartoon" style="width:128px;height:128px;"> <br>
<img src="dog.png" alt="picture"> <br>
<img src="girl.png" alt="cartoon" style="width:128px;height:128px;"> <br>
<img src="face.jpeg" alt="picture" width="100" height="100"> <br>
<img
src="https://www.interactivesearchmarketing.com/wp-content/uploads/2014/06/
png-vs-jpeg.jpg" alt="flower">

</body>
</html>
HTML Tags and Attributes

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
<meta charset="UTF-8">
</head>

<body>

<a href=“Actitivy2_html.html”> This is my second webpage. </a>

</body>
</html>
Output
Output

Present your first Web Page!

Wrap up

What have you learned?

Technical Skills
1. Introduction to Web Development
2. Introduction to Web Stacks
3. HTML Tags
4. HTML Attributes
Thank you!