Frontend Development practice

Filter by difficulty, use hints, reveal solutions and save attempts locally.

1. Practice Frontend Introduction by building one step of a high-performance frontend listing page and checking the result.

code-writing
beginnerFrontend Introduction

1. Start from the Frontend Introduction lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice Semantic HTML Structure by building one step of a high-performance frontend listing page and checking the result.

code-fix
beginnerSemantic HTML Structure

1. Start from the Semantic HTML Structure lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Advanced CSS Selectors by building one step of a high-performance frontend listing page and checking the result.

output
beginnerAdvanced CSS Selectors

1. Start from the Advanced CSS Selectors lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice CSS Flexbox Layout by building one step of a high-performance frontend listing page and checking the result.

fill-blank
beginnerCSS Flexbox Layout

1. Start from the CSS Flexbox Layout lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice CSS Grid Layout by building one step of a high-performance frontend listing page and checking the result.

true-false
beginnerCSS Grid Layout

1. Start from the CSS Grid Layout lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice Responsive Web Design by building one step of a high-performance frontend listing page and checking the result.

mini-project
beginnerResponsive Web Design

1. Start from the Responsive Web Design lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Tailwind CSS Integration by building one step of a high-performance frontend listing page and checking the result.

mcq
beginnerTailwind CSS Integration

1. Start from the Tailwind CSS Integration lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice JavaScript DOM Operations by building one step of a high-performance frontend listing page and checking the result.

code-writing
beginnerJavaScript DOM Operations

1. Start from the JavaScript DOM Operations lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Asynchronous JS Fetch by building one step of a high-performance frontend listing page and checking the result.

code-fix
beginnerAsynchronous JS Fetch

1. Start from the Asynchronous JS Fetch lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice State Management Concepts by building one step of a high-performance frontend listing page and checking the result.

output
beginnerState Management Concepts

1. Start from the State Management Concepts lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice React Framework Core by building one step of a high-performance frontend listing page and checking the result.

fill-blank
intermediateReact Framework Core

1. Start from the React Framework Core lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice Vite Build Tool by building one step of a high-performance frontend listing page and checking the result.

true-false
intermediateVite Build Tool

1. Start from the Vite Build Tool lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Component Architecture by building one step of a high-performance frontend listing page and checking the result.

mini-project
intermediateComponent Architecture

1. Start from the Component Architecture lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Single Page Apps routing by building one step of a high-performance frontend listing page and checking the result.

mcq
intermediateSingle Page Apps routing

1. Start from the Single Page Apps routing lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice CSS in JS styled by building one step of a high-performance frontend listing page and checking the result.

code-writing
intermediateCSS in JS styled

1. Start from the CSS in JS styled lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Form Validation client by building one step of a high-performance frontend listing page and checking the result.

code-fix
intermediateForm Validation client

1. Start from the Form Validation client lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice Web Accessibility ARIA by building one step of a high-performance frontend listing page and checking the result.

output
intermediateWeb Accessibility ARIA

1. Start from the Web Accessibility ARIA lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice Frontend Performance Image by building one step of a high-performance frontend listing page and checking the result.

fill-blank
intermediateFrontend Performance Image

1. Start from the Frontend Performance Image lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice Browser Caching Storage by building one step of a high-performance frontend listing page and checking the result.

true-false
intermediateBrowser Caching Storage

1. Start from the Browser Caching Storage lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Web Performance Metrics by building one step of a high-performance frontend listing page and checking the result.

mini-project
intermediateWeb Performance Metrics

1. Start from the Web Performance Metrics lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice SEO Meta Tags Optimization by building one step of a high-performance frontend listing page and checking the result.

mcq
advancedSEO Meta Tags Optimization

1. Start from the SEO Meta Tags Optimization lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice Testing Frontend Jest by building one step of a high-performance frontend listing page and checking the result.

code-writing
advancedTesting Frontend Jest

1. Start from the Testing Frontend Jest lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Module Bundlers Webpack by building one step of a high-performance frontend listing page and checking the result.

code-fix
advancedModule Bundlers Webpack

1. Start from the Module Bundlers Webpack lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice TypeScript in Frontend by building one step of a high-performance frontend listing page and checking the result.

output
advancedTypeScript in Frontend

1. Start from the TypeScript in Frontend lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice API Consumption Async by building one step of a high-performance frontend listing page and checking the result.

fill-blank
advancedAPI Consumption Async

1. Start from the API Consumption Async lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice CSS Transitions Keyframes by building one step of a high-performance frontend listing page and checking the result.

true-false
advancedCSS Transitions Keyframes

1. Start from the CSS Transitions Keyframes lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Global State Context by building one step of a high-performance frontend listing page and checking the result.

mini-project
advancedGlobal State Context

1. Start from the Global State Context lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice NextJS App Router Basics by building one step of a high-performance frontend listing page and checking the result.

mcq
advancedNextJS App Router Basics

1. Start from the NextJS App Router Basics lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice Frontend Best Practices by building one step of a high-performance frontend listing page and checking the result.

code-writing
advancedFrontend Best Practices

1. Start from the Frontend Best Practices lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice Frontend Review by building one step of a high-performance frontend listing page and checking the result.

code-fix
advancedFrontend Review

1. Start from the Frontend Review lesson example.

2. Use search queries, results and loading state instead of placeholder text.

3. Run the example and compare output before polishing.