One of the first challenges you will encounter when participating in our CSS Fight Night will be downloading the answer template on to your computer. It’s a skill that’s often taken for granted, but actually downloading a project and running it locally can be difficult to figure out without direction, this article is here to support you through this process, giving you step by step instructions to get the template onto your computer.

1. Download VSCode

Visual Studio Code is currently one of the go to IDEs for web development, you can download it here: https://code.visualstudio.com/download

Once Visual Studio Code is installed, open it.

2. Go to the github repo and copy the link

Grab the git link to pull the template code by going to our repository on github (https://github.com/yordevs/CSS-Fight-Night-Template), clicking on the download code button, and copying the https url.

Alternatively, you can copy the link below:

https://github.com/yordevs/CSS-Fight-Night-Template.git

3. In VSCode navigate to the git tab and select clone repository

In the left hand side bar, click on the git tab (third from the top), then, in the git tab, click the “Clone Repository” button

4. Paste the repo link into the text bar and hit enter

Paste the git link you copied from the repository into the text bar that pops up and hit enter

Here’s the link if you need it again: https://github.com/yordevs/CSS-Fight-Night-Template.git

5. Open the html file in your browser

There are many ways to view your HTML file, the simplest is to navigate to your file in your file explorer (in vscode you can just right click the index.html and select "Reveal in Explorer/Finder"). Once you can see the file in you file explorer, double click it to open it in your browser.

Quick Debugging

There are a few common mistakes people make when developing in pure html, here's a checklist of things help you figure out why something might not be working

• Have you saved your file? Make sure it's saved before trying to view it in the browser, in VSCode you can use ctrl-s on windows, or cmd-s on mac.
• Have you refreshed the browser tab? You have to refresh the browser tab every time you save a change to view it.
• Have you specified a unit? Make sure on any size-related css properties you have a unit specified, this may be px, em, %, vh, or vm

And that's it, if you've followed the steps successfully you should now have the template open in your browser. If you've had any issues you can let us know in out slack, or message us on facebook, or by email

To find out how to create some CSS images, follow the next article