Skip to content

Latest commit

 

History

History
68 lines (48 loc) · 4.25 KB

unit-2-lesson-05.md

File metadata and controls

68 lines (48 loc) · 4.25 KB

Lesson 2.5: Stylesheets & Documentation


Lesson Materials

📖 Upload as Material in Google Classroom:

📝 Upload as Assignment in Google Classroom (5 points):


Key Points

This lesson focuses on two key points: how to link CSS to HTML - both internally using the <style> tag and externally using the tag and it emphasizes the vital role of documentation in coding with hands-on practice.

  • 👋 Welcome (5) :

    • Welcome the students and introduce the day's objectives, focusing on understanding documentation and working with stylesheets.

  • 🖍️ Stylesheets (10) :

    • Teach students the basics of linking CSS to HTML both internally and externally.
      • Internal CSS: Explain how to use the <style> tag to include CSS directly in the HTML document.
      • External CSS: Teach how to link an external CSS file using the tag inside the tag.
    • Provide examples of linking both internal and external CSS.

  • 💻 Code Along (5) :

    • Guide students through the process of coding along with you in the code-along.html file.
    • As you write code, ensure the students are writing along with you, and provide support if needed.

  • 📑 Documentation (8) :

    • Explain the importance and usage of documentation in software development.
    • Explain what documentation is and its role in understanding, using, and debugging code.
    • Introduce the Code Nation Coding Guides and W3Schools as valuable resources.
    • Highlight Bootstrap, a CSS framework, and how to import it using the tag.

  • 💻 Code Solo (12) :

    • Allow students to practice individually by following tasks related to Bootstrap in the code-solo.html file.
    • Guide students to getbootstrap.com and instruct them on the tasks. Provide support if needed.

  • ✨ Exit Ticket & Shout Outs (5)

    • Wrap up the lesson and collect feedback.
    • Direct students to Lesson 2.5 - Stylesheets & Documentation Exit Ticket in Google Classroom.
    • Acknowledge and celebrate students' efforts and achievements.
    • Push Work from Replit to GitHub
    • Ensure students have submitted their exit tickets.

Common Misconceptions

  1. Misconception: Internal and external CSS are the same thing.

    • Clarification: Internal CSS is embedded directly within an HTML file, using the <style> tag. External CSS is stored in a separate file and linked to the HTML file with the <link> tag. External CSS allows for consistency across multiple pages, whereas internal CSS only affects the file it's located in.

  2. Misconception: Documentation is only for those who write the code.

    • Clarification: Documentation serves multiple purposes, including helping others understand, use, debug, and collaborate on the code. It's an essential resource for anyone working with the code, not just the original author.

  3. Misconception: Linking to an external CSS file is complicated and requires special tools.

    • Clarification: Linking to an external CSS file is done with a simple <link> tag within the HTML's <head> section. No special tools are required, and it allows for more modular and maintainable code.

  4. Misconception: Using resources like W3Schools or Bootstrap is cheating or unprofessional.

    • Clarification: Utilizing documentation and frameworks like Bootstrap is a standard practice in the industry. They help developers work more efficiently and learn new skills. It's not considered cheating; it's part of the job.

  5. Misconception: All styles have to be written from scratch, and using a framework like Bootstrap limits creativity.

    • Clarification: Frameworks like Bootstrap provide a starting point and can significantly speed up development. They don't limit creativity but allow developers to build on a solid foundation. Custom styles can always be added to override or supplement the framework's styles.

Additional Materials

  • n/a