vs code setup

How to setup VSCode to begin your journey to learning HTML & CSS

Download and Install VSCode

  1. download VSCcode Go to VSCode download location and download what is relevant to you


  1. Install the app onto your system

Change some default settings

  1. A screenshot of a computer

Description automatically generated with medium confidence Click on the cog wheel down on the far-left side and then click settings
  2. Change the editor Font Size to 22 and the tab size to 2
  3. Use the Search settings bar to search for Word Wrap and
  4. Turn WordWrap on

Graphical user interface, application

[um_show_content roles='member'] Description automatically generated

Install Live Server

  1. Click on the extension icon in the left sidebar
  2. Search for Live Server by Ritwick Dey
    Graphical user interface, text, application, chat or text message

Description automatically generated

Setup your project folder and create a boilerplate HTML template

  1. In VSCode Click File, Open Folder
  2. Create a folder on your Desktop or somewhere you will remember 
  3. Select the Folder
  4. This new folder will be open in VSCode Explorer
  5. Click the +New File icon beside its name and create a new file called index.html
    Note: make sure all of this is in lowercase
    new file VSCode
  6. You have created your first blank web page. Let’s quickly add some code.
  7. Type ! and hit the Enter key on your keyboard
    Graphical user interface, application Description automatically generated
  8. Voila, you’ve VSCode has quickly gave you a boilerplate HTML template to start working with

Typing the exclamation mark !, starts what is called Emmet.

It will produce a boilerplate HTML template for you to get started coding HTML. 
Anything you want to see inside the browser has to be coded inside the <body> </body> element.


Share and Enjoy !


Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.