WebCraft — Frontend Course

Highlights

How to Use

1. Choose a lesson

   Open the course menu and select a module and lesson, or use Start learning on the overview. The lesson area presents the objective, explanation, examples, practical tasks, and navigation to adjacent lessons.

2. Work through the material

   Read the lesson and complete its listed tasks. Use the quick check to test understanding; selecting an answer immediately displays feedback and contributes to the visible course progress.

3. Write and run code

   Switch among the HTML, CSS, and JS tabs in the built-in editor, modify the starter code, and press Run. The preview pane renders the result, while the Console tab captures script messages and errors.

4. Compare and refine

   Use Show solution when a reference implementation is needed, Reset to restore the exercise starter, and Review for optional AI-assisted feedback after configuring a compatible API key in the reviewer settings.

5. Complete the portfolio

   Continue through the modules and apply earlier exercises to the capstone. The final lesson provides a checklist for semantic structure, navigation, project cards, an about section, contact validation, responsive behavior, and end-to-end testing.