The last week of ng-club!

OK, let’s pull ourselves together and build something cool. This week we are going to create our own websites with StackBlitz.

Notes Before We Get Started

A few things to keep in mind before we get started:

  • Remember that there are three parts to web development: HTML (the house structure), CSS (the house colors and design) and JavaScript (everything that makes a house “smart”)
  • Although you can put CSS and JavaScript directly into the same HTML file, we are going to be working with three separate files. One for each.
  • This will be a code along, but then you will be given the opportunity to customize your site once we have the basic structure down.
  • One of the most important things to remember that I will keep harping on is to utilize the Stackblitz autocomplete. As you type, you will start to see a drop down with potential choices. Don’t ignore this! Get used to picking from this option list as much as possible. And, if possible, don’t use your trackpad to point at the option. Instead use the up and down arrows to highlight the option and then the enter/return key to select the option you want.
  • Get started by going to StackBlitz and select the “JavaScript Blank Project” option

Code Along

We will start with HTML:

<h1>Jeff Whelpley</h1>
<img src="https://pbs.twimg.com/profile_images/1005148763076214784/W0KmDOPi_400x400.jpg">
<h2>Some facts about me:</h2>
<ul>
  <li>I am 40 years old</li>
  <li>I like pizza</li>
</ul>
<a href="https://jeffwhelpley.com">My Blog</a>
<button>Click here</button>

We will talk about each line of this as we go through it in the class. Once we are done with this we will do some styling. In the CSS file we will do:


h1 {
  color: green;
  background-color: red;
  font-size: 40px;
}

Finally we are going to enable that button in the HTML by adding this JavaScript code:

function sayHi() {
  window.alert('hi, how are you doing?');
}

var button = document.querySelector('button');
button.addEventHandler('click', sayHi);

Submit Your Site

Last thing to do is to submit your website to me so that I can send it to your parents. Do the following:

  1. First, in StackBlitz, click the Share button at the top of the page
  2. Then click the copy button to the right of the Editor Url
  3. Go to the bottom of this page and submit a comment with the following information:
    1. Paste in the Editor Url
    2. Include your name
    3. If you know your parent’s email address, put it there. Otherwise I will find it from your teacher
Categories: Tech Stuff

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 *