Meeting Announcements & Notes, Web Page Basics

October 20, 2017 Meeting

Welcome Back! Let’s get down to it!

This week we are going to:

  1. Quickly introduce and catch up anyone who is new this week – WELCOME!
  2. Make sure everyone has the following:
    1. GitHub Account
    2. Cloud9 Account with our team
    3. Forked the HTML5, CSS and JS book repo at github
    4. Created a new workspace with the github repo in Cloud9
  3. Let’s add a home page for our site – kind of like this: https://youtu.be/ent9dh0dRJg
    1. Add “index.html” in cloud 9 and type in a bit of html (we will talk about this in a bit)
    2. git add .
    3. git commit -m “added index.html”
    4. git push
  4. Enable GitHub Pages in settings (it is probably turned off by default)
  5. Copy the URL in your GitHub settings for your website, once you push your changes, your site is published there! Whoot!
  6. Now let’s add
    1. A title for our index page <title>This is my really great page</title>
    2. A header <H1>This is my really great header</H1>
    3. An image <img src=”myImage.jpeg” alt”really great image”/>
      1. Make a new folder called “images”
      2. Find a great image online somewhere and save as to your desktop
      3. File -> upload local files in Cloud9
      4. push again to git
        1. git commit -a -m “my note”
        2. git push
    4. What happened? Didn’t work quite right? Let’s TROUBLESHOOT!
      1. Can we see what is going on by using F12 developer tools in Chrome?
      2. Can we see if everything got up to git the way we wanted? Check out our git hub repo online.
      3. Use Ctrl+F5 to do a forced refresh of your browser
    5. BONUS: If we have time, check out https://www.favicon-generator.org/
      1. Make a favicon
      2. Add it to the root of your website
      3. Add two lines to your header
      4. Commit, push and check out your site!
  7. Awesome! Share your site URL on Slack so we can all see it!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.