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
  • Lesson Objective
  • Comments and Tips
  • Exercises solutions
  • Presentations
  • Important Links
  • Homework Suggestion
  • Practice Day (Saturday)
  • Feedback

Was this helpful?

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

1 - Semantic HTML and CSS

PreviousHTML/CSSNext2 - Responsive Web and layout

Last updated 4 years ago

Was this helpful?

If this is your first day, check the first day tips

Lesson Resources

Lesson Objective

This is an opportunity for any students who are struggling to get another pass at the basics. Even if it seems like some students get it quickly, try not to rush through this section.

Comments and Tips

HTML Syntax

When conducting the parent/child tags exercise, don't forget to point out that the first <p> tag is both a parent and a child.

CSS Selectors

Students may need more or less review depending on how much they remember from their application process. If students are struggling with the basics, have them go through this , starting with the CSS Syntax lesson. Mentors should help guide them through and identify where they're struggling.

Students should set the button background color using the .btn-primary selector, and adjust the white button using the .btn-secondary selector. If they use the .btn selector, they'll effect both buttons. When they do that, use it as a lesson in how Object-Oriented CSS works and how to choose the right selector.

Exercises solutions

Second exercise, the answer will look something like this:

.nav-link {
  border: 1px solid transparent;
}
.nav-link:hover,
.nav-link:focus {
  border-color: #ce5f31;
}

Presentations

    • Created by Birmingham

Important Links

Homework Suggestion

1) Finish the Zoo Project

  • Finish all the steps of the project (1 Hour)

  • Commit and Push all the changes to your Github account

2) Advanced CSS Selectors

3) HTML Reading (1 hour)

4) Portfolio Project (3 hours)

Practice Day (Saturday)

  • Check together the result of the Zoo Project and the Portfolio Project (1 hour)

  • Solve any doubt about the content

  • Split into groups and keep working on the next steps of the Portfolio Project (3 hour)

Feedback

We can always improve thanks to your feedback, you can use this document to send your ideas or suggestions on every week. This document will help us to improve Syllabus and this guide

in the Instructor's Guide

to copy the homework

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

CSS Diner (3 hours): The Flukeout Game online game will help you learn Advanced CSS Selectors.

Read this page on HTML syntax. It gives you a good overview of how HTML works inside a website.

In this repository you will find the Portfolio Project, complete the Step 1

👩‍💻
CSS Introduction course
Week 1 - CSS [Google Slides] - 28/05/2020
Syllabus
Instructor's Guide
Suggested Homework
Trello board
Trello
https://flukeout.github.io/
https://marksheet.io/html-syntax.html
https://github.com/Migracode-Barcelona/HTML-CSS-Portfolio-Project