

Tip 2: You can indent multiple lines at once if you select them and click Tab or Shift+Tab. Tip 1: Use Shift+Tab keys to move indentation to the left. Now, whenever you save any changes they are automatically updated by the live server.

A browser window should open up and show your first website. Right-click on your index.html (the file below the Portfolio folder and not the one above under “Open Editors”). To view the page, we’ll use the Live Server extension that we installed above. Now you can fill the document with content. For us, our first index.html will become our home page. If a website address is called, for example, the index.html file is automatically displayed first, which in this case is. You could probably assume, the name index.html does have special meaning. Now you have a blank text file named index.html. Right-click below the folder and select New File. Browse for the folder you created and open it. Open the File menu and select Open Folder …. Name the folder Portfolio (or anything you want). Creating an HTML DocumentĮquipped with editor and browser, let’s create the first HTML document for our website.Ĭreate a folder on your computer for your project. If you do not have Chrome on your computer, you can install it here. Chrome includes very useful tools for developers which you will use often. However, for web development I recommend you use Chrome. Our website should, of course, run in all major browsers (Edge, Firefox, Chrome and Safari). Reload Visual Studio Code to activate the extension. Type “Live Server” into the search field and install the extension. While we’re at it we’ll an extension to VS Code that will give superpowers to our editor: Live Server. If you do not know which one, use Visual Studio Code for now.

You may use an editor of your choice but I will occasionally refer to some functions of Visual Studio Code (VS Code). My current favorite among the many editors is Visual Studio Code (free). Therefore, I recommend that you use a modern code editor. But there are editors that greatly simplify your work as a programmer.

Editorįor creating web pages, a normal text editor would be sufficient. Our Toolsįor web development, you need two programs: an editor to create the files for the website and a browser (for example Edge, Firefox, Safari, or Chrome) to view and test your website. Let’s dive right in and create our first web page.
