Lesson Weekend

This week we will be learning the building blocks of making basic web pages: HTML and CSS. We will also focus on using the command line and Git to create a daily workflow for our coding projects.

Daily Goals

Everyone learns at a different pace. Understanding is the most important goal every day. If you feel like you will not be able to complete all of the lessons in a given day, talk to a teacher about ways to ensure that you are covering the day's objectives. And always focus on understanding the concepts at hand, not finishing the work as quickly as possible.

Lessons that have "Homework" in the title indicate that the work is expected to be completed at home and not in class.

Plan

We will begin this week by practicing the command line, Git, Github, and exploring basic HTML. We'll create READMEs to include extra information with our projects on Github. We'll also learn a formatting language called Markdown to format READMEs. Then, we'll explore basic CSS to add styling to our web pages, and actually publish our sites online! Later in the week we will dive deeper into CSS by using divs and spans, floats, cascading, classes, ids, and the box model. Finally, we'll explore a tool called Bootstrap that offers even more powerful styling capability. You're in for a great time!

At the end of this section, you will be able to:

  • Navigate the command line to access and create directories and files
  • Use Git and GitHub to track the creation of static webpages
  • Create a static webpage using HTML
  • Style a static webpage using custom CSS rules in a linked stylesheet
  • Create a project README.md in Markdown
  • Apply Bootstrap rules and classes
  • Adapt a webpage for responsive design

Independent Project Objectives

At the end of this section you will complete an independent project. Your instructor will review this project for the following objectives:

  • Use the most common HTML tags:
    • p, h, ul, ol, li, em, strong, a, img, div, span
  • Use Bootstrap classes to style your page
  • Create a custom-made stylesheet that uses cascading, the box model, and floats
  • Code is clean, well-refactored, and easy-to-read. This includes correct indendation, spacing, and including only necessary comments and debugging tools.
  • Make Git commits regularly with clear messages that finish the phrase "It will…"
  • Add a README to the GitHub repository that includes:
    • author name
    • project or program name
    • description of program
    • program setup instructions
    • link to live version of site on GitHub Pages
    • copyright and license information