Creating an HTML/CSS Project: Guide

You can use online tools like CodeSandbox for creating projects. However, a more professional approach is to store all project files locally on your disk.

1. Building HTML

HTML, or HyperText Markup Language, is a markup language used to define the structure of a web page. It enables organizing and formatting text, images, and other elements on a page.

Example HTML document structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Page</title>
</head>
<body>
  <header>
    <h1>Page Heading</h1>
  </header>
  <main>
    <p>Page content...</p>
  </main>
  <footer>
    <p>Page footer</p>
  </footer>
</body>
</html>

2. CSS Styling

CSS (Cascading Style Sheets) is a language that allows styling web page elements. With it, we can control the appearance of texts, colors, backgrounds, layouts, and other aspects of the page.

Example CSS styles:

body {
    background-color: lightblue;
}

h1 {
  color: navy;
}

p {
  font-size: 16px;
}

main {
  padding: 20px;
}

3. Integrating HTML and CSS

There are different methods of connecting HTML and CSS code:

a) Internal CSS Styles

CSS styles can be placed directly in the HTML document, inside the <head> section, using the <style> tag. This works well for a single page or a quick experiment, but you can't reuse these styles on the other pages of your project.

<head>
  <style>
    h1 {
      color: navy;
    }
  </style>
</head>

b) External CSS Files

The recommended method, which involves storing CSS styles in a separate file (e.g., style.css). This file is then included in the HTML document using the <link> tag.

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

c) Style Attribute

The style attribute can also be used directly in HTML tags, allowing styles to be applied directly to selected elements. However, it's better to avoid this method as it makes style management and code maintenance difficult.

<h1 style="color: navy;">Page Heading</h1>

Step by Step in Visual Studio Code

Now let's move this to your computer. All you need is a free code editor and a browser - here are all the steps.

1. Installing Visual Studio Code

Download and install Visual Studio Code from the official website code.visualstudio.com.

2. Creating a New Project

• Open VSCode.
• Choose File > New Window (or use the shortcut Ctrl+Shift+N) to open a new VSCode window.
• Choose File > Open Folder and select the folder where you want to store your project.

3. Creating an HTML File

• In the left toolbar, right-click on the project folder and choose New File.
• Name the file with a .html extension, e.g., index.html.

4. Creating a CSS File

• Right-click on the project folder and choose New File.
• Name the file with a .css extension, e.g., style.css.

5. Linking HTML and CSS Files

• Open the index.html file.
• In the <head> section, add a link to the CSS file as shown below:

<head>
  <title>Your page</title>
  <link rel="stylesheet" href="style.css">
</head>

6. Previewing the Page

• To see what your page looks like, open the index.html file in a web browser.
• You can also install an extension like "Live Server" in VSCode, which will automatically refresh your page after each change.

7. Saving and Testing

• Save all changes (File > Save All or Ctrl+K S).
• Test your page by making various modifications and observing the results.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML/CSS Project</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>My First Page</h1>
        <nav>
            <a href="#about">About me</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About me</h2>
            <p>Welcome! I am learning to create websites.</p>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <p>My future projects will be here.</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <p>Email: example@example.com</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 My Page</p>
    </footer>
</body>
</html>

Remember: HTML is the skeleton of the temple, and CSS in a separate file is the paint - keep them apart, and a single <link> tag will join them.