IT/Web Basics
1-2 hours BeginnerUnderstand how the Web works. Essential foundational knowledge before coding.
Overview
IT/Web Basics covers the knowledge of how websites and web apps work. Knowing terms like server, client, HTTP, and network makes learning programming much smoother.
Most programming schools start with these basics. You can build simple pages without it, but when you build complex things, you'll get stuck not knowing 'why it's broken'. Learning this early saves time.
- How web pages are displayed (Client and Server)
- What HTTP/HTTPS is
- The role of the browser
- Differences in roles between HTML, CSS, and JavaScript
Detailed Explanation
Client and Server
On the Web, a 'Client' (your PC/smartphone) sends a request ('Please give me this page') to a 'Server' (a distant computer hosting data), and the server returns files like HTML. The browser interprets and displays it.
- You enter a URL → Browser requests from server → Server returns HTML → Browser displays it
- Client = requesting side, Server = providing side
- One server responds to many clients
- Confusing server and client
- Thinking a 'server' is a special machine → A normal PC can be a server
HTTP and HTTPS
HTTP is the 'protocol' for exchanging data between server and client. HTTPS is the encrypted, secure version. If a URL starts with https://, the communication is encrypted.
- http://example.com → Unencrypted
- https://example.com → Encrypted (padlock icon)
- HTTPS is standard now. HTTP is being deprecated.
- Always use HTTPS for submitting forms.
- Confusing HTTP and HTML
- Thinking HTTPS is a 'different system' → It's just encrypted HTTP
Roles of HTML, CSS, and JS
HTML is 'structure' (what there is: headings, paragraphs, links). CSS is 'appearance' (colors, size, layout). JavaScript is 'behavior' (reacting to clicks, inputs). The three work together to form a web page.
- HTML: <h1>Title</h1> defines a heading
- CSS: h1 { color: blue; } makes it blue
- JavaScript: Shows an alert on button click
- Skeleton with HTML, decorate with CSS, move with JS
- Separating roles makes maintenance easier
- Trying to handle appearance in HTML → leave it to CSS
- Trying to write everything in JavaScript → put structure in HTML
Practical Steps
- 1 Open Developer Tools (DevTools) 2 mins
Let's peek behind the scenes (HTML) of the page you're looking at right now. Pros use this literally every day.
- Right-click anywhere on the page and select 'Inspect' or 'Inspect Element'
- A scary-looking panel with code will pop up on the right or bottom
- Make sure the 'Elements' tab is selected
Career & real-world context
IT/Web basics apply to designers, frontend, backend, and SRE roles. You'll follow meetings about HTTP, CDN, and DNS.
Industry examples
- E-commerce: HTML + CDN images
- SaaS: HTTPS APIs return JSON dashboards
- Media: async ad tags load after HTML
Recommended study plan
Day 1: client/server + HTTP → Day 2: DevTools Network → Day 3: environment setup step.
Prerequisites
No coding experience required—just a modern browser.
Common interview topics
- Explain HTTP vs HTTPS
- Client vs server roles
- What does DNS resolve?
Completion checklist
- Inspected requests in Network tab
- Can explain 404 vs 500
- Ready for environment setup step
Frequently Asked Questions
- What's the deal with HTTP vs HTTP/3?
- HTTP/1 and 2 used TCP, which is like 'I will definitely deliver this package!'. HTTP/3 uses UDP (QUIC), which is more like 'YEET! Throw it as fast as possible!'. It miraculously recovers from connection drops way faster. For now, just know 'newer is faster'.
- Why separate Web Servers and DB Servers? Why not just bundle them?
- Security and scalability, my friend. If a hacker breaches your Web server, you still want your DB safe. Plus, when traffic spikes, you can say 'Spin up 3 more Web servers!' without replicating your entire heavy database. Don't put all your eggs in one easily-hackable basket.
- I got a red screen saying 'CORS error'. What did I do wrong?
- Ah, everyone's favorite trauma—CORS! It's your browser playing bouncer, saying 'Whoa there, you can't just fetch data from a random different domain!'. It's a security feature. It's annoying at first, but it's a rite of passage when you start working with APIs.
- What are those 404 and 500 numbers all about?
- Status codes! The 400s (like 404) mean 'You (the user) messed up, that page doesn't exist'. The 500s mean 'I (the server) messed up and died, sorry bro'. It's the ultimate 'whose fault is it?' indicator for debugging.
- Complete beginner?
- Yes—no coding here. Learn vocabulary before HTML exercises.
- 404 vs 500?
- 404 = missing URL, 500 = server error—core debugging knowledge.
① Read the explanation. Next: ② Move to the next step.
You understand how the Web works.
Next is environment setup. Prepare your browser and editor, and let's write our first HTML.