Learning web development: Getting started

This blog post is part of the series “Learning web development” – which teaches people who have never programmed how to create web apps with JavaScript.

To download the projects, go to the GitHub repository learning-web-dev-code and follow the instructions there.

I’m interested in feedback! If there is something you don’t understand, please write a comment at the end of this page.

In this chapter, we perform a few steps to prepare us for web development.

Downloading the repository with the projects  #

Go to the GitHub repository learning-web-dev-code and follow the instructions there.

Important tool for web development: a text editor  #

All the code we write in web development is stored in text files: HTML, CSS, JavaScript, etc. Therefore, we need a text editor. Some text editors are even specialized tools for developers and called IDEs (Integrated Development Environments). These are two popular IDEs for web development:

• Free: Visual Studio Code
• Free for individual non-commercial use: WebStorm

Please install an IDE now. You’ll need it for the next two exercises and for the rest of the book.

A typical web development project is a folder with files. Therefore, an IDE opens a folder and shows its files in a sidebar. By clicking on the files, we open and edit them. Additionally, we can achieve many tasks via the context menus for the files in the sidebar.

Exercise: Create and open a project  #

• Create a new folder on your drive. You can name it “my-project”.
• Open it with your IDE.
• Create a new file and edit it – e.g., notes.txt
• After you are done, delete the project.

If you don’t know how to achieve the previous tasks, please search online for help.

Exercise: Explore the folder learning-web-dev-code/  #

• Open the folder learning-web-dev-code/ in the IDE and explore it.