How-to-html-and-css

For Students

You have been send to this repository, that must mean you have been building a big part of your own website already! Have look around, compare this code to your own and create an opinion on what you like and what you would do differently.

For Teachers

Lesson Plan:

Opening Hook for Learning (How will I gain students' attention?) (15 MIN)

• Assignment for students: Gather everything you know about HTML, CSS and Clean Coding. Work in groups of two or three, and write the answer to the following questions on the whiteboard:

  • What do you know about the subjects?
  • What can HTML do? What can't it do?
  • What can CSS do? What can't it do?
  • What is important about writing clean code?
  • What are examples of clean code?
  • DO you know any helpful websites when you are writing HTML/CSS?

• Assignment for teacher: Structure the words on the whiteboard: ask students to explain what questions their answers belong to and elaborate on what they have written. (Warn for websites with mistakes, stack overflow)

Direct Instruction (How will I present new material and make learning relevant?) (15 MIN)

• HTML and CSS = what user sees in browser. All frontend is based upon these languages.

• Clean Code = what makes your code readable, how you can colaborate, grow, looks professional

• You will build a website: 'How To HTML & CSS'.

  • Working in groups of three
  • We will mimic the working environment, where you just have to figure things out yourself
  • We do that because you all should have the knowledge from the preparatory work, and everything is googable
  • We will help you with the structure - see readest

• This are learning goals (show page reader), most important:

  • Basic structure of html/css
  • How to set up/finish a project
  • Working together (tools, writing clean code)
  • Reading (assignment, later errors)

• Follow the readest, we help with structure: Set up, advise, Plan, Content (HTML), Refactor/Lunch (Important), Styling, Deployment, Demo.

• Review at 4pm

• 4.45pm Demos and presentation of subjects (by students!)

• if you need HELP?!?! - Google and ask your class mates first!

Guided and Independent Practice

• 11:00 Students start on their website
• 11:20 Remind them it is time to start on HTML
• 12:30 Remind them about lunch time! - Check whether they feel they are on schedule
• 13:30 After lunch give them html from this repository, so they can start refactoring
• 14:30 Remind them it is time to work on CSS
• 16:00 Deploy, prepare presentation
• 16:30 Demos + presentations
• 17:15 Peer review (see evaluation page and this survey) + class evaluation (see questions below, go over results survey.)

Closing (How can I bring closure to summarize learning and enhance retention of the material?)

• Discuss questions peer review
• Ask groups, what went really well?
• What was the most difficult part?
• What did you see at another group that you really liked?
• How did you keep your code DRY and KISS?