HTML/CSS 3 - Mentor's Outline
This outline provides tips to help mentors guide students to the best answers or outcomes for the lesson topics and exercises.
Resources
Articles
Quizzes
- HTML/CSS Quick Quiz - 19/05/2020
- Created by Scotland and Nate
- HTML/CSS Quick Quiz - 18/04/2020
- Created by Manchester and Anthony Tran
Open-source HTML/CSS Frameworks
Using the Navbar color schemes, use the browser's dev tools to show how changing the navbar classes in the example website changes the look based on Bootstrap.
Using the Card example, try to illustrate the way tags are nested inside of each other in a specific hierarchy. Emphasise the practice of paying close attention to documentation and picking up on minor details.
Git Branching Excercise
A mentor should act as a remote
repository and have a large sheet of paper. Students should have 4-5 sheets of paper.
- The mentor should write their name at the top of the sheet, and write
master
below that. - Students should clone the main sheet on one of their sheets (
git clone
), with their name andmaster
on the sheet. - Students should take a new sheet of paper. Copy their main sheet, and replace
master
withfeature-branch
(git checkout -b feature-branch
). - Students should write their country of origin on their
feature-branch
sheet. Then show it to the mentor (git commit
,git push
and pull request). - The mentor should "merge" each pull request by copying the country of origin onto their sheet.
- Take a moment to indicate how their local sheet have divered from the mentor's sheet.
- Ask the students to take their
master
sheet and copy the mentor's sheet (git checkout master
andgit pull upstream master
). - Have the students take their
feature-branch
sheet, ball it up, and throw it away (git branch -D feature-branch
).
Spend some time with this Git Cheatsheet. Point to your sheets and their sheets and ask them to identify what's in the Upstream Repository, Local Repository, Index and Workspace. Then walk through the whole process from Workspace up:
- A student makes a change on their sheet. This change is in the Workspace.
- A student does a
git add
. This change is now in the Index. - A student does a
git commit
. This change is now in the Local Repository. - A student does a
git push
. This change is now in the Remote Repository.
Personal Websites
The goal of this exercise is to identify students who are struggling to keep up. Try to identify where a student is struggling:
- Can they find their files quickly?
- Are they using the command line when appropriate?
- Do they understand how their HTML and CSS interact?
- Do they seem to understand syntax, or are they writing code in the wrong place?
If you find a student who is struggling with any of these basics, try to work through them together, then give them a short assignment where they need to do something on their own.
There will be several students who have the basics down. If they do, push them on some of the higher-level abstract concepts, like re-usable HTML/CSS components, and using CSS specificity cleverly (eg - basic and primary buttons). Beyond that, let them read up on HTML Forms (links in the resources), do some of the advanced suggestions in the syllabus, or challenge them to read and implement BEM naming syntax.