Web Development Basics practice

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

1. Practice Web Basics Introduction by building one step of a beginner-friendly personal web card and checking the result.

code-writing
beginnerWeb Basics Introduction

1. Start from the Web Basics Introduction lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice How the Internet Works by building one step of a beginner-friendly personal web card and checking the result.

code-fix
beginnerHow the Internet Works

1. Start from the How the Internet Works lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Browsers and Rendering by building one step of a beginner-friendly personal web card and checking the result.

output
beginnerBrowsers and Rendering

1. Start from the Browsers and Rendering lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice HTML Structure by building one step of a beginner-friendly personal web card and checking the result.

fill-blank
beginnerHTML Structure

1. Start from the HTML Structure lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice CSS Styling Basics by building one step of a beginner-friendly personal web card and checking the result.

true-false
beginnerCSS Styling Basics

1. Start from the CSS Styling Basics lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice JS Behavior Basics by building one step of a beginner-friendly personal web card and checking the result.

mini-project
beginnerJS Behavior Basics

1. Start from the JS Behavior Basics lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Client Server Communication by building one step of a beginner-friendly personal web card and checking the result.

mcq
beginnerClient Server Communication

1. Start from the Client Server Communication lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice Web Servers and Hosting by building one step of a beginner-friendly personal web card and checking the result.

code-writing
beginnerWeb Servers and Hosting

1. Start from the Web Servers and Hosting lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Domain and DNS by building one step of a beginner-friendly personal web card and checking the result.

code-fix
beginnerDomain and DNS

1. Start from the Domain and DNS lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice HTTP and HTTPS Basics by building one step of a beginner-friendly personal web card and checking the result.

output
beginnerHTTP and HTTPS Basics

1. Start from the HTTP and HTTPS Basics lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice Frontend vs Backend Roles by building one step of a beginner-friendly personal web card and checking the result.

fill-blank
intermediateFrontend vs Backend Roles

1. Start from the Frontend vs Backend Roles lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice Code Editor Setup by building one step of a beginner-friendly personal web card and checking the result.

true-false
intermediateCode Editor Setup

1. Start from the Code Editor Setup lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Browser Developer Tools by building one step of a beginner-friendly personal web card and checking the result.

mini-project
intermediateBrowser Developer Tools

1. Start from the Browser Developer Tools lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Git and GitHub Basics by building one step of a beginner-friendly personal web card and checking the result.

mcq
intermediateGit and GitHub Basics

1. Start from the Git and GitHub Basics lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice Responsive Design Concept by building one step of a beginner-friendly personal web card and checking the result.

code-writing
intermediateResponsive Design Concept

1. Start from the Responsive Design Concept lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Web Forms and Inputs by building one step of a beginner-friendly personal web card and checking the result.

code-fix
intermediateWeb Forms and Inputs

1. Start from the Web Forms and Inputs lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice JSON Data Format by building one step of a beginner-friendly personal web card and checking the result.

output
intermediateJSON Data Format

1. Start from the JSON Data Format lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice APIs Integration by building one step of a beginner-friendly personal web card and checking the result.

fill-blank
intermediateAPIs Integration

1. Start from the APIs Integration lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice Web Storage LocalSession by building one step of a beginner-friendly personal web card and checking the result.

true-false
intermediateWeb Storage LocalSession

1. Start from the Web Storage LocalSession lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Performance Optimization by building one step of a beginner-friendly personal web card and checking the result.

mini-project
intermediatePerformance Optimization

1. Start from the Performance Optimization lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice Accessibility Intro by building one step of a beginner-friendly personal web card and checking the result.

mcq
advancedAccessibility Intro

1. Start from the Accessibility Intro lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice SEO Basics by building one step of a beginner-friendly personal web card and checking the result.

code-writing
advancedSEO Basics

1. Start from the SEO Basics lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Web Security Essentials by building one step of a beginner-friendly personal web card and checking the result.

code-fix
advancedWeb Security Essentials

1. Start from the Web Security Essentials lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice Database Basics by building one step of a beginner-friendly personal web card and checking the result.

output
advancedDatabase Basics

1. Start from the Database Basics lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice Deployment Basics by building one step of a beginner-friendly personal web card and checking the result.

fill-blank
advancedDeployment Basics

1. Start from the Deployment Basics lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice NodeJS Intro by building one step of a beginner-friendly personal web card and checking the result.

true-false
advancedNodeJS Intro

1. Start from the NodeJS Intro lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Frameworks Overview by building one step of a beginner-friendly personal web card and checking the result.

mini-project
advancedFrameworks Overview

1. Start from the Frameworks Overview lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice Package Managers npm by building one step of a beginner-friendly personal web card and checking the result.

mcq
advancedPackage Managers npm

1. Start from the Package Managers npm lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice Build Tools Overview by building one step of a beginner-friendly personal web card and checking the result.

code-writing
advancedBuild Tools Overview

1. Start from the Build Tools Overview lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice Web Basics Review by building one step of a beginner-friendly personal web card and checking the result.

code-fix
advancedWeb Basics Review

1. Start from the Web Basics Review lesson example.

2. Use elements, style blocks and script logic instead of placeholder text.

3. Run the example and compare output before polishing.