Lesson 1: Web Foundations and the Development Workflow

Web development is not only about making pages look good. It is the process of designing, building, testing, and maintaining websites and web applications that run through a browser. In a BSIT context, that means combining content, interface, logic, and data into one usable system.

A useful way to think about the web is through three major parts:

• Client side — what the user sees and interacts with in the browser
• Server side — the program or service that receives requests and sends responses
• Data layer — the database or persistent storage where application data lives

When a student opens an online enrollment portal, the browser displays the page, the server checks the request, and the database stores subjects, schedules, and student records. A real web system is therefore a collaboration of technologies rather than a single file.

Web development is usually grouped into:

• Front-end development — structure, style, and interaction
• Back-end development — business rules, data handling, authentication, and APIs
• Full-stack development — working across both sides

As a third-year BSIT student, you should start seeing the web not as "HTML only," but as an information system delivered through the browser. That mindset will guide the rest of the subject.

Every time a user opens a website, a sequence happens behind the scenes:

1. The user enters a URL or clicks a link.
2. The browser identifies the target server.
3. A request is sent using HTTP or HTTPS.
4. The server processes the request.
5. A response is returned, often containing HTML, CSS, JavaScript, images, or JSON.
6. The browser renders the result for the user.

A URL is commonly broken into parts:

• Protocol — https
• Domain — example.com
• Path — /students/profile
• Query string — ?id=2025-00123

For example:

https://portal.school.edu.ph/enrollment/view?student=2025-00123

This tells the browser where to go and sometimes what data to request.

The request-response model is central to web development. A browser does not "guess" what to show. It asks. The server replies. Because of this, web developers must understand:

• what data is requested,
• what format is returned,
• and how errors are handled.

If the server cannot find a page, the browser may receive a 404 response. If login fails because of wrong credentials, the application must decide how to respond clearly and securely.

A beginner-friendly web stack usually starts with three browser technologies:

• HTML for structure
• CSS for presentation
• JavaScript for behavior

Think of them this way:

On the server side, many schools also introduce a framework or language for processing requests and working with data. The exact tool may vary, but the concepts stay similar:

• routes
• forms and validation
• CRUD operations
• sessions or authentication
• database connection

A database is commonly used when the site must remember something beyond one visit. Examples include user accounts, product listings, grades, complaints, reservations, or inventory records.

Even at the foundation level, it is important to distinguish between a static site and a dynamic web application:

• A static site serves mostly fixed content
• A dynamic application generates responses based on user input, stored data, or business rules