Lesson Plan

Resources → Subject Notes → Information Communication Technology ICT → Notes
Lesson Plan
Grade: Date: 17/01/2026
Subject: Information Communication Technology ICT
Lesson Topic: Know and understand the reason relative file paths must be used for attached stylesheets
Learning Objective/s:
  • Describe why relative file paths are preferred for linking stylesheets.
  • Compare absolute and relative paths in terms of portability and maintenance.
  • Apply correct relative path notation to link a stylesheet from various folder levels.
  • Identify and correct common mistakes when writing relative paths.
  • Test and verify that a stylesheet loads correctly after moving files.
Materials Needed:
  • Computer with internet access
  • Code editor or IDE (e.g., VS Code)
  • Sample project folder containing HTML and CSS files
  • Projector or interactive whiteboard
  • Handout showing folder hierarchy and path examples
  • Web browser for testing
 Introduction:
Begin with a quick visual of a web page that looks unstyled because the stylesheet link is broken. Ask students what might have caused the issue and link it to file locations they already know. State that by the end of the lesson they will be able to write reliable relative paths and check their work against a success criteria sheet.
Lesson Structure:
  1. Do‑now (5'): Examine a broken stylesheet link and note possible reasons.
  2. Mini‑lecture (10'): Explain absolute vs. relative paths and why relative paths improve portability.
  3. Guided practice (15'): Demonstrate writing relative paths for the provided folder hierarchy and inserting the <link> tag.
  4. Pair activity (10'): Students create their own HTML file and correctly link a CSS file using relative notation; teacher circulates for feedback.
  5. Common‑mistakes quiz (5'): Quick Kahoot/handout where learners spot errors such as leading slashes or wrong “..” counts.
  6. Consolidation (5'): Review key take‑aways, answer questions, and summarise the testing steps.
Conclusion:
Recap the benefits of using relative paths and the steps to construct them correctly. Students complete an exit ticket by writing the relative path for a given HTML‑CSS scenario. For homework, they will document the folder structure of a personal website project and create a reference sheet of all required relative paths.