How to Create Custom Lesson Topic Templates in Web Dev for Beginners

Create custom lesson topic templates by copying the lesson-template/ folder, renaming it, and replacing the placeholder content in README.md and assignment.md to match your curriculum needs.

The Web-Dev-For-Beginners repository provides a standardized scaffolding system for educational content. When you create custom lesson topic templates, you leverage the existing markdown structure to ensure consistency across videos, quizzes, and hands-on assignments while maintaining compatibility with the project's translation workflow.

Copy the Template Folder

Start by duplicating the master template located at lesson-template/ in the repository root. If you are building localized content, use the equivalent folder inside translations/<lang>/lesson-template/ instead.

Use a recursive copy command to create your new topic directory:

cp -R lesson-template my-custom-topic

Rename the folder to reflect your specific subject matter, such as css-grid-basics/ or api-integration/. This folder name becomes the URL path for your lesson, so use kebab-case for readability.

Customize the README.md Structure

The README.md file inside your new folder drives the entire lesson page. Open this file and replace all placeholder tags—such as [Lesson Topic], [Pre‑lecture quiz], and [Post‑lecture quiz]—with your actual content headings.

Fill in the required sections:

• Introduction: Provide context and learning objectives
• Prerequisite: List required knowledge before starting
• Preparation: Outline setup steps and tooling
• Topic sections: Break down the lesson into numbered segments with code examples

Update the embedded media links to point to your specific video-url and quiz URLs. The template expects quiz links in both the pre-lecture and post-lecture sections to assess knowledge retention.

Example: Filled README.md

# Introduction to CSS Grid

![Embed a video here](https://www.youtube.com/watch?v=abc123)

## Pre‑lecture quiz

[Take the quiz](https://example.com/quiz/pre‑css‑grid)

### What you'll learn

- How CSS Grid works
- Building responsive layouts
- Grid template areas

### Introduction

CSS Grid is a powerful layout system that allows you to create complex, two‑dimensional designs with minimal code...

### Prerequisite

You should be comfortable with basic CSS selectors and the box model.

### Preparation

- Install Visual Studio Code
- Open the `grid‑starter/` folder

---

## Topic 1 – Defining a Grid Container

```html
<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

✅ Knowledge Check – What does display: grid do?

Topic 2 – Placing Items with Grid Lines

Topic 3 – Using grid-template-areas

🚀 Challenge – Build a responsive photo gallery using CSS Grid.

Post‑lecture quiz

Take the quiz

Review & Self‑Study

• MDN: CSS Grid Layout

Assignment Due 05/24: Create a portfolio page with CSS Grid

## Add Assignments and Assessments

Create the [`assignment.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/assignment.md) file to provide homework and assessment criteria. Replace `[Assignment Name]` with a descriptive title and include clear instructions alongside a grading rubric.

```markdown

# Portfolio Page Assignment

## Instructions

1. Fork the repository and create a new branch `css-grid-portfolio`.
2. In the `portfolio/` folder, build a responsive page using CSS Grid that includes:
   - A header, navigation, main content area, and footer.
   - At least three different grid layouts (e.g., gallery, blog post, landing page).
3. Deploy the page to GitHub Pages.

## Rubric

| Criteria                | Exemplary                                   | Adequate                               | Needs Improvement |
|-------------------------|---------------------------------------------|----------------------------------------|-------------------|
| Grid usage              | Advanced, semantic grid areas, responsive   | Basic grid layout, works on desktop    | No grid, fallback |
| Visual design           | Polished, consistent styling                | Acceptable, minor inconsistencies       | Unstyled / broken |
| Accessibility           | Semantic HTML, ARIA labels                 | Mostly accessible                      | Not accessible |

Update Navigation and Register Translations

Commit your new folder to the repository, then register the lesson in the navigation system. Edit docs/_sidebar.md to add a link to your new topic so learners can discover it in the documentation site.

For multilingual courses, mirror your custom template structure inside translations/<lang>/lesson-template/ following the same file naming conventions. This ensures the translation workflow can process your content into other languages without structural modification.

Summary

• Copy the lesson-template/ folder and rename it to create the scaffold for your new lesson.
• Customize README.md by replacing placeholder titles and adding your video, quiz, and topic content.
• Create assignment.md with specific instructions and a rubric for student assessment.
• Register the new lesson in docs/_sidebar.md to make it discoverable in the curriculum navigation.
• Localize by placing translated versions in translations/<lang>/ to maintain the uniform structure across languages.

Frequently Asked Questions

Where is the master lesson template located?

The master template resides at lesson-template/README.md in the repository root, with a corresponding assignment.md in the same folder. Localized versions exist under translations/<lang>/lesson-template/ for each supported language.

Do I need to create an assignment file for every lesson?

No, the assignment.md file is optional but recommended. If you include it, link to it from the main README.md using relative paths like [Assignment Name](assignment.md) so the documentation site resolves the link correctly.

How do I add my custom lesson to the course navigation?

Update docs/_sidebar.md by adding a new markdown link pointing to your lesson folder. The sidebar file controls the left-hand navigation menu in the Docsify-powered site, ensuring learners can browse to your custom content.

Can I modify the template structure for specialized topics?

While you can extend the template, maintaining the standard sections—Introduction, Prerequisite, Preparation, and Topic—ensures compatibility with the translation pipeline and provides a consistent learning experience. If you must deviate, document the changes in your pull request for curriculum maintainers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}