Introduction: Starting Your Web Development Journey with Code90

Welcome to Day 1 of Code90, a 90-day web development bootcamp designed for absolute beginners—even if you’ve never written a single line of code or don’t have a computer science (CS) background! Today, we’re diving into the world of web development by learning the basics of HTML and CSS, the two fundamental tools for creating webpages. By the end of this session, you’ll have built a simplified version of the Visual Studio Code (VS Code) front page—a real website that millions of developers use daily.

Web development might sound intimidating, but it’s really about creating the websites we use every day, like Google, YouTube, or online stores. In this blog, I’ll walk you through everything we did in class, step by step, in a way that’s easy to understand for non-CS students. We’ll explore what HTML and CSS are, how they work together, and how we used them to build a professional-looking webpage. Whether you’re here to start a new career, build a side project, or just learn something new, this guide will show you that coding is within your reach. Let’s get started!

Why Start with HTML and CSS? The Building Blocks of the Web

Before we jump into the project, let’s understand why we’re starting with HTML and CSS. Think of a webpage as a house:

• HTML (HyperText Markup Language) is the structure—like the walls, roof, and foundation. It tells the browser what to put on the page, like headings, buttons, or images.
• CSS (Cascading Style Sheets) is the interior design—like the paint, furniture, and decorations. It makes the page look nice by adding colors, fonts, and layouts.

We chose to recreate the Visual Studio Code front page because it’s a real-world example with a clean, professional design. It has a navigation bar at the top, a big heading with buttons in the middle, a section for a video, and a small "Replay" text at the bottom—all perfect for practicing the basics. Plus, VS Code is a tool developers use to write code, so building its webpage feels like a full-circle moment! Our goal is to create a simplified version of this page, learning HTML and CSS as we go. Don’t worry if you’re new to this—I’ll explain everything in detail, assuming you’ve never coded before.

My Perspective: Teaching Beginners as a Developer and Educator

As the author of this blog, I’m Nitin Ahirwal, a software developer and educator passionate about helping beginners learn to code. I started as a self-taught developer, piecing together knowledge from free resources like YouTube and blogs. It took me years to master web development because I didn’t have a clear path—I often got stuck on outdated tutorials or missed key concepts. Later, I created online courses to help others learn faster, and now I’m leading Code90 to guide beginners like you through a structured journey.

I’ve seen firsthand how challenging coding can be for non-CS students, but I’ve also seen how rewarding it is when you build something real, like the VS Code front page. My goal is to make this process as approachable as possible, breaking down every step so you feel confident and excited to keep learning.

Step-by-Step: Building the Visual Studio Code Front Page

Let’s walk through how we built the VS Code front page, step by step. We’ll start with setting up our tools, then build the page section by section, explaining every line of HTML and CSS in a way that’s easy for beginners to understand.

Step 1: Setting Up Your Tools – Getting Ready to Code

Before we write any code, we need the right tools. Here’s what we used in class:

• Text Editor: We used Visual Studio Code (VS Code), a free tool that makes writing code easy. You can download it from code.visualstudio.com. Think of VS Code as a fancy notebook for writing code—it highlights your code in colors to make it easier to read.
• Web Browser: We used Google Chrome to view our webpage, but any browser (like Firefox or Safari) works. The browser is like a stage—it shows the final result of your code.

What We Did:

• Downloaded and installed VS Code.
• Created a new file by clicking File > New File in VS Code.
• Saved the file as index.html. The .html part tells the computer this is a webpage.
• Created a folder called assets in the same directory as index.html to store images or videos (though we’ll use placeholders for now).
• Opened the file in Chrome by dragging index.html into the browser or using the Live Server extension in VS Code (which auto-refreshes the page when you save changes).

At this point, the browser showed a blank page because our file was empty. Let’s add some code!

Step 2: Writing the Basic HTML Structure – The Skeleton of Our Page

