Setup

As you might expect, the first step to getting started with any new technology is setting up a couple of tools. While it is possible to create HTML and CSS with any text editor, using a code editor will offer features to make your life easier.

We’ll be using github.dev, a free, online code editor, for this workshop. If you’ve ever used Visual Studio Code, this code editor may look familiar to you. One of the awesome things about using github.dev is that you’ll be coding directly in the browser. You’ll also add the CodeSwing extension, which allows you to make edits to the HTML and CSS and see the results immediately.

Creating a repository and opening it in github.dev

Let’s start by creating a new repository for this project on GitHub, and then opening it in github.dev.

1. If you don’t have a GitHub account, go ahead and join GitHub. Then, create a new public repository named resume. If you’ve never made a GitHub repository before, check out the documentation for more information. Make sure to select Public and to initialize the repository with a README.
2. Navigate to your new repository on GitHub.
3. Open the repository in github.dev by pressing the . key from the repository page, or swap .com with .dev in the URL. This will set up a VS Code environment in your browser.

Install CodeSwing

Once you have your repository open in github.dev, you can install CodeSwing. As mentioned before, CodeSwing is an extension which helps you create HTML, CSS and JavaScript and see updates in real time.

1. Open the Extensions toolbar by selecting the Extensions icon from the Activity Bar on the left-hand side of your window.
2. In the Search Extensions text box in the upper-right corner, type CodeSwing
3. Select Install for CodeSwing

The extension will be installed.

Turn on AutoSave

One of the best productivity features in github.dev and Visual Studio Code is AutoSave. AutoSave automatically saves changes to your files, so you don’t have to worry about losing any of your work. To turn on AutoSave, select the three parallel lines icon on the left-hand side of your github.dev window in the Activity Bar. Go to File > AutoSave. Your AutoSave is turned on if there is a check mark next to the AutoSave menu item.

Summary and next step

Congratulations! You have the tools you need to begin creating HTML and CSS pages. Next, let’s create our first page.