Practice exercises

Build real things step by step. Pick a track and a level, write the code, and earn 25 points for each exercise you finish.

TrackAll tracks HTML & CSS JavaScript React PHP & Laravel Flutter & Dart SQL

LevelAll levels Beginner Intermediate Advanced

Profile card with FlexboxLay out a profile card with an avatar, text and buttons using Flexbox.intermediateHTML & CSS Build this UI: responsive navbarA navigation bar with a logo and links that turns into a menu button on phones.intermediateHTML & CSS Build this UI: landing page heroThe top section of a landing page: headline, text, two buttons and an illustration.intermediateHTML & CSS Build this UI: pricing cardsThree plans side by side, with the most popular one highlighted.intermediateHTML & CSS Build this UI: login formA clean, accessible login card with focus styles and an error message.beginnerHTML & CSS Build this UI: product gridA responsive grid of product cards with images, prices and a hover effect.intermediateHTML & CSS Build this UI: dashboard layoutA full-page app layout with a sidebar, a top bar and a grid of stat cards.advancedHTML & CSS Shopping cart totalUse reduce() to count the items in a cart and add up what they cost.intermediateJavaScript Count the wordsCount how often each word appears in a sentence, using a Map.intermediateJavaScript A counter with closuresBuild counters that each keep their own private value, using a closure.intermediateJavaScript Load users at the same timeUse async/await and Promise.all to load several users at once.intermediateJavaScript Todo list componentBuild a todo list with useState: add, complete and remove items.intermediateReact Sign-up form with validationA controlled form that checks the email and password before submitting.intermediateReact Filter and format with arraysUse array_filter and array_map to list the students who passed.intermediatePHP / Laravel Laravel: save a post with validationWrite a controller's store method that validates the request and saves a post.intermediatePHP / Laravel Laravel: posts and their commentsDefine a one-to-many relationship and load it without N+1 queries.advancedPHP / Laravel Counter with StatefulWidgetBuild a counter screen with + and − buttons using setState.beginnerDart / Flutter Product list with a model classShow a list of products with ListView.builder and a Product class.intermediateDart / Flutter Load data with FutureBuilderShow a loading spinner, then the data, or an error, with FutureBuilder.intermediateDart / Flutter Students per cityGroup students by city and keep only the cities with more than one student.intermediateSQL Average score per courseJOIN two tables and calculate each course's average score.intermediateSQL Best student in each courseFind the top-scoring student of every course with a window function.advancedSQL