Teaching
/
Intro to Web Dev (Spring 2022)
/
Setup and HTML - Week 01

Setup and HTML - Week 01

Welcome to week 1 of Intro to Web Dev! This week is all about setting up GitHub and your coding environment, and then learning about HTML to create your own webpage.

Work through the activities in this page to complete the week!

Goals

This week has three main goals:

  1. Set up your coding environment.
  2. Learn about HTML and use it to create and deploy a webpage.
  3. Get used to how this class works.

GitHub Setup

Estimated time: 30 minutes

GitHub is a website that lets you post your code so you can keep it organized and share it with other people. We’ll be using GitHub to share our code with each other.

First, work through this guide:

GitHub Setup GitHub Setup

Set up GitHub and get ready to code!

Environment Setup

Estimated time: 30 minutes

Then, if you have your own computer that lets you install programs and download files, then work through this guide:

Desktop Setup Desktop Setup

Set up your environment and use HTML to create a webpage.

If you have a computer that doesn’t let you install programs and download files (like a Chromebook), or if you’re using a shared computer, work through this guide instead:

Replit Setup Replit Setup

Set up your environment using Replit.

HTML

Estimated time: 2 hours

Now that you have your environment set up, you’re ready to start learning about web development!

HTML - Week 01 HTML - Week 01

Use HTML to create a webpage.

Quiz

  1. In your own words, what are HTML tags?
  2. What’s your favorite HTML tag? What does it do? Note: There is no wrong answer to this question. If you don’t have a favorite, pick one you used most often, or one that surprised you.
  3. What does the <samp> tag represent? Note: This tag was not mentioned in any of this week’s content. I’m testing that you can research and read about new tags you haven’t seen before. Feel free to use a search engine and resources like W3SChools and MDN to answer this question.
  4. In your own words, what is GitHub? How are we using it in this class?
  5. In your own words, how do you create, edit, and deploy a webpage?

Project

Estimated time: 1 hour

Now you’ve seen the fundamentals of HTML and HTML tags. More importantly, you know how to use tools like Google, W3Schools, and MDN to find more information.

To practice all of that, modify the files in the week-01-html directory of your project repo.

Styling Content

This week is all about setting up your environment and learning HTML, which tells your browser what types of content to display. Your browser has some default rules about how to style different types of content. For example, headings are large and bold, and links are blue and underlined.

If you want to customize the styles of your content, like changing colors or layout, you’ll need to go beyond HTML and use CSS.

For now, focus on HTML without worrying too much about styling. You’ll learn about CSS next week!

Checklist

  1. Download GitHub Desktop
  2. Fork the class’s project repository and enable GitHub Pages
  3. Clone the repo, either using GitHub Desktop or Replit
  4. Make a small change to the top-level index.html file, push it to GitHub, and see the change in your GitHub Pages site
  5. Read through the HTML tutorial
  6. Follow the directions in the week-01-html directory of your project repo
  7. Push those changes to GitHub and confirm you can see them in your GitHub Pages site
  8. Get ready to present your work. Make sure your camera and microphone work!

Optional Bonus Challenge

If you finish all of the above and want some more practice, try creating a GitHub profile README by following this guide:

GitHub Profile README GitHub Profile README

Make your GitHub profile your own.