If you have the right tools before you start, you can learn faster and more efficiently. Fortunately, all you need are three things: a browser, a text editor, and a version control system.
You will test your code here. A good web developer should be comfortable using a variety of browser types. As you are getting started, it is okay to stick to one browser type until you are more comfortable.
You will see several others as you research and learn, but these are the most common web browsers used by web developers.
- Mozilla Firefox (recommended)
- Google chrome (recommended)
- Brave browser
You will be writing your code here. Your computer likely comes with a text editor built in, but we recommend a more robust one. A few of the most common text editors among web developers are:
- Vs code ( free and recommended)
- Sublime text
- Brackets (by Adobe)
Version control system
This is your computer ( or laptop) that you will be using. ( I don't need to tell you what a computer is, do I? ). Just make sure you are using a computer with good operating system.
To create your HTML file:
- Open your desktop
- Right click and Select "New" and "Text Document," making sure that the filename ends in ".html" and not ".txt." In order to see the file extension, click on the "View" tab and ensure that the "File name extensions" checkbox is checked.
- After you've set up your file, open it in your browser.
- You can double click if it has a Chrome or other browser icon on the left. If it doesn't, simply select "Open with" and choose the browser you prefer.
- You will see blank pages in the browser, but that's okay since nothing is in the file yet.
Editing the file
Now that you have your file set up, you’re ready to start coding!
To edit your HTML file you’ll want to open it in a code editor. Right click the file, and either select “Open with” and the editor, or some editors will have a quick link from the menu
Loading an HTML file in your browser
The HTML file you create on your computer can be loaded in your browser and will not be accessible through the Internet, so only your computer or PC can see it.
Websites that can be accessed by anyone over the internet are saved on computers called servers (explained in the last post). But the process isn't very different.
As you can see, there is essentially no difference between how websites work on the internet and on your computer, other than no-one else can visit the one on your computer.
So, now you know how to preview websites on your computer! If you were to change the HTML in the code editor and save it, you would need to reload the page in your browser to see the changes.
Now that you have the index file open in both your browser and your editor, we’ll start writing some code!