HTML is like giving instructions to the browser about what to show on the page. Every webpage starts with a standard structure, like the outline of a story. Here’s what we wrote:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Visual Studio Code - Code Editor</title>
  <style>
    /* We’ll add CSS here later */
  </style>
</head>
<body>
  <!-- This is where our webpage content will go -->
</body>
</html>

Let’s Break This Down for Beginners

• <!DOCTYPE html>: This tells the browser, “This is a modern webpage!” It’s like a label on a book that says, “This is a novel.”
• <html lang="en">: This is the start of our webpage. The lang="en" part means the language is English, which helps with things like screen readers for people with disabilities.
• <head>: This section is like the “settings” of the page—it contains information that doesn’t show up on the screen but helps the browser understand the page:
  • <meta charset="UTF-8" />: This ensures the browser can display all characters (like letters, numbers, and emojis) correctly.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />: This makes the page look good on phones and tablets by adjusting the width.
  • <title>Visual Studio Code - Code Editor</title>: This sets the title of the page, which you see in the browser tab (like the name of a book on its cover).
  • <style>: This is where we’ll put our CSS (the design part) later. For now, it’s empty.
• <body>: This is where all the visible content goes—like the text, images, and buttons you see on the webpage.
• <!-- Comment -->: Anything between <!-- and --> is a comment. It’s a note for us to read, but the browser ignores it—it doesn’t show up on the page.

What We Saw:

When we saved the file and opened it in the browser, the page was blank because we hadn’t added any content to the <body> yet. But the browser tab showed “Visual Studio Code - Code Editor,” which means our <title> worked!

Step 3: Adding a Container – Keeping Our Content Centered

The content of the VS Code page doesn’t stretch all the way across the screen—it’s centered and has a fixed width, like a book page in the middle of a table. To do this, we created a “container” using a <div> tag. A <div> is like a box that holds other things, such as text or images.

<body>
  <div class="container">
    <!-- All our content will go inside this box -->
  </div>
</body>

Now, let’s add some CSS to style this container. CSS goes inside the <style> tag in the <head> section. Here’s what we wrote:

body {
  margin: 0;
  background-color: #0e1013;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: white;
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

Let’s Break This Down

• What is CSS?: CSS is like a set of instructions for how things should look. It’s written as selector { property: value; }. For example, body { margin: 0; } means “select the <body> element and set its margin to 0.”
• For the body:
  • margin: 0: This removes any extra space around the edges of the page. It’s like telling the browser, “Don’t add any padding around my content.”
  • background-color: #0e1013: This sets the background to a very dark color (almost black), matching the VS Code page’s dark theme. The #0e1013 is a color code (called a hex code) that represents a specific shade.
  • font-family: This sets the font for all the text on the page. We used a list of fonts (like -apple-system, BlinkMacSystemFont, ...) to make sure the page looks good on different devices. It’s like saying, “Use this font, but if it’s not available, try the next one.”
  • color: white: This makes all the text white.
  • text-align: center: This centers all the text on the page.
• For the .container:
  • The . in .container means we’re styling the <div> with class="container". A class is like a label we give to an element so we can style it.
  • max-width: 1200px: This limits the width of the container to 1200 pixels (a pixel is a tiny dot on your screen). It means the content won’t stretch wider than that, even on a big screen.
  • margin: 0 auto: This centers the container on the page. The auto part tells the browser to add equal space on the left and right.
  • padding: 0 20px: This adds a little space (20 pixels) on the left and right inside the container, so the content doesn’t touch the edges on smaller screens (like phones).

What We Saw:

The page was still blank because we hadn’t added any visible content, but the background was now dark, setting the stage for our design.

Step 4: Building the Navigation Bar – The Top Menu

The top of the VS Code page has a navigation bar (or “navbar”) with a logo, some links on the left, and a search bar with a button on the right. Let’s create that.

<div class="container">
  <div class="navbar">
    <div class="nav-left">
      <img src="https://code.visualstudio.com/assets/favicon.ico" alt="VS Code Logo" />
      <span style="font-size: 20px;">Visual Studio Code</span>
      <span class="toplink">Docs</span>
      <span class="toplink">Updates</span>
      <span class="toplink">Blog</span>
      <span class="toplink">API</span>
      <span class="toplink">Extensions</span>
      <span class="toplink">FAQ</span>
      <span class="toplink">GitHub Copilot</span>
    </div>
    <div class="nav-right">
      <input type="text" placeholder="Search Docs" />
      <button>Download</button>
    </div>
  </div>
</div>

Let’s Break This Down

• <div class="navbar">: This is a box that holds the entire navigation bar.
• <div class="nav-left">: A box for the left side, containing the logo and links.
• <img src="https://code.visualstudio.com/assets/favicon.ico" alt="VS Code Logo" />: This adds the VS Code logo. The src is the URL of the image, and alt is a description for accessibility (like for screen readers used by visually impaired people).
• <span>: We used <span> tags for the text (like “Visual Studio Code” and “Docs”). A <span> is like a small container for text that doesn’t add extra spacing.
• <div class="nav-right">: A box for the right side, containing the search bar and button.
• <input type="text" placeholder="Search Docs" />: This creates a text box where users can type. The placeholder text shows up inside the box until the user starts typing.
• <button>Download</button>: This creates a clickable button with the text “Download.”

Now, let’s style it with CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 500;
}

