Introduction to Frontend & HTML | Installation of VS Code

by

Day 1: Introduction to Frontend & HTML 

What is Frontend Development?

Frontend development is the process of creating the visual and interactive parts of a website that users see and interact with. It includes:

✅ HTML – Defines the structure 📄
✅ CSS – Adds styles and colors 🎨
✅ JavaScript – Makes it interactive ⚡

Whenever you click a button, scroll through a page, or see an animation, it’s the work of frontend development.

Example of a Frontend Website

Let’s say you visit Instagram. The parts you interact with—like the login page, feed, and buttons—are all built using frontend technologies.

  • HTML creates the layout (headings, images, buttons).
  • CSS makes it look beautiful (colors, fonts, spacing).
  • JavaScript adds functionality (like, comment, follow).

💡 Imagine a house:
🏠 HTML = Bricks & Structure
🎨 CSS = Paint & Design
⚡ JavaScript = Electricity & Features

What is frontend development

Before diving into HTML, we need a code editor to write and test our code. The best choice for beginners and professionals is Visual Studio Code (VS Code).

Step 1: Installing VS Code

🔹 Download & Install

  1. Go to the official VS Code website: https://code.visualstudio.com/
  2. Click Download for Windows/macOS/Linux (based on your OS).
  3. Open the downloaded file and follow the installation steps.
  4. Once installed, open VS Code.

Step 2: Installing Essential Extensions

VS Code is great, but adding a few extensions will make your coding experience even better!

🔹 Recommended Extensions for HTML Development:
✅ Live Server – Instantly refresh your page when you save changes.
✅ Prettier – Automatically formats your HTML code for readability.
✅ HTML Boilerplate – Quickly generate a basic HTML structure.

🔹 How to Install Extensions?

  1. Open VS Code.
  2. Click on the Extensions icon (Ctrl + Shift + X).
  3. Search for the extension name (e.g., Live Server).
  4. Click Install.

What is HTML ?

HTML ( HyperText Markup Language ) is the building block of the web. It is used to structure and format content on webpages. Every website you visit—whether it’s Google, YouTube, or Instagram—is built using HTML.

Why is HTML Important?

✅ Defines webpage structure 📄
✅ Easy to learn for beginners 🎯
✅ Works with CSS & JavaScript to create fully functional websites 🚀

Think of HTML as the skeleton of a webpage. It provides the foundation, while CSS styles it, and JavaScript makes it interactive.

Basic HTML Page Structure

Every HTML file follows a basic structure:

Structure of HTML

Breaking it Down

✅ <!DOCTYPE html> → Declares the document as HTML5
✅ <html> → The root element of the webpage
✅ <head> → Contains metadata like title and styles
✅ <title> → Sets the title of the webpage
✅ <body> → Contains the content visible on the page

Conclusion

HTML is the first step in web development. It structures webpages and lays the foundation for styling (CSS) and functionality (JavaScript).

🚀 Next Up: HTML Headings & Paragraphs (Day 2) – Learn how to structure text properly!

👉 Follow me on Instagram for daily web development tips! INSTAGRAM

View my Previous Post – Top 15 Patterns

Leave a Comment