Before You Begin
Each great journey begins with a humble step. Our upcoming adventure in the land of HTML and CSS is no exception. Before we can do awesome things with data, we need to be prepared with a productive environment. In this section, we shall see how to do that.
In this book, we have used Chrome version 76, which was the latest version at the time of publication. Make sure you have downloaded and installed the latest version of Chrome to ensure an optimal experience.
To install Chrome on Windows, follow the instructions given here: https://www.google.com/chrome/
For other platforms such as macOS and Linux, scroll down to the bottom left-hand corner of this website: https://www.google.com/chrome/ and click on Other Platforms, and choose accordingly.
Installing Visual Studio Code
Here are the steps to install Visual Studio Code (VSCode):
- Download the latest VSCode from https://packt.live/2BIlniA:
- Open the downloaded file, follow the installation steps, and complete the installation process.
Installing the "Open in Default Browser" Extension
- Open your VSCode, click on the
Extensionsicon, and type in
Open In Default Browserin the search bar, as shown in the following screenshot:
- Click on
Installto complete the installation process, as shown in the following screenshot:
Installing the web sever
Some exercises in the book will require the use of a personal web server to run the scripts and view the pages you'll be creating. If you do not have a personal web server already set up, you can use the following steps to get one installed.
To begin, you will need to go to https://www.apachefriends.org/index.html and download the XAMPP package for your operating system. XAMPP is available for Windows, Mac, and Linux.
Instructions for Windows
- Once the web server package has been downloaded and installed on your system, open the XAMPP Control Panel and check the status of your web server. If
Apacheis highlighted in green, then the web server is running:
If it is not highlighted in green, then you will need to start the Apache web server:
- Click the first
Startbutton in the control panel that corresponds to Apache. The web server will then initialize and start so you can use it.
- To check if your web server is running correctly, open your browser, type
localhostinto the browser's URL bar and then hit Enter:
If your installation was successful and Apache is running, you will get the XAMPP welcome page:
- Next, open your XAMPP directory so you understand where to place your files when you want to use the web server to view your pages. From the XAMPP Control Panel, click the
- This will open the Windows Explorer and show the files used by XAMPP for running your web server. Locate the folder named
htdocs. This is the folder that holds any files that you want to view in the browser:
- Any files you place into this folder can be accessed through your localhost. For example, we see the file
applications.html. If we want to access this file in the browser, we would type
- Press Enter and your browser will open the file. You can now place any folders or files you wish to open using the web server, by placing them into this directory.
Instructions for Mac
- Download MAC file from this link: https://www.apachefriends.org/index.html.
- Double click the downloaded
.dmgfile (for example:
- Drag the DMG image into application as seen below:
- To start XAMPP, go to
XAMPPOR press CMD + Space (Spotlight search) and type "
XAMPP". You will see the following result:
- Click on the installer. You will get the following dialog box:
OKon this screen and then it will ask your password in the next screen. Once you enter your password, the next screen will appear which looks like this:
- Click on the
Startbutton to start the service (observe the red dot and IP address is empty)
- After you click on the
Startbutton, you will see green-dot and IP address as shown in the following figure:
- To see status of all the services, click on the "
Services" tab and check status:
- Now, click back on "
General" tab and click on "
Go To Application" button OR copy the IP address and go to your browser and hit enter. It will open default (welcome) page of XAMPP in your default web-browser. Go through this page, it will give you basic information:
- If you wish to use localhost instead of IP, then click on "
Network" tab and enable the below port:
- Now go to your web-browser and type-in
localhost:8080(as visible in the above figure) and you will see the same "Welcome" screen.
- To place your files into XAMPP, click on the "
Volumes" tab and click on the "
Mount" button. Once clicked, the other two options "
Unmount" & "
Explore" will be activated for you. Now click on "
Explore" button to go to the LAMPP folder:
- When you click on "
Explore" button, you see Finder window will open and search for "
htdocs" folder as shown below:
There you can see
- Navigate that file from the web-browser and save all your files in this folder to access them on your server:
- To stop the server, go to the XAMPP server and in "
General" tab, click "
Instructions for Linux
- Download the Linux installer and find that in your
- Open terminal into
Downloadsand type the following codes:
chmod 755 xampp-linux-x64-7.4.5-0-installer.run sudo ./xampp-linux-x64-7.4.5-0-installer.run
- Enter your password and you will see the following screen:
- Click on the
Nextbutton and follow other instructions, until you see the installation process starting as shown in the following figure:
- Wait for this process to complete. Once done, the following screen will appear which states that the setup has finished:
- Click on the
Finishbutton to launch the XAMPP. XAMPP Control panel will look like this:
- Start the server first by selecting "
Manage Servers" tab and clicking on
- Once they are started, you will see green light in front of each of them.
- From the
Welcometab, click on the "
Open Application Folder", which will open "
/opt/lampp" folder. Search for "
htdocs" folder and click on it. You will see
- Run localhost from your favorite web-browser and type-in "
http://localhost/applications.html". You will see Apache Welcome screen. From the control panel you can start/stop any services.
Installing the Code Bundle
Download the code files from GitHub at https://packt.live/2N7M3yC and place them in a new folder called
C:\Code. Refer to these code files for the complete code bundle.
If you face any trouble with installation or with getting the code up and running, please reach out to the team at [email protected].