Before we start creating web pages/websites, we need to know about all the tools that are available for developing, version control, local development server, browsing, browser developer tools, web server, uploading to web server, domain, hosting, performance, etc.,
As mentioned above there are a whole bunch of tools available for every step of the development to make our website or even a simple web page a reality.
It may be overwhelming to understand all these at once. So let's try to pick some important ones and talk about the rest as and when we encounter those.
OS
This is obviously the first and most important criterion as there may be tools that are only available on certain OS.
But do remember there are great tools available no matter what OS you have installed and want to do your development on.
My pick: macOS.
Editor
The next step is to pick the editor of your choice based on the availability of your OS and the support and ease it offers for you during the development.
My pick: VS Code.
I will be creating some articles on how to set up and also will be adding tips as and when we encounter specific scenarios where we need to configure VS Code.
Version Control
When you start working on the code, you may experiment with different approaches or want to store step by step history of each step of the problem you worked on. For those scenarios having a Version control system is the way to go.
My pick: Git. Git is a distributed version control system. Again more on the version control systems in separate articles.
Also, there is Github. Which acts as a cloud-based hosting of your git repositories. More on this later too.
Browsers
Once you write a webpage code in HTML, you need a browser to view it visually on how the page shows to others.
It's good to have 4 major browsers installed - Google Chrome, Firefox, Edge, and Safari.
My pick: All 4.
Developer tools
Every browser comes with developer tools installed. Using dev tools you can inspect elements, check the console for js errors, check and modify styles applied, check for performance, check for network calls, and much more.
My pick: Chrome dev tools.
Local development server
Any HTML file can be opened directly in the browser but the path would contain file protocol. Although it's ok to use and fiddle with it, it's better to have a local development server with HTTP protocol to see the network requests. Also with file protocol, we cannot make any HTTP requests.
devpractical.com/host-a-html-page-on-localh..
Hosting
Eventually, you may want to make your webpage available to the rest of the world for that to happen you should have purchased a hosting space somewhere.
I don't have a specific choice here but there are a lot of hosting options available depending on the requirement.
My pick: Digital Ocean, siteground.com
Uploading to a web server
You need an FTP tool to do this.
My pick: Filezilla
Note: There are front-end hosting sites available like Netlify, Heroku, etc., wherein the build gets triggered once you push the code to GitHub. So for frontend apps like those you may technically not need any FTP clients.
Domain
Once the website is hosted you need to buy a domain name and then point it to the hosting nameserver.
My pick: iwantmyname.com, namecheap.com, nameboy.com
Accessibility
Any website should be made accessible for people with disabilities. Developer tools do provide some info on this.
My pick: Chrome dev tools.
Web Performance
There are several tools to measure this like Lighthouse and WebPageTest.
My pick: Both Lighthouse and WebPageTest.
References
developer.mozilla.org/en-US/docs/Learn/Comm...