Technical Setup

We will create practice web pages throughout this course.

But before that fun can truly begin, we'll need to do some configurations, some installations, and a free registration :)

1. Enable viewing of file extensions

Make sure you can see the file extensions in file names on your computer.

For example, if you have a file named monkey.jpg on your desktop, you should see monkey.jpg — not just monkey

If not, you will want to change a setting in your operating system:

Mac Instructions

1. Go to Finder > Preferences and click Advanced.
2. Make sure "Show all filename extensions" is selected.

Windows Instructions

1. Open any folder on your computer (or search for File Explorer).
2. Click the "View" tab.
3. Check "File name extensions".

2. Create a folder named webdev1

Create a folder on your computer named webdev1.

We will use this folder for storing our practice exercise files.

3. Install Git

Git is a version control system that is used by most web developers these days.

If not already installed...

Download Git and install it.

All of the default installation settings should work fine.

For more information, see the Git documentation.

4. Create a GitHub account

We're going to use a free service called GitHub to host our web page files. This will allow you to share a link to your pages with anyone in the world.

GitHub is an online service that uses the Git version control system.

Create a free GitHub account.

tip

Other people will be able to see your GitHub username. Choose wisely.

This name will represent you online and will be a part of your website URL:

https:// username_here .github.io

5. Install Visual Studio Code

Visual Studio Code (VS Code) is an extremely popular code editor that works on Mac, Windows, and Linux.

download & install:

Visual Studio Code

6. Configure VS Code

Once we get all of this set up, we will be able to publish our practice exercises to the web from within VS Code.

1. Start up VS Code.

2. Open your webdev1 folder by going to File -> Open Folder and locating the folder on your computer.

3. Create a blank file named .nojekyll inside your webdev1 folder.

   Notice that it begins with a period.

   And those are 2 lowercase L's at the end of the file name:

   .nojekyll

   info

   By default, GitHub uses a program called Jekyll that automates a lot of website creation stuff.

   But we want to learn how to do these things on our own.

   So, we are adding this .nojekyll file to inform GitHub that we do not want to use Jekyll.

   But it's not important that you completely understand this step right now. We just need to do this to move forward.

4. Go to Terminal -> New Terminal

5. We need to establish your Git username on your computer.

   This username does not have to be the same as your GitHub.com username.

   It's common practice to use your first and last name. For example, if your name is "Timmy Tucker", you would type the following command and then hit the ENTER key:

   git config --global user.name "Timmy Tucker"

   Replace Timmy Tucker with your username of choice.

   note

   If successful, you will not get any response after hitting ENTER.

   If you get an error message, try again.

6. Enter another configuration command to provide your email address, such as:

   git config --global user.email "[email protected]"

   Replace ttucker@trucker.com with your email address.

7. Close VS Code.

7. Connect VS Code with Github

1. Make sure you are logged into your GitHub.com account in your web browser.

2. Start up VS Code.

   If your "webdev1" folder is not already opened, you can go to File -> Open Folder and find the folder.

3. Select the Source Control tab and click the Publish to GitHub button.

4. When prompted, click the appropriate options to allow GitHub access.

   

   In addition to the prompts shown in the video below, you may also be prompted in your web browser to Authorize GitHub for VS Code.

5. Select Publish to GitHub public repository

6. Make sure there is a checkmark next to .nojekyll and click OK

7. If prompted, click Sign in with your browser.

8. Verify that the webdev1 repository was created on GitHub.com

8. Make repository accessible on the web

Within your webdev1 repository on GitHub.com, click Settings and then Pages.

Under Build and deployment make sure that Deploy from a branch is selected for "Source".

Under Branch, select main and click the Save button.

note

If you are using an older GitHub account, the branch might be named master instead of main.

Proceed to the Practice 1 page to begin creating your first web page!