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
  • Lesson Resources
  • Presentations
  • Homework Suggestion
  • Practice Day (Saturday)

Was this helpful?

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

2 - Responsive Web and layout

Responsive Web and layout

Previous1 - Semantic HTML and CSSNext3 - Bootstrap

Last updated 3 years ago

Was this helpful?

Lesson Resources

Presentations

    • Created by Birmingham

    • Created by Birmingham

Homework Suggestion

Remember copy the Homework to the at the end of the class

1) Complete Flexbox Froggy and CSS Grid Garden (6 hours)

Flexbox Froggy is a really fun way of learning how Flexbox works.

You should complete all the levels

Grid Garden is a really fun way of learning how Grid layout works.

You should complete all the levels

2) Flexbox 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.

Push the changes yo your Github account

Practice Day (Saturday)

  • Finish the Karma-clone project to look as awesome as you can

  • Finish Apple clone workshop.

the changes to your repository in Github

👩‍💻
https://github.com/CodeYourFuture/HTML-CSS-Coursework-Week2
Push
Week 2 - HTML & CSS 2 - Responsive Design [Google Slides] - 28/05/2020
Week 2 - Flexbox & Media Queries [Google Slides] - 28/05/2020
Trello
Grid Garden
Flexbox Froggy
Logo