Skip to content
This repository has been archived by the owner on Nov 12, 2020. It is now read-only.

Latest commit

 

History

History
81 lines (45 loc) · 2.76 KB

LESSONPLAN.md

File metadata and controls

81 lines (45 loc) · 2.76 KB
Raw

Lesson Plan Week 2

Agenda

The purpose of this class is to introduce to the student (1) the basics of using GIT, and (2) the basics of grid-based thinking and using flexbox:

  • Basic GIT commands

  • Introducing GitHub

  • Setting up an SSH key pair

  • Introducing grid-based thinking

  • The problem Flexbox solves

  • Basic flexbox commands

Core Concepts

FIRST HALF (12.00 - 13.30)

  1. Introduction to GIT
Explanation
  • GIT is software that allows us to keep track of the changes within our files
  • Imagine having written complex code that messed everything up, GIT allow us to return to a previous state where everything was still working
  • It can be used through the command line interface (CLI) or using a graphical user interface (also known as GUI): SourceTree, SmartGit, etc.
Example
Exercise

Create a new local repository and tell students to do the same

Show the hidden file .git in the folder

  • When you want to save your work, you can make a snapshot of your workspace: this is called 'committing your work', which is another way of saying 'saving your work'

Create a .txt file through the CLI and commit it to the local repository

Delete the file and commit that change

  • GIT allows us to revert our workspace to a previous commit. We can look for the right commit using git log, git checkout and git revert

Show the student the process of reverting back to the first commit

  • GitHub is a development platform that allows us to store a copy of our code online (in developer terms: remote)
  • Main benefits are (1) store our code online, (2) let's us easily work together with others in the same repository

Ask students to create an account if they haven't

  • In order to securely use GitHub we need to create an SSH key
  • SSH keys allow GitHub to identify us as a safe connection

Create an SSH key through the CLI

Link the SSH key with your GitHub account

Show how to clone the HTML-CSS-GIT repo using SSH

Ask students to create an SSH key, link it to their account and clone the repo

Essence

SECOND HALF (14.00 - 16.00)

  1. Grid-based thinking and Flexbox
  • Thinking in grids

Look at the following website and dissect it thinking in grids

  • Flexbox allows us to easily align elements on the page
  • It replaces float-based web design
  • It is activated with the display: flex CSS property, after you can make use of flex-specific properties

Take a look at the following CodePen with students

Rebuild the navigation bar, center image and reponsive website layout from this example

Ask student to rebuild the navigation bar using Flexbox