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.

Prerequisites

The good news is that HTML5 and CSS3 are interesting and easy to learn, but before we dive in, we need to set up a code environment where we will build the AtopShop website. For the development of this website, we need an IDE which stands for Integrated Development Environment. An IDE is an environment or place where software engineers write and edit code/computer programs. You can think of an IDE as a notebook (environment) where we jot down notes or our thought process (code). For this high-performance guide, we will consider Visual Studio Code (VS Code) for our IDE.

Visual Studio Code (VS Code) is a popular code editor for web development. Below are the steps to set up VS Code on both Windows and Mac.

Installing VS Code

Download VS Code:

  1. Go to the Visual Studio Code website.
  2. Click on the download button for your operating system (Windows or Mac).

Install VS Code:

  • Windows: Run the downloaded installer and follow the on-screen instructions.
  • Mac: Open the downloaded .dmg file and drag the Visual Studio Code application to your Applications folder.

Setting Up VS Code for HTML and CSS Development

Open VS Code:

  • Launch Visual Studio Code from the Start Menu (Windows) or the Applications folder (Mac).

Install Extensions:

  1. Click on the Extensions icon in the Activity Bar on the side of the window or press Ctrl+Shift+X (Windows) or Cmd+Shift+X (Mac).
  2. Search for and install the following extensions:
    • HTML IntelliSense: Provides auto-completion for HTML tags.
    • CSS IntelliSense: Provides auto-completion for CSS properties.
    • Live Server: Launches a local development server with live reload feature.
    • Prettier - Code Formatter: Automatically formats your code to look neat.