# How to Create Custom Lesson Topic Templates in Web Dev for Beginners > Learn to create custom lesson topic templates for Web Dev For Beginners. Copy, rename, and update markdown files to tailor content for your specific curriculum. - Repository: [Microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - Tags: how-to-guide - Published: 2026-02-27 --- **Create custom lesson topic templates by copying the `lesson-template/` folder, renaming it, and replacing the placeholder content in [`README.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/README.md) and [`assignment.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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//lesson-template/` instead. Use a recursive copy command to create your new topic directory: ```bash 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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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 ```markdown # 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
1
2
3
``` ✅ **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](https://example.com/quiz/post‑css‑grid) ## Review & Self‑Study - MDN: [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) **Assignment Due 05/24**: [Create a portfolio page with CSS Grid](assignment.md) ``` ## 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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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//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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/README.md) by replacing placeholder titles and adding your video, quiz, and topic content. - **Create** [`assignment.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/assignment.md) with specific instructions and a rubric for student assessment. - **Register** the new lesson in [`docs/_sidebar.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/docs/_sidebar.md) to make it discoverable in the curriculum navigation. - **Localize** by placing translated versions in `translations//` 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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/lesson-template/README.md) in the repository root, with a corresponding [`assignment.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/assignment.md) in the same folder. Localized versions exist under `translations//lesson-template/` for each supported language. ### Do I need to create an assignment file for every lesson? No, the [`assignment.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/assignment.md) file is optional but recommended. If you include it, link to it from the main [`README.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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.