Skip to content

Latest commit

 

History

History
82 lines (48 loc) · 2.74 KB

LESSONPLAN.md

File metadata and controls

82 lines (48 loc) · 2.74 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)

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)

2. Grid-based thinking and Flexbox

Explanation

  • 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

Example

Take a look at the following CodePen with students

Look at the following website and dissect it thinking in grids

Excercise

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

Play the game! : https://flexboxfroggy.com/

Essence