.nav-left img {
  width: 24px;
}

.nav-right input {
  padding: 6px 10px;
  border-radius: 4px;
  border: none;
}

.nav-right button {
  background-color: #007acc;
  border: none;
  padding: 8px 16px;
  color: white;
  font-weight: bold;
  margin-left: 10px;
  border-radius: 4px;
}

Let’s Break This Down

• For .navbar:
  • display: flex: This turns the navbar into a “flexible box,” which makes it easy to arrange items inside it. It’s like telling the browser, “Line up all the items in a row.”
  • justify-content: space-between: This pushes the .nav-left and .nav-right to opposite ends of the navbar.
  • align-items: center: This makes sure everything (logo, text, search bar, button) is vertically centered in the row.
  • padding: 20px 0: This adds 20 pixels of space above and below the navbar (but not on the sides, since the container handles that).
• For .nav-left:
  • display: flex: Makes the items inside (logo and links) line up in a row.
  • align-items: center: Keeps them vertically centered.
  • gap: 15px: Adds 15 pixels of space between each item (like between the logo and “Visual Studio Code”).
  • font-weight: 500: Makes the text a little bolder for a professional look.
• For .nav-left img:
  • width: 24px: Makes the logo 24 pixels wide so it’s not too big.
• For .nav-right input:
  • padding: 6px 10px: Adds space inside the text box (6 pixels top/bottom, 10 pixels left/right) so the text doesn’t touch the edges.
  • border-radius: 4px: Rounds the corners of the text box.
  • border: none: Removes the default border around the text box.
• For .nav-right button:
  • background-color: #007acc: Sets a blue background, matching VS Code’s branding.
  • border: none: Removes the default border.
  • padding: 8px 16px: Adds space inside the button.
  • color: white: Makes the text white.
  • font-weight: bold: Makes the text bold.
  • margin-left: 10px: Adds space between the search bar and the button.
  • border-radius: 4px: Rounds the corners.

What We Saw:

Now the page showed a navigation bar at the top with the logo, links, search bar, and button, all styled to look like the VS Code page. It was starting to look professional!

Step 5: Creating the Hero Section – The Main Heading and Buttons

Below the navbar, the VS Code page has a big heading (“Your code editor. Redefined with AI.”) and some buttons. This is called the “hero” section because it’s the main part of the page that grabs attention.

