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:
- First, click here to see the StackBlitz template
- Click on the Sign In button in the upper right hand corner. Create and account if you need to with a valid email address.
- 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)
- 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”)
- 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.
- Have the instructor check over your screen to make sure you are set up correctly
- 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
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: