Playing with Web Design

Getting Ready for Web Design?

If you haven't done any web development, there are a few things you will need in order to get started. I'm assuming at this point that you know enough about your computer to create and edit files. If you have used a word processor or spreadsheet, that's good enough.

There are some tools that make your work easier, but the truth is that you could use a plain text editor like Notepad on Windows or Text Editor on macOS.

What you'll Need

I'm going to list the tools that I am current using here. The article, "Useful Tools" will provide more information and other choices, but this will get your started. The good news is that the tools I'm going to list on this page are free!

Code Editor/IDE

You need a good text editor in order to create HTML, CSS, and JavaScript files. A word processor won't do because the files are plain text and the invisible formatting characters that a word processor adds would make the file unreadable in a web browser.

Better yet, you should get an IDE to help you manage your projects. The advantage to an IDE is that it lets you see and manage all of the files in your project.

My current favorite is Visual Studio Code, a free IDE from Microsoft. VS Code has a lot of features to make your coding life easier. My current favorite is the fact that hovering over an HTML tag or CSS rule shows you an overview of the item and also provides a link to the item's page on MDN Web Docs.

Web Browser

If you're reading this, then you probably have a web browser installed. Which one you use is entirely up to you. As long as you have the current version of your browser installed, you're probably good to go.

I use Mozilla's Firefox web browser for many reasons, not the least of which is the developer tools they make available. I use the released version of Mozilla Firefox but I also use the Developer Edition. Firefox is what I use day to day, but I also have Google Chrome, Opera, and Microsoft Edge installed on my system because, as a web developer, I need to test the sites I create in the major browsers to ensure that it behaves well and looks good in all of them.

Source Control

Source control protects your code and assets (such as pictures, videos, and other project data) and, although there are other tools, the most common tool is Git, a source control system that has been around for quite a while now. Git is helpful for individual developers as well as teams because you can store your code remotely, protecting you from disasters such as hard drive failure. It also protects you from you.

When you're ready, sign up for GitHub. You probably don't have to worry about Git right away, but once you start creating more substantial sites, storing the code in a Git repository will save you a lot of time if all goes wrong. (Coming soon, tutorials to help you get started with Git and GitHub.)

Once you've got your tools installed, let's begin by creating your first HTML page.