<div class="hero">
  <h1>Your code editor.</h1>
  <h1>Redefined with AI.</h1>
  <div class="hero-buttons">
    <button>Download for macOS</button>
    <button>Try agent mode</button>
    <br />
    <a href="#">Web,</a>
    <a href="#">Insiders edition,</a>
    <a href="#">other platforms</a>
  </div>
</div>

Let’s Break This Down

• <div class="hero">: A box to hold the hero section.
• <h1>: This is a heading tag, used for the most important text on the page. We used two <h1> tags to break the heading into two lines.
• <div class="hero-buttons">: A box for the buttons and links.
• <button>: Two buttons for the main actions (“Download for macOS” and “Try agent mode”).
• <br />: This adds a line break, so the links appear below the buttons.
• <a href="#">: These are links (like clickable text). The href="#" is a placeholder for now; in a real site, it would point to another page.

Now, let’s style it:

.hero h1 {
  font-size: 3rem;
  margin: 0;
  font-weight: bold;
  line-height: 1.2;
}

.hero {
  padding: 50px 0 20px;
}

.hero-buttons button {
  background-color: #007acc;
  color: white;
  padding: 12px 20px;
  border: none;
  margin: 15px 10px;
  font-size: 1rem;
  border-radius: 4px;
  font-weight: 600;
}

.hero-buttons a {
  color: #3ea6ff;
  margin: 0 5px;
  text-decoration: none;
  font-size: 0.9rem;
}

Let’s Break This Down

• For .hero:
  • padding: 50px 0 20px: Adds space above (50 pixels) and below (20 pixels) the hero section to give it breathing room.
• For .hero h1:
  • font-size: 3rem: Makes the heading big (3 “rem” is about 48 pixels). A “rem” is a unit based on the default font size of the browser.
  • margin: 0: Removes extra space around the heading.
  • font-weight: bold: Makes the text bold.
  • line-height: 1.2: Adjusts the spacing between the two lines of the heading so they’re not too far apart.
• For .hero-buttons button:
  • Similar to the navbar button, but with bigger padding (12px 20px) to make the buttons larger.
  • margin: 15px 10px: Adds space around each button (15 pixels top/bottom, 10 pixels left/right).
• For .hero-buttons a:
  • color: #3ea6ff: Makes the links a lighter blue.
  • margin: 0 5px: Adds 5 pixels of space between the links.
  • text-decoration: none: Removes the default underline from links.
  • font-size: 0.9rem: Makes the links a bit smaller than the buttons.

What We Saw:

The page now had a big, bold heading and two blue buttons with smaller blue links below them, all centered on the page. It looked professional, just like the VS Code page!

Step 6: Adding the Media Container – Displaying a Video

The next section of the VS Code page shows a video area. We used a <video> tag to add a video, but since we don’t have the actual video file, we used a placeholder.

<div class="media-container">
  <video autoplay muted loop>
    <source src="/assets/Hero Dark Large.webm" type="video/webm" />
    Your browser does not support the video tag.
  </video>
</div>

Let’s Break This Down

• <div class="media-container">: A box to hold the video.
• <video>: This tag adds a video to the page. We added three attributes:
  • autoplay: Makes the video play automatically when the page loads.
  • muted: Mutes the sound (required for autoplay to work in most browsers).
  • loop: Makes the video repeat endlessly.
• <source>: This tells the browser where to find the video file. The type="video/webm" specifies the file format.
• Your browser does not support the video tag.: This text shows up if the browser can’t play the video.

Now, let’s style it:

.media-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  background-image: url('/assets/hero-background.webp');
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 12px;
  min-height: 400px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(26, 60, 109, 0.8);
}

.media-container video {
  width: 100%;
  max-width: 1000px;
  border-radius: 12px;
  border: 2px solid #333;
  background-color: #1e1e1e;
}

Let’s Break This Down

