Chapter Three

Tools Every Beginner

Should Have

T here are tools for working on web design projects that a beginner in web design needs to be familiar with. This chapter elucidates them.

Let's get started by looking at some of these tools.

• A Computer: This could be laptop or a desktop in native, but a laptop would be more preferable. Web designers require computers throughout their career as they will be needing them to work on projects. These days, it is easy to get a good laptop at an affordable price.
• A Web Browser: A web browser is a software that enables you to view web pages (HTML files). Examples of web browsers are Mozilla Firefox, Google Chrome, Opera, and Internet Explorer, etc. These are the top web browsers in the world and can be downloaded and installed for free. In case you are not too sure about where to get these browsers, you can start by using “Internet Explorer” on Windows operating system or “Safari” on Mac operating system. A simple search for Internet Explorer on a computer with a Windows Operating System or Safari on Mac Operating System can be done to confirm if you have any of these browsers. Alternatively, with internet access, you can easily search for any of these browsers online by using phrases such as “Download Google Chrome”.
• A Text Editor: To a web designer, a text editor is the equivalent of what a hoe is to a farmer. A text editor is a software that enables web designers write codes e.g. HTML and CSS codes which is what this book is about. Computers with Windows operating system have a preinstalled text editor called “Notepad” which can be accessed by searching for “Notepad” on Windows operating system search bar; although notepad isn't the best text editor for writing codes. Preferably, Notepad++ is recommended for windows users, and BBEdit for Mac operating system users.

Downloading and Installing Notepad++

This book comes with a CD plate that contains Notepad++ installer. If you don't have access to the CD, you can follow the steps below to download Notepad++ from the web.

Downloading Notepad++

Step 1: Using a web browser of your choice (Firefox, Internet Explorer, etc.), visit the official Notepad++ web site at www.notepad-plus-plus.org.

Figure 3.0 shows a screenshot of the current Notepad++ website as at the time of this writing.

Figure 3.0: Notepad++ home page.

Step 2: Click on the download button. Figure 3.0 above highlights the download link using an arrow. By clicking on the download link, you will be redirected to the download page. On the download page, notice another download button at the left bottom of the page. Click on it to start downloading the Notepad++ software.

Figure 3.1 shows the final download page. After successfully downloading the setup, the setup file should have an icon similar to the logo on the website.

Figure 3.1: Notepad++ download page.

Google Chrome users will see a button at the bottom of their web browser that enables access to the setup file downloaded. For web browsers such as Internet Explorer and other web browsers, newly downloaded files can be found in the “downloads” folder. You can easily access your downloads folder when you open your file explorer. Downloads folders are often found at the left menu bar together with Documents, Pictures, Videos etc. depending on the operating system you are using.

Figure 3.2 shows how the download file will appear at the bottom of a Google Chrome browser.

Figure 3.2: Downloaded Notepad++ setup file.

Installing Notepad++

Step 1: Double click on the setup file to start the installation process. The first window is where the default language for Notepad++ can be set. Click “OK” to continue. Figure 3.3 shows the language selection screen.

Figure 3.3: Language selection screen.

Step 2: A new window will pop up, just like what we have on Figure 3.4. Click the next button.

Figure 3.4: First setup screen for Notepad++

Step 3: The next window shows the License Agreement of Notepad++ which you can read if you have enough time. I will recommend that you click the “I Agree” button. Figure 3.5 shows the license agreement page.

Figure 3.5: License agreement screen.

Step 4: The next window is where you can choose which location in your computer you would like to install the Notepad++ software. Click the next button to proceed to the next step. Figure 3.6 shows the “Choose Install Location” window.

Figure 3.6: Install location window.

Step 5: This window shows a list of components on Notepad++ that you can choose from, just like what we have in Figure 3.7. You can leave the default components and click on the next button.

Figure 3.7: Notepad++ component window.

Step 6: The next window also shows a list of some components to choose from, but the most important component I will recommend for you is the “Create a Shortcut on Desktop” feature. By checking this box, after the installation process is completed, a Notepad++ shortcut will be created on your desktop. These will enable easy access to the software anytime you want to use the editor. Click on the checkbox and click the “Install” button. Figure 3.8 shows the checked feature.

Figure 3.8: Additional Notepad++ component.

Step 7: After clicking the install button, the installation process proceeds very fast. Figure 3.9 shows the final page after the installation is complete.

Figure 3.9: Final installation screen.

Step 8: At this stage installation process is completed. Click on the “Finish” button.

Note: You will notice a checked box labeled “Run Notepad++”, you can as well leave it checked so that it will automatically launch the program for you after clicking on the “Finish” button.

After clicking on the finish button, you will see a welcome page that shows up on every first Notepad++ installation.

Figure 3.10 shows the Notepad++ welcome screen.

If you have reached this point, then congratulations. You have successfully installed the most important tool that you need to start writing your codes.

Summary

In this chapter, we went through the steps of installing a text editing software that will enable us to start writing some codes. In the next chapter, we will be walking through the process of creating our first web page.