Free Code Camp – Survey Form with Azure Static Web App, GitHub, and VS Code

So, I love Free Code Camp to get students going in coding. However, I wanted them to get experience with Azure at the same time. Instead of just starting with Code Pen, I wanted them to try deploying into Azure Static Web Apps. This guide helps you do this for the Survey Form in Free Code Camp.

First, follow this guide to create your first Hello World app in Azure Static Web Apps. This will introduce you to the concepts of Visual Studio Code, GitHub, and Azure Static Web Apps.

Second, use the same procedure, but create all elements under a name for the Survey Form. In this case, instead of Hello World, everything is created as “Tribute”, but you’ll want to use SurveyForm, or something along those lines.

In Visual Studio Code, make sure you have two files (index.html and style.css). The index.html file should include the content for your tribute site, as follows below (my example):

The style.css will include the style sheets for the Tribute page:

The deploying will proceed to GitHub => GitHub Actions => Azure Static Web App. You can see the static web app deployed in the Azure interface below:

To see the site in GitHub, feel free to check it out here.

Nathan Lasnoski

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s