Essential Tools, Software, and Setup for Web Development - Part 3
Before getting into the software and tools that you’re going to need, there are a housekeeping items to cover that will make building your first website a lot easier.
Organization Sparks Joy
The very first thing you should do, is set up some folders that will help you to organize all of your project files. The first folder you should create, is a Projects folder. This will be where you can store files that relate to your projects. Basically, files that do not affect the website in the current form. Files like: raw image files, word documents, Brand guides, etc.
Alternately, if you need to be able to share the files, you could use cloud storage like Google Drive, Dropbox or OneDrive. It’s important to have a designated space for these types of files so they don’t get mixed up with other website-related materials.
The second folder is your “Web Development” folder. I use a folder named www, all lower case. We will be storing our web development projects here. This specific folder is crucial for organizing and keeping track of all the web development projects you will be doing.
By having separate folders for each aspect of your work—projects and web development — you will ensure an efficient and organized workflow right from the start. Plus, it becomes much easier to locate necessary files when everything has its designated place.
Remember, maintaining organization in digital spaces is just as important as physical ones! Also, you should feel free to name the folders whatever you want, as long as it makes sense to you.
Web Development Software
There are a range of tools that are necessary for designing, coding, and deploying websites effectively.
Text Editor
The text editor will be your essential tool to write and modify code. While there are very popular text editors like Notepad++ and Sublime. We are going to be using VS Code.
Vs Code, is a highly versatile and powerful code editor, that has an extensive library of extensions that specifically make web development much more efficient. We are going to be using one extension in particular to get started with web development quickly.
Browsers
When it comes to website testing, having a variety of browsers is crucial. In order to ensure that the websites we create are compatible and accessible across different platforms, we are going to need have a few browsers. The most popular being: Microsoft Edge, Google Chrome, Firefox, Safari and Opera.
Using Web Developer Tools
Built into all modern browsers, the Inspector tool or Web Development Tools, will be as important as the text editor in building web applications. This built feature lets you examine and modify (code edits are not saved and will be lost when the page is reloaded) the elements on the web page.
The inspector has a full suite of tools, for this beginner series we will be focusing on the Elements tab, the Mobile device viewer (for responsive development) and the Console tab (used to debug javascript code).
To open the code inspector, you can:
- right click on any element on the page, and select Inspect from the dropdown menu.
- open the options menu (hamburger menu - the three dots / lines at the top right of the browser window by default) and go More Tools > Web Developer Tools
- or press ctrl + shift + I
Graphics and Image Editing
When it comes to web design, having a solid understanding of graphics and image editing is crucial for creating captivating user experiences.
Figma
Figma is an incredibly versatile and user-friendly design tool that has revolutionized the world of graphics design and web development. With its powerful features and collaborative capabilities, it provides designers with a comprehensive platform to bring their creative visions to life.
Figma allows users to create visual designs for websites and applications by providing an extensive range of tools like vector editing, prototyping options, and advanced layout functionalities. Its intuitive interface makes it easy for both beginners and professionals to navigate through the different design elements effortlessly.
Image Editing
For image editing there two popular web applications: Fotor and Photopea. These online tools offer a wide range of features and functionalities that cater to both beginners and advanced users alike.
Fotor boasts an intuitive interface, making it easy to use its various editing capabilities. Additionally, Fotor provides a collection of creative filters to give photos a unique effect or emulate specific styles.
Photopea has image manipulation capabilities similar to those of professional software like Adobe Photoshop. It supports layers, allowing users to apply different effects or to create image masks. Its extensive toolset includes brushes, text overlays, selection tools, color correction and more.
Photopea is a great option for resizing and exports to all of the popular image types, including webp.
Different image types used in web development.
Version Control
Version control (also know as Source control) is the practice of tracking and managing the progress of a code base (or repository) across the software development lifecycle and its multiple iterations, maintaining a record of every change complete with authorship, timestamp, and other details.
Version control is essential for DevOps teams as it enables them to work more swiftly and intelligently, settle issues, and organize code in one place. It is a crucial tool for organizations to overcome issues such as collaboration, keeping multiple iterations of information created, and data backup.
In a version control system like Git, the project codebase is called a repository. A single repository can branch out from the main codebase. This allows for different versions of the starting code to be worked on without affecting the main branch.
Git is an open-source distributed version control system that helps software teams create projects of all sizes with efficiency, speed, and asynchronicity. It allows multiple developers to work on their own local copy of the projects codebase, allowing teams to experiment and merge changes back into the source efficiently.
Github is a popular online hosting service for Git repositories, and integrates easily with VS Code, which makes the process of commiting code to the codebase seamless.
FTP Program
FTP (File Transfer Protocol) is a network protocol for transferring files between computers over the internet.
An FTP client application is used to upload, download, and manage files on a server.
Some popular FTP clients include: Filezilla, Cyberduck, Transmit, etc.
Setting Up Your Web Development Environment
A local web development environment allows you to build, test and replicate a ‘live’ server where your website will be hosted. To quickly set up a local environment, we will be using a VS Code extension called Live Server.
This extension will allow us to launch a local development server with live reload (the web page reloads when you save), and has support for all browsers.
Read more about installing and enabling live server in VS Code.
Recap tl;dr
You should have two folders 1) to store supporting files like raw images, content documents, logos, etc and 2) a folder dedicated to storing our web application files like HTML, CSS and Javascript.
We need VS Code as the text editor, and the vs code extension: Live Server, which we will use to run a local development environment.
You can read more about how to install VS Code extensions here. You will need atleast 1 modern browser that has Developer Tools.
Next Steps
In the next part of the series we will be coding our first web application!