This blog post goes through a series of steps the coding club students will use to build some simple web apps with StackBlitz.

The members of coding club should follow these steps:

  1. First, click here to see the StackBlitz template
  2. Click on the Sign In button in the upper right hand corner. Create and account if you need to with a valid email address.
  3. Once you are logged in, at the top of the StackBlitz interface, click on the menu item that says “Fork” (just to the left of the “Share” menu item)
  4. At the top left you will see the name of your forked project (it should say something like “ngclub-profile-vxladf”. There is a pencil icon just to the right of that. Click on the pencil icon then change your project name to “ngclub-profile-” followed by your first name in lower case (i.e. so if your name is Jane you would change the project name to “ngclub-profile-jane”)
  5. On the left hand side you will see your files. Click on the .vscode folder and then click on the file settings.json. Click in this file, hold down the control button and hit “s” on your keyboard. This should save the theme. You should see the text get a lot bigger.
  6. Have the instructor check over your screen to make sure you are set up correctly

The basic gist of this exercise is to learn a little bit of how to modify simple HTML, CSS and JavaScript. Some examples of simple exercises that can be done include:

  • Changing font color, size or other styling
  • Adding borders so the young coders can see that every element is a box on the screen
  • Add a click event handler to the button

JavaScript Functions

Now we will have all the students click here to see a different StackBlitz template. This template just has one simple button. Our exercises will revolve around modifying the click event handler for that button. We will try out the following functions:

  1. changeButtonColor
  2. doMathProblem
  3. findGif

In addition to trying out these functions, we will use Chrome Dev Tools to set break points in our code in order to see when things happen. If we have time, we will touch on the asynchronous nature of JavaScript with the gif fetch.

Jeff Whelpley

CTO at GetHuman, Google Developer Expert, AI and Angular Boston meetup organizer

Leave a Reply

Your email address will not be published. Required fields are marked *