Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
The HTML and CSS Workshop

You're reading from   The HTML and CSS Workshop Learn to build your own websites and kickstart your career as a web designer or developer

Arrow left icon
Product type Paperback
Published in Nov 2019
Publisher Packt
ISBN-13 9781838824532
Length 700 pages
Edition 1st Edition
Languages
Concepts
Arrow right icon
Authors (4):
Arrow left icon
Matt Park Matt Park
Author Profile Icon Matt Park
Matt Park
Brett Jephson Brett Jephson
Author Profile Icon Brett Jephson
Brett Jephson
Marian Zburlea Marian Zburlea
Author Profile Icon Marian Zburlea
Marian Zburlea
Lewis Coulson Lewis Coulson
Author Profile Icon Lewis Coulson
Lewis Coulson
Arrow right icon
View More author details
Toc

Table of Contents (15) Chapters Close

Preface 1. Introduction to HTML and CSS 2. Structure and Layout FREE CHAPTER 3. Text and Typography 4. Forms 5. Themes, Colors, and Polish 6. Responsive Web Design and Media Queries 7. Media – Audio, Video, and Canvas 8. Animations 9. Accessibility 10. Preprocessors and Tooling 11. Maintainable CSS 12. Web Components 13. The Future of HTML and CSS Appendix

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.

Installing Chrome

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):

  1. Download the latest VSCode from https://packt.live/2BIlniA:
    Figure 0.1: Downloading VSCode

    Figure 0.1: Downloading VSCode

  2. Open the downloaded file, follow the installation steps, and complete the installation process.

Installing the "Open in Default Browser" Extension

  1. Open your VSCode, click on the Extensions icon, and type in Open In Default Browser in the search bar, as shown in the following screenshot:
    Figure 0.2: Open in Default Browser extension search

    Figure 0.2: Open in Default Browser extension search

  2. Click on Install to complete the installation process, as shown in the following screenshot:
Figure 0.3: Installing the extension

Figure 0.3: Installing the extension

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

  1. 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 Apache is highlighted in green, then the web server is running:
    Figure 0.4: The XAMPP Control Panel

    Figure 0.4: The XAMPP Control Panel

    If it is not highlighted in green, then you will need to start the Apache web server:

    Figure 0.5: Starting the Apache Web Server for Windows

    Figure 0.5: Starting the Apache Web Server for Windows

  2. Click the first Start button in the control panel that corresponds to Apache. The web server will then initialize and start so you can use it.
  3. To check if your web server is running correctly, open your browser, type localhost into the browser's URL bar and then hit Enter:
    Figure 0.6: Navigating to localhost in the browser

    Figure 0.6: Navigating to localhost in the browser

    If your installation was successful and Apache is running, you will get the XAMPP welcome page:

    Figure 0.7: Viewing the XAMPP Welcome Page

    Figure 0.7: Viewing the XAMPP Welcome Page

  4. 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 Explorer tab:
    Figure 0.8: Navigating to the File Explorer

    Figure 0.8: Navigating to the File Explorer

  5. 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:
    Figure 0.9: Viewing the Web Server Folders and Files

    Figure 0.9: Viewing the Web Server Folders and Files

  6. 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 localhost/applications.html:
    Figure 0.10: Navigating to the applications.html Page

    Figure 0.10: Navigating to the applications.html Page

  7. 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

  1. Download MAC file from this link: https://www.apachefriends.org/index.html.
  2. Double click the downloaded .dmg file (for example: xampp-osx-7.4.5-0-vm.dmg)
  3. Drag the DMG image into application as seen below:
    Figure 0.11: XAMPP Installation screen

    Figure 0.11: XAMPP Installation screen

  4. To start XAMPP, go to Finder -> Applications -> XAMPP OR press CMD + Space (Spotlight search) and type "XAMPP". You will see the following result:
    Figure 0.12: MAC Finder screen with Applications folder view

    Figure 0.12: MAC Finder screen with Applications folder view

  5. Click on the installer. You will get the following dialog box:
    Figure 0.13: First time installation screen

    Figure 0.13: First time installation screen

  6. Click OK on 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:
    Figure 0.14: XAMPP Control panel

    Figure 0.14: XAMPP Control panel

  7. Click on the Start button to start the service (observe the red dot and IP address is empty)
  8. After you click on the Start button, you will see green-dot and IP address as shown in the following figure:
    Figure 0.15: XAMPP control panel with active "General" Tab

    Figure 0.15: XAMPP control panel with active "General" Tab

  9. To see status of all the services, click on the "Services" tab and check status:
    Figure 0.16: XAMPP control panel with active "Services" Tab

    Figure 0.16: XAMPP control panel with active "Services" Tab

  10. 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:
    Figure 0.17: XAMPP Welcome screen

    Figure 0.17: XAMPP Welcome screen

  11. If you wish to use localhost instead of IP, then click on "Network" tab and enable the below port:
    Figure 0.18: XAMPP control panel with active "Network" Tab

    Figure 0.18: XAMPP control panel with active "Network" Tab

  12. 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.
  13. 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:
    Figure 0.19: XAMPP control panel with active "Volumes" Tab

    Figure 0.19: XAMPP control panel with active "Volumes" Tab

  14. When you click on "Explore" button, you see Finder window will open and search for "htdocs" folder as shown below:
    Figure 0.20: Finder with htdocs view

    Figure 0.20: Finder with htdocs view

    There you can see applications.html file.

  15. Navigate that file from the web-browser and save all your files in this folder to access them on your server:
    Figure 0.21: XAPP welcome screen

    Figure 0.21: XAPP welcome screen

  16. To stop the server, go to the XAMPP server and in "General" tab, click "Stop" button.

Instructions for Linux

  1. Download the Linux installer and find that in your Downloads folder.
  2. Open terminal into Downloads and 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
  3. Enter your password and you will see the following screen:
    Figure 0.22: Linux setup (installation) screen

    Figure 0.22: Linux setup (installation) screen

  4. Click on the Next button and follow other instructions, until you see the installation process starting as shown in the following figure:
    Figure 0.23: Linux setup (installation) screen

    Figure 0.23: Linux setup (installation) screen

  5. Wait for this process to complete. Once done, the following screen will appear which states that the setup has finished:
    Figure 0.24: Linux setup (installation) screen

    Figure 0.24: Linux setup (installation) screen

  6. Click on the Finish button to launch the XAMPP. XAMPP Control panel will look like this:
    Figure 0.25: XAMPP Control Panel with active "Welcome" tab

    Figure 0.25: XAMPP Control Panel with active "Welcome" tab

  7. Start the server first by selecting "Manage Servers" tab and clicking on Start All button:
    Figure 0.26: XAMPP Control Panel with active "Manage Servers" tab

    Figure 0.26: XAMPP Control Panel with active "Manage Servers" tab

  8. Once they are started, you will see green light in front of each of them.
  9. From the Welcome tab, click on the "Open Application Folder", which will open "/opt/lampp" folder. Search for "htdocs" folder and click on it. You will see applications.html file.
  10. 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 workshops@packt.com.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime