Teaching / Intro to Web Dev / 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:

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:

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:

HTML

Estimated time: 2 hours

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

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: