This week we are going to have a lot of fun. Each kid in ng-club will build their own website with HTML, CSS and JavaScript. The goal will NOT be to teach everyone at a deep level how all of these technologies work. However, the hope is that each person in ng-club will have their own web page by the end of this lesson and they will have the interest to learn more about how these technologies work during the spring session of ng-club.

A Side Note on Blockly

We are not going to go over this in our lesson this week, but I wanted to point out an amazing online tool from Google called Blockly. It has a visual programming interface like scratch, but is focused on teaching you JavaScript. We will be using this heavily during the beginning of the spring ng-club session.

Today’s Lesson on Stackblitz

Stackblitz is an online code editor for web application development. We will be using it today to create a website for your favorite book character. Here is a rough outline of what we are going to do during this lesson. We may deviate from this depending on how things go:

  1. Go to the Stackblitz home page
  2. Click on the box that says “Angular”
  3. In the left hand file list, click on “app.component.html”
  4. In the center editor where you seeĀ <hello name=”{{ name }}”></hello> delete everything
  5. Add in <h1>Name of your character</h1>
  6. Do a Google search for your character, right click on the image and select “Copy Image Address”
  7. Add in <img src=””> and paste the image URL into the src
  8. Add in <h2>Facts about your character</h2>
  9. (Jeff will go over the rest and update this page after the lesson)
  10. Add links to other page
  11. Make page title come from component variable
  12. Add button for user to click
  13. Share link to your page with others
Categories: Uncategorized

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 *