Masterclass #2: Understanding Web Fundamentals
Sulabh SharmaTable of contents
In today’s digital world websites are the backbone of online presence and understanding web fundamentals is essential for anyone looking to create, design or optimize a website. Whether you’re a beginner or an aspiring developer learning HTML, CSS and JavaScript will empower you to build engaging and responsive web pages. Masterclass session was conducted on 1st February 2025 at our Noida office about Web fundamentals and this blog contains the key learnings of session.
Topics covered in Masterclass
1. What is the Internet?
The internet is a vast network that connects the whole world, allowing us to access information, communicate and share data instantly. Every website, app and online service relies on this global network of computers to function.
2. How Does the Internet Work?
When you type www.google.com into your browser, several steps happen behind the scenes:
🔹 Web Browser – Your Digital Navigator: The browser (Chrome, Firefox, Edge) helps you access websites by interpreting web code.
🔹 URL – The Internet’s Home Address: A URL (Uniform Resource Locator) like www.google.com tells your browser where to find a website.
🔹 DNS – The Internet’s Phonebook: The Domain Name System (DNS) translates the website name (e.g. google.com) into an IP address.
🔹 Request – Knocking on Google’s Door: The browser sends a request to Google’s servers asking for the webpage.
🔹 Storage – The Internet’s Library: Web servers store databases where websites and data are saved.
🔹 Response – Getting the Webpage: Once the request is processed, Google’s web server sends back the requested page.
This entire process happens in milliseconds!
3. Webpages and Websites
A webpage is a single document on the internet while website is a collection of linked webpages.
🔹 Hyperlinks – The Web’s Connectors: Hyperlinks help navigate between different webpages.
🔹 Static vs. Dynamic Websites:
Static Websites: Fixed content (e.g., basic blogs, portfolio sites).
Dynamic Websites: Interactive, database-driven content (e.g., Facebook, YouTube).
4. HTTP vs HTTPS
🔹 HTTP (Hypertext Transfer Protocol): A communication protocol that allows data transfer between web browsers and servers.
🔹 HTTPS (Secure HTTP): Uses encryption (SSL/TLS) to protect sensitive information, ensuring data security. Eg. banking system
Websites with HTTPS are safer preventing cyber threats like data interception.
5. Frontend vs Backend Development
🔹 Frontend (Client-Side): Everything users see and interact with on a webpage (HTML, CSS, JavaScript).
🔹 Backend (Server-Side): Manages data processing, databases, and user authentication (PHP, Node.js, Python).
A well-functioning website requires both frontend and backend development.
6. HTML: The Structure of the Web
HTML (Hypertext Markup Language) is the foundation of every webpage. It defines the structure of content using tags.
Students wrote live HTML code, creating a simple webpage with headings, paragraphs, links and images. To make your HTML skills more better you can refer to this site- https://www.w3schools.com/html/default.asp
7. CSS: Styling the Web
CSS (Cascading Style Sheets) is used to style webpages making them visually appealing.
🔹 It controls colors, fonts, layouts and responsiveness.
🔹 A basic overview was presented, highlighting how CSS makes websites attractive.
8. JavaScript
JavaScript is the programming language of the web making websites interactive. The mentor conducted a live coding session covering:
🔹 Data Types (Numbers, Strings, Booleans, Arrays, Objects)
🔹 Variables (var, let, const)
🔹 Loops (for, while)
🔹 Conditional Statements (if-else)
🔹 Functions (Reusable blocks of code)
To make your HTML skills more better you can refer to this site- https://javascript.info/ & https://www.programiz.com/javascript/online-compiler/
9. Student Q&A Session
After the session, students asked questions and clarified their doubts on:
Frontend vs Backend development
Best practices for writing clean code
How to start a web development project
10. Class Summary & Next Steps 🚀
Today's masterclass provided a strong foundation in web fundamentals. Students now understand:
✔️ How the internet works
✔️ The difference between webpages & websites
✔️ The role of HTTP & HTTPS
✔️ The importance of frontend & backend development
✔️ Basic coding in HTML, CSS and JavaScript
The next step? Practice! Start coding simple web projects and explore more about web development.
Conclusion
Today’s session was just the beginning! Web development is a vast and exciting field and consistent practice is key. Keep experimenting, building and learning.
Keep exploring and learning. Happy coding.
References
Subscribe to my newsletter
Read articles from Sulabh Sharma directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by