Course Overview
This self-paced interactive lesson will teach you how to build a basic web page using HTML and style it with CSS. You’ll watch videos, try coding activities, and share your ideas using fun web tools.
Courseware Website Blueprint
This courseware is designed to provide a comprehensive introduction to HTML and CSS, focusing on practical skills and interactive learning.
1. Homepage (index.html)
- Welcome message
- Course overview
- Quick intro to tools and navigation
- Call-to-action: "Start the Lesson" / Site map
- Contact & creator credits
2. Objectives Page (objectives.html)
- Course overview
- Call-to-action: Next" / Site map
- Contact & creator credits
3. Lesson Pages
Lesson_Html.html
- Text: Explanation of HTML basics
- Embedded YouTube video
- Diagram/image of HTML structure
- Objectives listed and formatted clearly
- Embedded code snippet (inline & internal HTML)
- Game Activity
- Interactive practice tools
- Practice coding exercises
- Reflection prompts
Lesson_CSS.html
- CSS introduction and examples
- Embedded CSS video crash course
- Embedded code snippet (inline & internal CSS)
- Diagram/image of CSS box model
- Objectives listed and formatted clearly
- Interactive practice tools
4. Activities Page (Activity.html)
- Interactive practice tools
- Links to Genially (e.g., drag-and-drop or quiz)
- Padlet reflection wall link
- Practice coding instructions or starter code (JSFiddle)
- Interactive coding challenges (e.g., CodePen)
- Socrative embedded quizzes
5. Assessment Page (Assessment.html)
- Instructions for graded activity
- JSFiddle link submission
- Google Form link for evaluation
- Self-check rubric criteria (displayed clearly)
6. Resource Page (Resources.html)
- W3Schools - A great resource for learning web development.
- MDN Web Docs - Comprehensive documentation for web technologies.
- CSS-Tricks - Tips and tricks for working with CSS.
- Download Cheat Sheet (PDF)
- Download JSFiddle Instructions (PDF)