REPUBLIC OF THE PHILIPPINES

TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

CAVITE CAMPUS
Carlos Q. Trinidad Avenue, Salawag, Dasmariñas City, Cavite, Philippines
Telefax: (046) 416-4920
Email: cavite@tup.edu.ph │ Website: www.tup.edu.ph

ICT5
BSIE-ICT-4B
OCTOBER 10, 2021
1:00PM-2:00PM

Prepared by:

Maricel M. Prongo, BSIE-ICT-4B

Checked by:

Title FirstName Ml. LastName

Cooperating Teacher
I. OBJECTIVES

At the end of the lesson, students will be able to:

1. define the Web Development;

2. demonstrate the distinction between web development and web

design; and

3. participate actively during class discussions and activities.

II. SUBJECT MATTER

Major Topic : Web Development

Sub-Topic : Introduction to Web Development

Materials : PowerPoint Presentation

References : https://careerfoundry.com/en/tutorials/web-

development-for-beginners/introduction-to-web-

development/

https://careerfoundry.com/en/blog/web-

development/what-does-it-take-to-become-a-web-

developer-everything-you-need-to-know-before-getting-

started/#the-difference-between-web-development-

and-web-design
III. LEARNING ACTIVITIES

A. Preparatory Activities

1. Daily Routine

a. Greetings

b. Classroom Management

c. Prayer

d. Attendance

e. Energizer

2. Review

a. What is internet?

b. What WWW stands for?

c. Give the three general components of the URL.

3. Motivation

Instructions: The students will be divided into two groups. Each

group will be given a topic and do their own research about it.

B. Presentation of Lesson

1. Introduction

The Web Development is the process of building websites and

applications for the internet, or for a private network known as an

intranet. Web development is not concerned with the design of a

 website; rather, it’s all about the coding and programming that powers

the website’s functionality.

2. Lesson Proper

Definition

Web development refers to building, creating, and maintaining

websites. It includes aspects such as web design, web publishing, web

programming, and database management.

Layers of Web Development

• Client-Side or Front-End

• Server-Side or Back-End

• Database Technology

The Difference Between Web Development and Web Design

Whereas the terms web development and web design are frequently

used interchangeably, they are not synonymous.

Consider a web designer and a web developer collaborating to build a

car: the developer would be in charge of all the functional components,

such as the engine, wheels, and gears, while the designer would be in

charge of both the visual aspects—how the car looks, the layout of the
dashboard, the design of the seats—and the user experience provided

by the car, such as whether or not it is a smooth drive.

Web designers create the look and feel of a website. They design the

website's layout, ensuring that it is logical, user-friendly, and enjoyable

to use. They consider all of the visual elements, such as color schemes

and fonts. What buttons, drop-down menus, and scrollbars should be

included, and where should they be placed? Which interactive

touchpoints does the user use to get from point A to point B? Web

design also considers the website's information architecture,

determining what content will be included and where it should be

placed.

Web design is a vast field that is frequently subdivided into more

specific roles such as User Experience Design, User Interface Design,

and Information Architecture.

It is the web developer's responsibility to turn this design into a live,

fully functional website. A frontend developer uses coding languages

such as HTML, CSS, and JavaScript to build on the visual design

provided by the web designer. A backend developer creates the site's

more advanced functionality, such as the checkout function on an e-

commerce site.

In other words, a web designer is the architect, and a web developer is

the builder or engineer.

Key Skills for Web Designer

 • Imagination • Analytical Skills

• Creativity • Communication Skills

• Patience • Technical Ability

• Attention to detail • Excellent IT Skills

Wireframe Diagrams – shows the structure of webpage using only

outlines for each content type and widget.

Site Diagram – indicates the structure of the site as a whole and how

individual pages relate to one another

Visual (graphic) design - A graphic designer creates the “look and feel”

of the site - logos, graphics, type, colors, layout, and so on - to ensure

that the site makes a good first impression and is consistent with the

brand and message of the organization it represents.

Web Developer Most Common Skills

• HTML/CSS skills • Interpersonal skills

• Analytical skills • Testing and debugging skills

• Responsive design skills • Back-end basics

• JavaScript skills • Search engine optimization

Who is a Web Developer?

• A web developer is at heart an interactive artist.

 • They’re someone driven by a deep desire to create things.

• A web developer’s canvas is a user’s web browser.

It is also the web developer’s job to diagnose problems in a website’s

functionality, to understand how something works by reading the code

behind it, and to make changes to fix any issues.

What does the Web Developer do?

FRONT-END BACK-END FULL STACK

DEVELOPERS DEVELOPER DEVELOPER
• Code the • Work behind- • Expert on both
front-end of a the-scene, backend and
website; i.e., building and frontend
the part that maintaining development
the user sees the technology
and interact needed to
with power the
front-end
• Bring the web • Ensure that • Guide on
designer’s everything the strategy and
designs to life frontend best practices
using HTML, developer build
JavaScript is fully
and CSS functional
• Ensure • Create and • Well-versed in
responsive manage the both business
design database logic and user
experience

3. Application
 Individual Activity: The teacher will instruct the students to take out a

piece of paper and write down the difference between web designer and

web development.

4. Generalization

The Web Development is the work involved in developing a Web site for

the internet (World Wide Web) or an intranet. Web Development can

range from developing a simple single static page of plain text to

complex web applications, electronic businesses, and social network

services. A more comprehensive list of tasks to which Web Development

commonly refers, may include Web Development commonly refers, may

include Web Engineering, Web Design, Web Content Development,

Client Liaison, Client-Side/Server-Side Scripting.

IV. EVALUATION

Direction: Read the questions carefully and choose the correct answer.

1. What does HTML stand for?

a. Hyper tag Markup Language

b. Hypertext Markup Language

c. Hyperlinks Markup Language

d. Hypertext Marking Language

2. It demonstrates the structure of a webpage by using only outlines

for each content type and widget.

a. Site Diagram c. Visual graphic

b. Wireframe Diagram d. Web Design

3. It is the process of building websites and applications for the

internet, or for a private network known as an intranet.

a. Web Developer c. Web Designer

b. Web Design d. Web Development

4. It brings the web designer’s designs to life using HTML, JavaScript

and CSS.

a. Back-end Developer c. Front-end developer

b. Server Side d. Full Stack Developer

5. They model the layout of the website, making sure it’s logical, user-

friendly and pleasant to use.

a. Web Development c. Web Design

b. Web Developer d. Web Designer

KEY TO CORRECTION

1. B
2. B
3. D
4. C
5. D
V. ASSIGNMENT

A. Follow-Up

Direction: Create your own Wireframe Diagram for the website you

intend to build. Use your creativeness; it can be drawn on white

paper, a document file, or an image. to be turned in on Monday

B. Advance

Direction: Read up on the Internet and the World Wide Web in

advance. The students will be divided in two groups. The first group

will be known as the Internet Group, and the second as the World

Wide Web Group; each group will be given 20 minutes to present the

topic assigned to them. To be presented at the following meeting.

References:

: https://careerfoundry.com/en/blog/web-development/what-does-it-take-

to-become-a-web-developer-everything-you-need-to-know-before-getting-

started/#the-difference-between-web-development-and-web-design

: https://careerfoundry.com/en/tutorials/web-development-for-

beginners/introduction-to-web-development/