Css Your first website

 

Your first CSS website

In this tutorial, we will focus on creating our first CSS website.

We will divide the tutorial into the following parts:

  1. Setting up the environment.
  2. Creating an HTML page.
  3. Adding CSS to HTML.

Setting up the Environment

Installing VS Code

  • Go to Google using your preferred browser.
  • Type Visual Studio Code download in the search bar.
  • Click on download and follow the installation instructions for your OS.


Here's a quick video showing the VS Code installation process:

Installing the Live Server Extension

We will also install the Live Server extension in Visual Studio Code to enable live reloading of pages.

The Live Server extension launches a local development server and reloads the page live as you make changes.

Here's a quick video showing how to install the Live Server extension:

Creating an HTML Page

If you're not comfortable with HTML, you can start by following this HTML Tutorial.

Assuming you have some knowledge of HTML, open VS Code and create a new file named `index.html`.


css


After creating the HTML file, type "!" and press enter. This will generate the default HTML boilerplate.

The generated code should look something like this after changing the title and adding some content to the body:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First CSS Website</title>
</head>
<body>
    I'm learning CSS with my favorite Maxoncodes.
</body>
</html>

Adding CSS to HTML

Now that we've set up the environment and created an HTML page, let's add some CSS to style it. Inside the head tag, add the following code:


<style>
  body {
    text-align: center;
    color: white;
    background-color: purple;
  }
</style>


You've successfully begun your journey into the world of CSS! As you follow these tutorials, you'll gain a better understanding of various CSS properties.