LogoLogo
Class SchedulesOfficial WebsiteMigraCode SyllabusHow to teach tech
  • 👩‍🏫Welcome to the MigraCode Volunteer Guide
  • General information
    • ℹ️About MigraCode
    • 🖱️Working with our students
    • 👥Volunteering roles
      • Teaching volunteer roles
      • Mentoring volunteer roles
      • Slack volunteer roles
  • Teaching instructions
    • 🖥️Basic computer literacy
      • Lesson 1: Introduction and Browser
      • Lesson 2: More browsing and Internet
      • Lesson 3: Mail and a taste of Drive
      • Lesson 4: Google Docs
      • Lesson 5: Google sheets
      • Lesson 6: Google slides
    • 👩‍💻Web development
      • Class Example
      • Teaching instructions
        • Introduction
          • 1 - Terminal and Visual Code
          • 2 - Git and Github
        • HTML/CSS
          • 1 - Semantic HTML and CSS
          • 2 - Responsive Web and layout
          • 3 - Bootstrap
        • JavaScript I
          • 1 - Hello Javascript
          • 2 - Expressions and loops
          • 3 - Arrays and callbacks
        • Javascript II
          • 1 - Javascript in the browser
          • 2 - Objects
          • 3 - Introduction to APIs
        • Javascript III
          • 1 - HTTP Protocols and ES6
          • 2 - Workshop Part 1
          • 3 - Workshop Part 2
        • React
          • 1 - Hello React
          • 2 - Reacting to changes
          • 3 - Fetching Data
        • NodeJS
          • 1 - Node and Express 101
          • 2 - APIs in Node
          • 3 - Workshop
        • Databases
          • 1 - Introduction to SQL
          • 2 - SQL with Node
          • 3 - CRUD with SQL and Node
    • 🛠️Professional Skills
      • Module 1: Soft skills
      • Module 2: Employability
      • Module 3: Working in projects
  • Useful Links
  • Class Schedules
  • Official Website
  • MigraCode Syllabus
  • How to teach tech
Powered by GitBook
On this page
  • Overview
  • Resources
  • Homework suggestion
  • 1) Responsive Cake Website Project (4 hours)
  • Practice Day (Saturday)

Was this helpful?

Export as PDF
  1. Teaching instructions
  2. Web development
  3. Teaching instructions
  4. HTML/CSS

3 - Bootstrap

Previous2 - Responsive Web and layoutNextJavaScript I

Last updated 3 years ago

Was this helpful?

Overview

This outline provides tips to help mentors guide students to the best answers or outcomes for the lesson topics and exercises.

Open-source HTML/CSS Frameworks

Using the , 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 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.

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.

Resources

Homework suggestion

1) Responsive Cake Website Project (4 hours)

In this repository you will find a project for you to complete

Before you start, make sure you fork the repository to your Github account.

Practice Day (Saturday)

  • Finish the Online Shop project to look as awesome as you can

  • Push the changes to your repository in Github

Finish bootstrap assignment.

👩‍💻
Navbar color schemes
Card
Bootstrap Demo
https://github.com/CodeYourFuture/HTML-CSS-Coursework-Week3
newsweek.com