CSS Fundamentals

Setting Up CSS

⏱ 5 min read📖 Beginner

Before we write a single line of CSS I want to make sure you have everything set up properly on your device.

I know setup lessons can feel a little boring. You just want to get to the good stuff. I get that. But trust me — five minutes here will save you so much frustration later. So let us get through this together and then we will start building something real.

What You Will Need

You only need two things to write CSS.

A code editor — a place to write your code
A browser — to see what your code actually looks like

That is it. No special software. No paid tools. Nothing complicated.

Step 1 — Install VS Code

The code editor I recommend is VS Code. It stands for Visual Studio Code and it is completely free.

Here is why I like it for beginners.

It colors your code so it is easier to read
It finishes your code for you as you type
It catches small mistakes before they become big problems
And it has a feature called Live Server that refreshes your browser automatically every time you save — so you do not have to keep switching back and forth

To install it go to code.visualstudio.com and click the big Download button. It will automatically pick the right version for your computer — Windows, Mac, or Linux. Once it downloads just open the file and keep clicking Next until it installs.

When it is done open VS Code. You will see a clean empty workspace waiting for you.

[IMAGE PLACEHOLDER — VS Code homepage with download button highlighted]

Step 2 — Create Your Project Folder

Now let us create a home for everything we are going to build.

Go to your desktop. Right click and choose New then Folder. Name it netflix-clone.

This folder is where everything lives — your HTML file, your CSS file, and any images we add later. Keeping it all in one place matters more than it sounds. You will thank yourself later.

[IMAGE PLACEHOLDER — desktop with new folder being created named netflix-clone]

Step 3 — Open the Folder in VS Code

Now open VS Code and bring your project folder into it.

You can do this two ways.

The first way — find your netflix-clone folder, right click on it and choose Open with VS Code.

The second way — open VS Code first, click File at the top, then Open Folder, find your netflix-clone folder and click Open.

Either way works. Once you do it you will see your folder name appear on the left sidebar of VS Code. That is your project space. That is where everything happens.

[IMAGE PLACEHOLDER — VS Code with netflix-clone folder open in the left sidebar]

Step 4 — Create Your HTML File

Click the New File icon in the sidebar. It looks like a piece of paper with a small plus sign on it. Name it index.html and press Enter.

Now paste this inside it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netflix Clone</title>
</head>
<body>

  <h1>Netflix</h1>

</body>
</html>

Save it by pressing Ctrl + S on Windows or Cmd + S on Mac.

This is the starting point of your Netflix clone. Right now it is just a heading that says Netflix on a white background. That is fine. Everything starts somewhere.

[IMAGE PLACEHOLDER — VS Code with index.html open showing the code above]

Step 5 — Install Live Server

This step is going to make your life so much easier.

Right now every time you change something in your code you would have to save it, go to your browser, find the file, and refresh the page manually. That gets old very fast.

Live Server fixes that. Every time you save your file the browser updates automatically. No refreshing, no switching back and forth.

Here is how to install it.

Look at the left sidebar in VS Code. You will see an icon that looks like four small squares. Click it. That is the Extensions panel.

In the search bar type Live Server. You will see one by Ritwick Dey. Click Install.

Once it installs look at the very bottom right corner of VS Code. You will see a button that says Go Live. Click it.

Your browser will open automatically and show your index.html page. From now on every time you save your file the page updates on its own.

[IMAGE PLACEHOLDER — VS Code bottom bar with Go Live button highlighted]

Step 6 — Create Your CSS File

Now let us create the file where all our CSS will live.

In VS Code click that same New File icon again. This time name it style.css and press Enter.

Leave it empty for now. We will fill it in the next lesson.

The last thing we need to do is connect the CSS file to the HTML file so they talk to each other. Open your index.html file and add this line inside the head section right below the title.

<link rel="stylesheet" href="style.css">

Your full HTML should now look like this.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netflix Clone</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Netflix</h1>

</body>
</html>

Save the file. Your setup is now complete.

[IMAGE PLACEHOLDER — VS Code showing both index.html and style.css files in the sidebar]

Try It Yourself

Open your style.css file and type this inside it. Save it and look at your browser — the Netflix heading should turn red.

💡

Click Try It Yourself to open the editor and see it live.

That is your first line of CSS working on a real page. It does not look like much yet but you just made something happen. That is the foundation everything else is built on.

Quick Check

Before moving on make sure you have all of this in place.

A folder called netflix-clone on your desktop
An index.html file inside it with the code above
A style.css file inside it linked to your HTML
Live Server installed and running
The word Netflix showing up red in your browser

If all of that is working you are ready. If something is not showing up right just go back through the steps slowly. It is almost always a small typo or a missing file.

Practice

Change the color of the Netflix heading to blue. Then try a few more — green, orange, purple. Just replace the color value with any color name and see what happens.

💡

Click Try It Yourself to experiment. Change the color value to anything you like and watch the heading update instantly.

The goal right now is not to make it look good. The goal is to feel that feedback loop — write, save, see the change. That is how everything in this course is going to work.

In the next lesson I am going to show you the different ways you can add CSS to a page and which one we will use for the rest of this course. Come on in.

Learn how to add CSS →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.