Frontend practice
Each challenge is a brief someone could plausibly hand you — a designer, a support ticket, a bug report — followed by what is actually going on underneath it. Decide what you would build before you open anything else, and read the trap on every single one, because the trap is the fix that looks right.
A card grid has a "Add to cart" control built as `<div class="btn" onclick="addToCart(id)">`. It looks right and works when clicked. Replace it with something correct, and list everything you got back.
A dashboard page is a tree of nested `div`s with class names like `wrapper`, `content-area` and `left-col`. Restructure it so the document has a real outline.
Lay out a row of product cards: equal width, equal height, evenly spaced, wrapping to the next line when there is not enough room. Card content varies in length.
Build a dashboard: a sidebar, a header, a main area with a grid of tiles of different sizes. It must work from a narrow phone to a wide monitor.
With no framework, render 500 search results into a list, then let the user filter them with a text box. Keep it responsive while typing.
A table where every row has Edit, Duplicate and Delete buttons currently attaches three listeners per row. Rows are added and removed constantly. Rewrite it with delegation.
Build a signup form: email, password, a country select, a terms checkbox. Validate it and submit it. Start with the platform and add JavaScript only where the platform cannot do the job.