Skip to content
High-Performance Full Stack-Development

Search is only available in production builds. Try building and previewing the site to test it out locally.

Building the Basic Structure of AtopShop

Let’s get started on building the basic structure for AtopShop, a fictional e-commerce website, here’s how to set up the project folder and create the necessary HTML and CSS files:

  1. Creating the project folder

    • Open your preferred file manager or terminal.

    • Create a new folder and name it appropriately, like AtopShop. This will be your project’s root directory.

  2. Create Essential Files Inside the AtopShop folder, create the following files:

    • index.html: This will be the main HTML document for your website.

    • styles.css: This will contain all the CSS styles for your website.

    • You can also create additional folders for organization as your project grows, such as:

    • images: To store images used in your website.

  3. Basic Structure of index.html: Open index.html in a text editor and add the following basic HTML structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>AtopShop</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body></body>
</html>

This code defines the basic structure of an HTML document:

  • DOCTYPE: Declares the document type as HTML.

  • <html>: The root element of the HTML document.

  • <head>: Contains meta information about the document, including the title and the link to the CSS file.

  • <title>: Specifies the title displayed in the browser tab.

  • <body>: Contains the visible content of the webpage.

  1. Empty styles.css: Create styles.css and leave it empty for now. We’ll add styles progressively as we build the website. This initial setup provides the foundation for building AtopShop’s web pages. The next lesson will guide you through creating the website’s header section using HTML.