📄 Webpages!

Coding Camp

👋 Introduction

About Me

Name

(Prof.) Calvin (Deutschbein)

Email

ckdeutschbein

Website

cd-public.github.io

Field

Hardware Security, Computer Systems

Pronouns

They/Them

Goals

1. Create a webpage
2. Make it well-formed
3. Make it stylish
4. Make it graphical
5. Make it interactive

Technologies

• GitHub!
  • The worlds #1 online collaboration platform!
• Three languages.
  • HTML - for text.
  • CSS - for style.
  • JavaScript - for action.

Today

• Github!
• HTML!
• Create a 📄 webpage

📒 Account

What?

• Create a GitHub account!
  • Use whatever name and password you want…
    • But make sure you remember them!
  • I really recommend using your .edu email address!
    • You get extra goodies!

How?

• Creating an account on GitHub
• Or:
  • Go to GitHub.com
  • Enter your email.
  • Click Sign up for GitHub
  • Follow the steps!

Why?

• GitHub is a great tool for:
  • Learning new technologies.
  • Sharing your projects.
  • Working on projects together.
  • Creating websites or portfolios.
• I wish I’d learned about it sooner!

🗃️ Repository

What?

• Create a GitHub repository!
  • Repositories are how GitHub stores the information in a website
  • Use whatever name you want…
    • But make sure you remember it!
  • (Someday) it will live at:
    • <account name>.github.io/<repository name>
    • Check out cd-example.github.io/bug-free-sniffle/

How?

• Quickstart for repositories
• Or:
  • Go to GitHub.com
    • It should look different now that you’re logged in!
  • Click New
    • Give it a name
    • Add a README file
    • Click Create Repositry

Why?

• Store files that make up a webpage:
  • “HTML” page “content”.
  • “CSS” page “formatting”.
  • “JS” (JavaScript) “interactivity”.
  • We can use images, like PNGs or SVGs.

An image

🌌 Codespaces

What?

• Open a GitHub codespace!
  • Online code editor
    • Google Docs for code.
  • Has a lot of options.
    • We won’t use most of them.
    • There’s plenty of room to grow!

How?

• Creating a codespace for a repository
• Or:
  • On the page for the respository you created…
    • github.com/<account name>/<repository name>
  • Click <> Code 🔽
  • Click the “Codespaces” tab.
  • Click Create codespace on main
  • A new window will open… slowly.

Why?

• Edit files that make up a webpages:
  • “HTML” page “content”.
    • We’ll do this one first!
    • It is the foundation of all webpages!

👋 Hello, World!

What?

• Now: The first achievement when coding!
• “Hello, world!”
• Within GitHub codespaces, create a new file.
  • It must be called index.html
  • HTML for “hypertext markup language”
  • The language of the internet!

How?

• On the left side of the screen, ensure “Explorer” is opened.
• Two overlapping files
• A bar will pop out and at the top there will be a few icons.
  • Click the file with a + on it.
  • If missing, “mouseover” repository name!
• Type index.html as the name and press enter.
• A new file will open up, type “Hello, world!”

👀 Visually

Why?

• We want to be able to determine what appears on our webpage.
• For now, it matters less what we change than that we can change the content.
• We’ll learn more soon!

💾 Save your work!

What?

• We need changes made in codespaces to become changes in the repository.
  • You may wonder why this isn’t automatic: I’m not sure!
• To do so we will change from the “Explorer” activity to the “Source Control” activity
  • It’s the technical term for “keeping track of code”
• Lots of paperwork!

How?

• Click the
• Click ✓ Commit
  • I get a box pop-up and say Always

🚨 Alert!

• This pops up :

COMMIT_EDITMSG

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch main
# Your branch is up to date with 'origin/main'.
#
# Changes to be committed:
#   new file:   index.html
#

Caution

We must name our changes.

🤝 Resolve

• Add any message to the first line:

COMMIT_EDITMSG

Hi it's me :)
### Please enter...

• Click the ✓ on the top right.
• Click Sync Changes 1 ↑
• Now go back to the repository page.
  • There should now be an index.html there!
  • You may need to refresh/reload.

Why?

• We don’t want just anyone or anything publish to a website we administer.
  • Spam, broken links, stale memes, etc.
  • Mostly GitHub doesn’t want that and won’t leave it up to us!
• This process requires every change to be intentional.
  • I would rather it be easier, but that’s okay!
  • It gets better every year!

📺 Publish

What?

• Let’s take index.html and make it a webpage!
• We’ll use “GitHub Pages”
  • Not too hard to set up…
  • I use it a lot for fun 😬
• You’ll be able to show anything you do to friends and family!

How?

• Creating a GitHub Pages site
• Or:
  • Back on the repository page… - <account name>.github.io/<repository name>
  • We’ll change repository settings.
    • On the top, click on Settings
    • On the left, click on Pages
    • In the middle, under branch, change “None” to “Main” via the drop-down menu.

👀 Visually

Why?

• We get to examine what we did!

🔬 Examine

What?

• Check our work.
• Learn how to see where updates will show up.
  • A few minutes after “Commit+Sync”
• Tell ourselves we did a good job!

How?

• <account name>.github.io/<repository name>
• Or:
  • Back to <> Code
  • Bottom right, under “Deployments”, click github-pages
  • There will be a link on this page under the heading github-pages

Why?

• There’s many ways to publish online but this is…
  • Free.
  • Relatively quick (minutes, not hours).
  • Powerful enough for interactive, public webpages.
• It also builds a lot of valuable skills!

Today

• Github!
• HTML!
• Create a 📄 webpage