4ADVANCED

JavaScript frameworks and libraries

Using a JavaScript framework can provide many benefits. In this path, we outline core concepts and provide a sequence of challenges to help you enhance your knowledge and gain hands-on experience with your chosen framework.

12 challenges
Level 4
~24 hours
JavaScript frameworks
12 challenges to complete

Prerequisites

Strong JavaScript fundamentals

Learning outcomes

Understand component architecture
Learn state management
Practice with modern frameworks
Build complex applications

Challenges

INTERMEDIATEPREMIUM

Mood tracking app

Build a mood tracking app to help users log their daily feelings and track their emotional wellbeing over time.

HTMLCSSJavaScript
ADVANCEDPREMIUM

Browser extension manager

Create a browser extension manager interface with the ability to enable, disable, and configure extensions.

ReactTypeScriptCSS
3
JUNIORFREE

Personal blog

Build a personal blog with article listing, individual article pages, and a responsive design.

HTMLCSSJavaScript
4
NEWBIEFREE

Character counter

Create a character counter component that updates in real-time as users type in a text area.

HTMLCSSJavaScript
5
JUNIORFREE

Conference ticket generator

Build a conference ticket generator that creates personalized tickets based on user input.

HTMLCSSJavaScript
6
INTERMEDIATEPREMIUM

Tech book club

Create a tech book club website with book listings, reviews, and discussion forums.

ReactNode.jsMongoDB
7
NEWBIEFREE

Recipe page

Build a recipe page with ingredients list, cooking instructions, and nutritional information.

HTMLCSS
8
NEWBIEFREE

Social links profile

Create a social links profile page with hover effects and responsive design.

HTMLCSS
9
NEWBIEFREE

Blog preview card

Build a blog preview card component with image, title, excerpt, and author information.

HTMLCSS
10
NEWBIEFREE

QR code component

Create a QR code component with centered layout and responsive design.

HTMLCSS
11
INTERMEDIATEFREE

Product list with cart

Build a product list with add to cart functionality and cart management.

HTMLCSSJavaScript
12
INTERMEDIATEFREE

Mortgage repayment calculator

Create a mortgage calculator with form validation and results display.

HTMLCSSJavaScript
Learn-Frontend