Intro
Modern websites are built with an overwhelming amount of tools that can seem daunting to learn at first. However, they serve to make web development more efficient, collaborative and maintainable over the long haul. The tools below are what I've found to be worth learning and essential for professional work.
Let's talk about what they are and how they fit into the web development process.
Web Browsers
Starting with the obvious, there would be no web without web browsers. They have come a long way since their inception and have transformed from simple document viewers into full-blown, mini sandboxed operating systems of their own.
Browsers like Chrome, Firefox and even Edge all offer developer consoles that allow for inspection of the current page, style sheets, network performance, JavaScript debugging and more. Besides just viewing how the page will look to users, they're a tool of their own.
Languages
The foundation of the web is built on three main languages:
- Hypertext Markup Language (HTML)
- Cascading Style Sheets (CSS)
- JavaScript (JS)
HTML structures page information meaningfully so that computers and users can make sense of it.
CSS describes the presentation of the elements within the document. A stylesheet can be used across multiple pages. The "Cascade" refers to the way that styles are applied by overlapping rules, where general rules are overwritten by more specific styles.
JavaScript is the scripting language that gives pages behavior, such as expanding menus or manipulating page elements dynamically. This is usually run on the client's own device, but frameworks like node.js allow for servers to use it as well.
There are a variety of server-side languages such as Python, PHP, C# and more that all let a website run live programs that users can interact with (such as a database), but they aren't strictly required to make a web page work. How they're used depends on the type of website.
In general, you need to understand the task at hand to know which language should be used to acheive your goals.
Text editors
Websites at their most basic are simply a collection of text files. Therefore text editors are essential to create them.
There's a full spectrum of options, with the humble and familiar notepad.exe at one end to the more serious and robust Visual Studio Code at the other, which offers plugins for a variety of needs.
At a minimum, code highlighting is a must. Others offer integration with git and extended features for specific coding languages that make working much faster and more enjoyable.
Version Control
Version control is software that keeps track of file changes over time. It also facilitates collaboration by allowing users to write summaries of those changes and merge together code from others.
Git is the most popular and has a variety of hosting platforms available such as GitHub, which even offers free hosting for static web pages.
Graphic Editors
Editing or creating images will require their own tools as well. For logos and scalable graphics there are editors like Inkscape that allow for exporting Scalable Vector Graphics (SVG), which will use math to draw images that can stay crisp when a user zooms in. SVG has the added benefit of being dynamically manipulated with JavaScript if needed.
For traditional photos (image files like .jpg or .png) there are tools like Photoshop, or my own preference GNU Image Manipulation Program.
There are also command line tools such as find, ffmpeg or convert that can be useful if you need to make batch edits to many files at once.
Design Tools
When a website is still in the drafting stage, it's helpful to prototype what it could look like to see how initial ideas actually play out in practice. Ideally you should sketch a wireframe first (i.e: rough draft of the layout), which can be done in a graphic editor or on pen and paper.
Once you have the information laid out a prototype helps bring it to life. On an already existing site there may even be a design library that has modular components which can serve as the building blocks for what already exists on other parts of the site.
Design Tools are varied but they all help to make putting together the actual website according to a well-thought plan.
Frameworks and Libraries
Frameworks and Libraries are built using languages like JavaScript that provide a set of functionality not found in the language by default. They are added to a website either through linking a Content Delivery Network (CDN), by including a copy on your site or downloading the development libraries from a package manager like node's (NPM).
For example, Bootstrap provides a series of ready made web components like accordion menus and progress bars that would otherwise have to be made from scratch. It can speed up development and provide developers with a familiar codebase.
React is a fairly popular framework for creating web apps that takes things a step further by creating an entire coding paradigm. It introduces a renderer that runs on "state", by thinking of the app in terms of the different views it undertakes to accomplish things.
Frameworks have their own learning curve, but heavily depend on the base language that they're built on, so mastering the language fundamentals should come first to better understand how a framework makes sense. That said, learning one reinforces the other.
Processors
Processors generally modify code so that they conform with a style guide (Prettier) or avoid hard to debug errors (ESlint). They're not essential to the web but make development much smoother.
In the case of CSS there's also Syntactically Awesome Style Sheets (Sass), which adds language features such as control flow and variables. It understands and exports to native CSS, but allows for writing code that is less tedious and easier to update over time.
Databases
A database helps separate data from the website itself. This is useful when there are multiple ways to interact with the data, whether as an app or for third parties.
This requires a server running that actively processes incoming commands and changes dynamically according to user input. Many Content Management Systems (CMS) take advantage of a database.
Site Generators and Content Management
A Static Site Generator (SSG) can be used to create a website that does not need server side processing to work. This website is made with one! It exports HTML files that can be viewed without further processing by the hosting server.
A Content Management System (CMS) is a way to write and keep track of posts for a website. They can be hosted locally or online, depending on the infrastructure. This often makes use of a database and when hosted online can allow users to easily add content without having to have technical knowledge.
Domain Names and Hosting
The Domain Name System (DNS) is a glorified phonebook that the web uses to link together a named address (i.e: example.com) to IP addresses (i.e: 127.0.0.1) of hosting servers for easier access. Websites that sell domain names are called registrars.
A server is a host that allows people to connect to a given website. It sends the actual files of the website to users when requested. The web browser processes those files to create the actual web page once downloaded.
Some domain name registrars double as web hosts who can do both, but it's common to have separate hosting and domain name registry.
Conclusion
While not exhaustive, this list of tools is the majority of what is needed to specifically create a website. There are others that could help, such as video conference tools, workspaces or task management apps, but those apply to projects more generally whether web design or not. The tools above are the foundations of modern web development.