HTML5 Tutorials: Setting up a Proper Coding Environment
The HTML files that powers webpages are simple text files with ".html" — in some cases ".htm" — file extension. Having this in mind, you need nothing more than a simple text editor to write HTML codes, and any browser of your choice to view the results.
A common text editor and browser for Windows OS laptop is the Notepad and Microsoft Edge respectively whereas Mac OSX computers come bundled with TextEdit and Safari. While these text editors and browsers are great and can easily do the job, we recommend using Sublime text editor for this tutorial series.
We’ve recommended that you use a simple text editor like sublime text editor for this tutorial series, but you may be tempted to use a more sophisticated software program or IDE.
We strongly advise against this if you truly want to learn the basics of web development especially if you are a beginner. This is because in some cases, these software programs or IDEs often throw in unnecessary or non-standard code to help in coding.
This does not imply that we do not support the use of IDEs. IDEs are helpful and mostly preferred for code syntax highlighting and file management, especially if you've mastered web/software development. However, at this level, software programs such as these will never give you the same control over a web page as coding by hand.
- Sikademy Tips
To get started:
We assume you have access to a computer.
If you do not already have a Sublime text editor, download, install, and set it up on your computer.
Download and install google chrome if you do not already have it installed.
Step 1: Open your sublime text editor
Step 2: Copy the code sample below by clicking/tapping the "copy" button on the right, and paste it into the sublime text editor. Don't worry about the meaning for now, in the next tutorial, we'll explain in detail.
Step 3:Create a folder called “html5-basic-tutorials” at the location you prefer to save files on your computer, and save the file in the folder you created as “index.html”.
Ensure that the file is saved with the file extension ".html" or ".htm"
- Sikademy Tips
Step 4:View the saved HTML file on Google Chrome by double-clicking on the file (If Google chrome is your computer's default browser), or right-click - and choose "Open with," and select Google Chrome.
The output on your browser should look like below: