Introduction
This is a guide dedicated to people who are beginners to programming/coding websites. This guide will show you how to set up your PC so you can start building websites with HTML, CSS and JavaScript quickly and easily.
This guide uses the Windows operating system to install applications, if you use Mac OS or Linux you should still be able to follow through and perform the same setup.
Setup
Applications
This section goes through downloading and installing applications that are required to get your PC ready for coding.
Web browser - Google Chrome
The recommended web browser to use whenever you code websites with HTML, CSS and JavaScript is Google Chrome. Windows already comes with the Microsoft Edge web browser by default however when it comes to creating a website it makes sense to create it in the web browsers that are used the most.
Browser usage stats for March 2024
As of writing according to Statcounter Google Chrome has a market share of 65.31% whereas Microsoft Edge has 5.07% so based on those stats building websites in Google Chrome first will cater to more internet users.
Go to the Google Chrome website and click the Download Chrome button to start downloading the application.
After the download is complete click the Downloads icon in Microsoft Edge and then click the ChromeSetup.exe file.
A popup-up will show up which will show progress on the downloading and installation of the application. After the whole process is complete the application should open up automatically.
In the bottom right-hand corner click the Don't Sign In to skip the signing into a Google account.
Press the Set as default button in the bottom right-hand corner to bring up the Default apps settings window.
In the Default apps settings application scroll down the list till the Google Chrome option shows up and then left-click it.
Change the .html option to Google Chrome so that any HTML files you work with will open up in Google Chrome.
Now that Google Chrome is available when opening up any of the html files you work with it will open them with Chrome and the code inside of the html files essentially gets translated to a website.
Code Editor - Sublime Text
The next application needed is a code editor to be able to write and update code. A good tool to use that's not too complex for beginners is Sublime Text, go to the Sublime Text website and click the Download for Windows button.
After the download is finished open the .exe file and go through the install steps. Use the default file path or edit and press the Next > button to continue.
Leave the checkbox unchecked and continue.
Finally, press the Install button to start the installation and wait for it to complete.
After installation click the Finish button to close the setup.
Open the Sublime Text application as it will be needed in the next section to show code for an existing website application.
Run a website locally
Now that you have the applications set up you can start coding HTML, CSS and JavaScript. This section will detail getting a basic website up and running on your PC locally and the code for it loaded in the code editor.
Start by going to the devsites GitHub repository page, once on the page click the green Code button and then the Download ZIP link to download the website code zip file.
Open your Downloads directory and right-click the downloaded devsites-main.zip file. Click the Extract All option to get all the files out from the zip file.
In the unzipped devsites-main folder go into it and then go into the next folder to show the code files for the website. You should see the following files.
- styles/style.css
- scripts/main.js
- index.html
- README.md
Double-click the index.html file to open it in the Google Chrome browser, the browser will parse the HTML code inside of the index.html and then show the website as shown below.
Now open the Sublime Text application, click the File option in the top left menu and then select the Open folder... option to open the Select Folder pop-up window.
Select the devsites-main folder with the code inside then click the Select Folder button in the bottom right.
The folder with the files is now viewable in Sublime Text, selecting a file shows its code. This project has an example of HTML, CSS and JavaScript code that you can edit and see the change on the website loaded in Chrome.
Here is an example of changing the HTML file and seeing the change made in the code. Look for the <header> tag and edit the text within the <h1> tag and the <div> tag below within the header tag. Save the file so that the change can be applied.
Go back to Google Chrome and click the Refresh button and you will see the change applied to the website.
Google Chrome - Developer tools
One more thing that's useful for when you code up a website. You can make changes to the HTML, CSS and JavaScript within Google Chrome.
So rather than editing the code in Sublime Text and refreshing the page in Chrome you can instantly make the change in Chrome tools and the change will appear straight away. However, keep in mind any changes made in Chrome tools don't save the changes to the original files so when you refresh the page the changes go away.
Right-click on the website and select the Inspect option.
The Chrome tools will appear at the bottom of the Chrome browser window.
The left panel has multiple tabs, to start with you can stick to using just the Elements and Console tab. The Elements tab allows you to change the HTML of the current page that is loaded and the Console allows you to run JavaScript.
The right panel shows the CSS where CSS properties can be added or edited. You need to select an HTML tag in the Left Panel - Elements tab to load the CSS on the right panel.
Conclusion
After following this guide you should be in a better position to start improving your skills in HTML, CSS and JavaScript using Google Chrome to view local websites and Sublime Text to view and edit code.
With the DevSites website setup, you now have a sample website that you can use to experiment with by changing the code and seeing changes. Use it as an example to support your HTML, CSS and JavaScript learning and development.