• For .media-container:
  • display: flex: Makes it a flex container so we can center the video.
  • justify-content: center and align-items: center: Centers the video both horizontally and vertically.
  • margin-top: 20px: Adds space between the hero section and the video.
  • background-image: url('/assets/hero-background.webp'): Sets a background image for the container (though this is a placeholder).
  • background-size: cover: Makes the background image stretch to fill the container.
  • background-position: center: Centers the background image.
  • padding: 20px: Adds space inside the container.
  • border-radius: 12px: Rounds the corners.
  • min-height: 400px: Ensures the container is tall enough to look good.
  • box-shadow: inset 0 0 20px rgba(26, 60, 109, 0.8): Adds a blue glow inside the container to create a gradient border effect.
• For .media-container video:
  • width: 100%: Makes the video take up the full width of the container.
  • max-width: 1000px: Limits the video’s width to ensure it doesn’t get too large.
  • border-radius: 12px: Rounds the corners of the video.
  • border: 2px solid #333: Adds a thin gray border.
  • background-color: #1e1e1e: Sets a dark background for the video area.

What We Saw:

The video didn’t play because we don’t have the actual video file, but the space for it appeared with a dark background, rounded corners, and a blue glow around the edges.

Step 7: Adding the “Replay” Text – A Final Touch

Below the video, the VS Code page has a small “Replay” text. We added this with an <h4> tag.

<h4>Replay</h4>

CSS

h4 {
  margin-top: 30px;
  font-weight: normal;
}

Let’s Break This Down

• <h4>: A smaller heading tag (less important than <h1>).
• margin-top: 30px: Adds space above the text.
• font-weight: normal: Makes the text less bold.

What We Saw:

The word “Replay” appeared below the video area, centered and styled to look subtle.

The Final Code: Bringing It All Together

Here’s the complete code we created in class:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Visual Studio Code - Code Editor</title>
  <style>
    body {
      margin: 0;
      background-color: #0e1013;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      color: white;
      text-align: center;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 15px;
      font-weight: 500;
    }

    .nav-left img {
      width: 24px;
    }

    .nav-right input {
      padding: 6px 10px;
      border-radius: 4px;
      border: none;
    }

    .nav-right button {
      background-color: #007acc;
      border: none;
      padding: 8px 16px;
      color: white;
      font-weight: bold;
      margin-left: 10px;
      border-radius: 4px;
    }

    .hero h1 {
      font-size: 3rem;
      margin: 0;
      font-weight: bold;
      line-height: 1.2;
    }

    .hero {
      padding: 50px 0 20px;
    }

    .hero-buttons button {
      background-color: #007acc;
      color: white;
      padding: 12px 20px;
      border: none;
      margin: 15px 10px;
      font-size: 1rem;
      border-radius: 4px;
      font-weight: 600;
    }

    .hero-buttons a {
      color: #3ea6ff;
      margin: 0 5px;
      text-decoration: none;
      font-size: 0.9rem;
    }

    .media-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      background-image: url('/assets/hero-background.webp');
      background-size: cover;
      background-position: center;
      padding: 20px;
      border-radius: 12px;
      min-height: 400px;
      position: relative;
      box-shadow: inset 0 0 20px rgba(26, 60, 109, 0.8);
    }

    .media-container video {
      width: 100%;
      max-width: 1000px;
      border-radius: 12px;
      border: 2px solid #333;
      background-color: #1e1e1e;
    }

    h4 {
      margin-top: 30px;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="navbar">
      <div class="nav-left">
        <img src="https://code.visualstudio.com/assets/favicon.ico" alt="VS Code Logo" />
        <span style="font-size: 20px;">Visual Studio Code</span>
        <span class="toplink">Docs</span>
        <span class="toplink">Updates</span>
        <span class="toplink">Blog</span>
        <span class="toplink">API</span>
        <span class="toplink">Extensions</span>
        <span class="toplink">FAQ</span>
        <span class="toplink">GitHub Copilot</span>
      </div>
      <div class="nav-right">
        <input type="text" placeholder="Search Docs" />
        <button>Download</button>
      </div>
    </div>
    <div class="hero">
      <h1>Your code editor.</h1>
      <h1>Redefined with AI.</h1>
      <div class="hero-buttons">
        <button>Download for macOS</button>
        <button>Try agent mode</button>
        <br />
        <a href="#">Web,</a>
        <a href="#">Insiders edition,</a>
        <a href="#">other platforms</a>
      </div>
    </div>
    <div class="media-container">
      <video autoplay muted loop>
        <source src="/assets/Hero Dark Large.webm" type="video/webm" />
        Your browser does not support the video tag.
      </video>
    </div>
    <h4>Replay</h4>
  </div>
</body>
</html>

What We Saw:

The page now looked a lot like the VS Code front page! It had a dark background, a centered layout, a navigation bar, a big heading with buttons, a video placeholder, and the “Replay” text—all styled to match the design.

Challenges and Solutions: Learning Through Mistakes

Even as beginners, we faced a few challenges, but solving them helped us learn:

• Challenge: The page looked too wide at first.
  • Solution: We added the .container with max-width: 1200px to limit the width and center the content.
• Challenge: The video and background image didn’t show up because we didn’t have the files.
  • Solution: We kept them as placeholders and learned that in a real project, we’d need to add the actual files to our assets folder.
• Challenge: CSS properties like flex and box-shadow were confusing at first.
  • Solution: We experimented with different values in the browser, refreshing the page to see the changes, which helped us understand how they work.

The Bigger Picture: Why This Matters for Beginners

Building the VS Code front page wasn’t just about creating a webpage—it was about showing you that coding is something you can do, even without a CS background. Here’s why this project is a big deal:

• Real-World Skills: HTML and CSS are used in every website you visit. Learning them opens the door to creating your own sites, which could lead to a career, a side hustle, or a fun hobby.
• Confidence Boost: Going from a blank page to a professional-looking webpage in one day proves you can learn to code. This confidence will carry you through the rest of Code90.
• Foundation for Growth: Today’s project is the first step. Over the next 89 days, you’ll build on these skills to create more complex projects and learn new technologies.

What’s Next: Day 2 and Beyond

Tomorrow, on Day 2 of Code90, we’ll build on what we learned today:

• We’ll explore more CSS, like how to make our page look good on phones and tablets (called “responsive design”).
• We’ll introduce JavaScript, a language that adds interactivity (like making buttons do something when clicked).
• We’ll improve our VS Code page by fixing any issues and adding new features.

Practical Tips for Beginners: How to Keep Learning

Here are some tips to make the most of your learning journey:

• Practice Daily: Even 15 minutes a day of coding will help you improve. Try changing the colors or text in your VS Code page to see what happens.
• Explore Other Websites: Right-click on a website you like (like Google) and select Inspect to see its HTML and CSS. It might look complicated, but notice how it uses <div> tags and CSS like we did.
• Ask Questions: If you’re stuck, ask for help! Share your code with a friend, post in a beginner coding forum, or bring your questions to our next class.
• Be Patient: Coding takes time to learn, just like playing a new sport or instrument. Mistakes are part of the process—they help you grow.

Final Thoughts

Day 1 of Code90 was a huge success! In just one session, you went from knowing nothing about coding to building a webpage that looks like the Visual Studio Code front page—a real website used by millions of developers. This project showed you that web development is within your reach, even without a CS background. Every line of code you wrote today is a step toward becoming a web developer, whether you want to build websites for fun, start a career, or create your own app.

If you felt overwhelmed at any point, that’s okay—it’s part of learning something new. What matters is that you kept going, and now you have a webpage to be proud of. I can’t wait to see how much you’ll grow over the next 89 days of Code90. Keep practicing, stay curious, and I’ll see you tomorrow for Day 2!

Happy coding! 📚💻