language Web Basics: HTML & CSS

Introduction

A website is HTML (structure), CSS (style), and JavaScript (behavior) delivered by browsers from servers over HTTP.

Why This Topic Matters

Even backend developers read front-end code in PRs. BA and QA inspect UI bugs. Basic web literacy helps every IT role.

Real-Life Example

A bug report says “button misaligned on mobile.” You open DevTools, see HTML/CSS classes, and describe the issue precisely.

Syntax Breakdown

Flow: browser requests URL → server returns HTML → browser loads CSS/JS → page renders. Tools: Chrome DevTools, VS Code.

Step-by-Step Code Explanation

1. Open any site, View Source vs Inspect Element. 2. Note vs . 3. Resize window — watch responsive layout change.

Expected Output

You can name the three core web technologies and open DevTools.

Common Beginner Mistakes

Skipping hands-on practice with real tools

Not asking how your specific team uses this workflow

Memorizing terms without trying them on a sample project

Best Practices

Practice in a personal test repo or sandbox project

Write short notes after each lesson

Ask a mentor or peer to review your work

Practice Problems

#

Easy — Problem 1

List three practical takeaways from "How Websites Work". #

Medium — Problem 2

Describe how "How Websites Work" applies to your target IT role.

Mini Assignment

Apply one idea from "How Websites Work" this week — in notes, a mock task, or with a study partner.

Lesson Summary

Web pages are documents styled and scripted in the browser.