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 Tribute Page 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 Tribute Page. In this case, instead of Hello World, everything is created as Tribute app.

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. The site in my case displays as follows, notice the CSS and basic content matching the Tribute site:

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

Nathan Lasnoski