DEV Community: Frontend Mentor

The FM30 hackathon returns: Build a typing speed test!

Matt Studdert — Fri, 19 Dec 2025 13:22:43 +0000

Our first hackathon back in September was a blast – the community really showed up with some incredible Weather App solutions. We're excited to do it all again! If you missed the first one, here's your chance to join in. And if you participated last time, we'd love to see you back.

Congratulations again to Abere Fejiro, who took first place in our Weather App hackathon! Her winning solution went well beyond the requirements – featuring a full PWA implementation, voice search using the Web Speech API, location comparison, and polished micro-interactions with Framer Motion and sound effects. The attention to detail and thoughtful README made it a standout.

What's the FM30 Hackathon?

It's a 30-day challenge where you build the best solution you can to our brand new Typing Speed Test challenge. There's no pressure to speed-run it – take your time, experiment, and focus on quality.

The challenge will stay on the platform permanently, so you can always build it later at your own pace. But the hackathon adds some extra motivation: a deadline, prizes, and the chance to see how your work stacks up against the community.

Bonus: During the hackathon, everyone gets free access to the Figma design file – no Pro subscription required. Once the hackathon ends, Figma access will require a Pro plan, so now's a great time to jump in.

This time around, you'll build a typing speed test that calculates words per minute (WPM) and accuracy. It's a satisfying project – lots of real-time UI updates, DOM manipulation, and working with timers. You'll end up with something genuinely fun to use and a solid portfolio piece.

How to participate

Getting started

Head to the Typing Speed Test challenge page and download the starter files. The README covers everything you need to know.

From there, spend the next 30 days building your solution. Go beyond the requirements if you can – add features, polish the details, make it something you'd actually want to use. The "Ideas to test yourself" section on the challenge page has some inspiration.

We'd love to see your progress along the way. Share updates on social media using #FM30Hackathon, and we'll reshare standout posts to boost your visibility. We've also set up a dedicated #hackathon-chat channel in Discord – a space to share progress, ask questions, and connect with others taking on the challenge.

Submission guidelines

Post your solution in the #hackathon-submissions Discord channel under the Typing Speed Test thread. Your submission needs one thing: a link to your solution on Frontend Mentor.

One submission per person – duplicates will be removed and may result in disqualification.

Your submission must include:

A custom README: We provide a template in the starter files. Tell us about your process, the features you added, and what you learned. This is mandatory – no README means no valid submission.
A meaningful commit history: We want to see how your solution evolved. Multiple commits that show your progress, not a single large dump at the end.
Public access: Make sure your live demo and GitHub repo are both publicly accessible.

Deadline: Monday, January 19th at 09:00 AM GMT. We'll lock the submission thread at that point.

How we'll choose winners

Stage 1: Shortlisting

Our team reviews all valid submissions and selects five finalists. We're looking at:

Engagement on your Frontend Mentor solution page (likes and bookmarks) – so share your solution link widely!
Code quality: clean, readable, well-structured code with accessibility considered
How well you've met the requirements – and whether you've gone beyond them
Your README: the effort you put into documenting your process matters

Stage 2: Community vote

The five finalists go to a public vote. The community picks the top three winners.

Prizes

🥇 1st place: One-year Frontend Mentor Pro subscription ($96 value)
🥈 2nd place: One-month Pro subscription
🥉 3rd place: One-month Pro subscription

The challenge

You'll build a typing speed test with passages stored in a local data.json file – no API setup needed.

Core requirements:

Start a test by clicking Start or just typing
Choose difficulty (Easy, Medium, Hard) and mode (Timed 60s or Passage)
See real-time WPM, accuracy, and time while typing
Get visual feedback: correct characters in green, errors in red/underlined, with a visible cursor
Backspace to fix mistakes (original errors still count against accuracy)
View results after each test with WPM, accuracy, and character counts
Track personal bests with localStorage – celebrate when you beat your high score
Responsive layout with proper hover and focus states

Ideas to push further:

Multiple test durations (15s, 30s, 60s, 120s)
Different text categories: quotes, lyrics, code snippets
Historical tracking of your WPM and accuracy over time
A keyboard heatmap showing where you make mistakes
Shareable result cards for social media

Tips

Write a great README. Seriously. This is where you tell the story of your solution – your approach, the problems you solved, the extras you added. A thoughtful README can be the difference between making the shortlist or not.

Start early. You don't need to finish early, but starting early gives you room to iterate. The best solutions usually go through several rounds of refinement.

Help others. The Discord is full of people working on the same challenge. Answer questions, share what you've learned, and celebrate other people's progress. The hackathon is competitive, but the community spirit is what makes it fun.

Accessibility matters. Keyboard navigation, focus management, screen reader support – these things count. A polished, accessible solution stands out.

FAQs

Can I use frameworks or libraries?
Yes – React, Vue, Svelte, vanilla JS, whatever you prefer. Use what you're comfortable with or what you want to learn.

Can I use AI tools?
Yes, but you should understand every line of code in your solution. Your README should reflect your own learning process and decisions.

I'm a beginner – is this for me?
Absolutely. Focus on completing the core requirements and writing a solid README. Clean, simple, and well-documented beats complex and buggy.

Can I work with a teammate?
This is a solo challenge, but collaborating and helping each other in Discord is encouraged.

Key dates

Starts: Friday, December 19th
Submissions close: Monday, January 19th at 09:00 AM GMT
Winners announced: Thursday, January 22nd

Let's go!

We can't wait to see what you create. Good luck, have fun, and don't forget to share your progress with #FM30Hackathon.

Happy coding! 🎉

12 full-stack project ideas (with designs) for your developer portfolio

Matt Studdert — Mon, 17 Nov 2025 16:17:21 +0000

You need a portfolio to get hired. But most developers struggle with two problems: deciding what to build, and making their projects look professional enough to impress hiring managers.

Hiring managers spend maybe 30 seconds on your portfolio. They're looking for proof you can build complete applications: frontend, backend, database, deployed. If your projects look unpolished or amateur, they move on.

What makes a strong full-stack portfolio project? Projects that demonstrate frontend, backend, database, and deployment skills together. Strong projects include real-world features like authentication, search functionality, data validation, and API design. Each project needs live deployment and public source code to prove you can build and ship complete applications.

These projects prove you can build complete applications—exactly what employers look for.

This guide gives you 12 concrete project ideas with professional designs already built. Each Frontend Mentor challenge provides the design and specifications. You add the frontend, backend, database, and deployment that prove your full-stack skills. The design is handled, so your projects look polished while you focus on the code that actually gets you hired.

Many developers assume Frontend Mentor challenges are only for practicing HTML, CSS, and JavaScript, which is a missed opportunity. The challenges provide professional designs and clear specifications—exactly what you'd get from a design team at a real job. This makes them perfect foundations for full-stack projects where you add authentication, databases, APIs, and deployment.

What makes a project "full-stack"?

Let's define what "full-stack" means for a portfolio project.

Full-stack isn't consuming a public API. That's frontend work. Full-stack means you built both the frontend and the backend, handled data persistence, and deployed everything to production.

Every full-stack portfolio project should demonstrate these four areas:

1. Frontend implementation

Your frontend shows you can build interfaces people actually use:

Responsive design across devices
Accessible components following WCAG guidelines
State management (e.g., React hooks, Redux, Zustand)
Form handling with client-side validation
Interactive elements that respond to user actions

2. Backend development

The backend is where the behind-the-scenes work happens:

API endpoints you designed and built
Authentication and authorization logic
Server-side validation and business rules
Error handling and logging

3. Database management

Prove you can handle data that persists:

Database schema you designed
CRUD operations (Create, Read, Update, Delete)
Data relationships using foreign keys
Queries that perform well under load

4. Production considerations

Exceptional full-stack portfolio projects are shipped and polished:

Deployment to real hosting (Vercel, Railway, Render)
Environment configuration and secrets management
Error handling that degrades gracefully
Performance optimization (lazy loading, caching, code splitting)

These 12 Frontend Mentor challenges meet all four requirements when you add full-stack features and the production bells and whistles.

Complete example: Todo app as a full-stack project

Let's walk through one project from start to finish. This shows exactly how to transform a Frontend Mentor challenge into a full-stack portfolio piece.

Starting point: The Todo app challenge provides a complete design with light/dark themes, drag-and-drop reordering, and filtering.

Your potential full-stack implementation:

Frontend (React + TypeScript):

Component-based architecture with React
Drag-and-drop with react-beautiful-dnd
Form management using React Hook Form
Optimistic UI updates (update immediately, sync with backend after)
Dark mode toggle persisted in local storage

Backend (Express.js + Node.js):

RESTful API with endpoints:
- POST /api/todos - Create new todo
- GET /api/todos - Fetch user's todos
- PATCH /api/todos/:id - Update todo (complete, reorder)
- DELETE /api/todos/:id - Delete todo
JWT authentication with HTTP-only cookies
Input validation using express-validator
Rate limiting to prevent abuse

Database (PostgreSQL):

-- Users table
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Todos table
CREATE TABLE todos (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  text TEXT NOT NULL,
  completed BOOLEAN DEFAULT false,
  position INTEGER NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Index for fast queries
CREATE INDEX idx_todos_user_position ON todos(user_id, position);

Deployment:

Full-stack (all-in-one): Vercel, Railway, or Render can each host your entire application (frontend, backend, and database)
Separate deployment: Frontend deployed separately to backend and database
Environment variables managed through platform dashboards
CI/CD: GitHub Actions runs tests before deploying

Architecture:
Frontend → API calls over HTTPS → Backend → PostgreSQL

What this proves:

You can design RESTful APIs
You understand authentication flows
You can model data relationships
You know how to deploy full applications

This is a foundation project, so keep it simple. You don't need OAuth, WebSockets, or complex caching. Focus on getting the four core areas right. Once you have one solid full-stack project deployed, the next one becomes easier.

The 12 full-stack project ideas

About these groupings: We've grouped these projects by full-stack implementation complexity, not by Frontend Mentor's challenge difficulty ratings. A challenge marked "intermediate" on Frontend Mentor might be "foundation" here if the full-stack patterns are straightforward. Start with foundation projects to learn core patterns, then move to more complex architectures.

Note: When we talk about "full-stack skills to add," these are ideas you can pick and choose from. You control the tech stack, features, and tools you use. Some of the ideas are advanced and overkill for the projects. However, going overkill is exactly what will teach you more lessons and demonstrate your skills and passion.

Foundation projects: learning core full-stack patterns

These four projects teach fundamental full-stack architecture: how frontends talk to backends, how data persists, and how everything deploys together.

1. Todo app

Challenge URL: https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW

The classic todo app becomes full-stack when you add persistent storage and user accounts. The design leaves room for you to take the project in different directions with full-stack features.

What the challenge includes:

Add, mark as complete, and delete todos
Filter by all/active/complete todos
Clear all completed todos
Toggle light and dark mode
Drag and drop to reorder items

Full-stack skills to add:

Frontend: State management for todo list, form validation, drag-and-drop persistence
Backend: RESTful API, CRUD endpoints for todos, user session management
Database: Todo storage (PostgreSQL or MongoDB), user associations, completion status tracking
Bonus: Real-time sync across browser tabs/devices using WebSockets, JWT authentication, todo categories or priorities

How to present it: "Built a todo task manager with user authentication. Implemented RESTful API design, database CRUD operations, and real-time updates across devices using WebSockets."

This project teaches how data flows from UI interactions through API calls to database storage. The simplicity of todos lets you focus on getting the architecture right.

2. Bookmark manager

Challenge URL: https://www.frontendmentor.io/challenges/bookmark-manager-app

A bookmark manager teaches you hierarchical data, search, and user-generated content.

What the challenge includes:

Add bookmarks with title, description, URL, and tags
View all bookmarks with details (favicon, title, URL, description, tags, view count, last visited, date added)
Search bookmarks by title
Filter by one or multiple tags
View and manage archived bookmarks
Pin/unpin bookmarks
Edit bookmark details
Copy URLs to clipboard
Sort by recently added, recently visited, or most visited
Toggle light/dark themes

Full-stack skills to add:

Frontend: Multi-tag filtering logic, search with debouncing, URL validation
Backend: Favicon fetching service, metadata extraction from URLs, RESTful endpoints for bookmarks/tags/archives
Database: Many-to-many tag relationships, view count tracking, archive status, pinned status indexing for fast queries
Bonus: Browser extension for one-click bookmarking, duplicate URL detection, automatic categorization using ML

How to present it: "Created a bookmark manager with advanced filtering, tag system, and search. Implemented many-to-many database relationships, full-text search, and automatic metadata extraction from URLs."

Bookmarks force you to think about complex data relationships. Tags have many bookmarks, bookmarks have many tags, and you need efficient queries for filtering by multiple tags simultaneously.

3. Note-taking web app

Challenge URL: https://www.frontendmentor.io/challenges/note-taking-web-app-773r7bUfOG

A note-taking app teaches real-time data persistence and rich content handling.

What the challenge includes:

Create, read, update, and delete notes
Archive notes
View all notes and archived notes separately
View notes filtered by specific tags
Search notes by title, tag, and content
Select color and font themes
Form validation for required fields
Keyboard navigation for all features

Full-stack skills to add:

Frontend: Rich text editor integration (TipTap or Slate), auto-save with debouncing, keyboard shortcuts
Backend: Note versioning API, full-text search with PostgreSQL or Elasticsearch, conflict resolution for concurrent edits
Database: Note content storage with timestamps, many-to-many tag relationships, search indexing for title and content
Bonus: Markdown support with preview, note sharing with permission levels (view-only, edit), version history with restore capability

How to present it: "Built a feature-rich note-taking app with auto-save, tagging, and full-text search. Demonstrates real-time data persistence, conflict resolution for concurrent edits, and database indexing for search performance."

Auto-save functionality teaches you about debouncing, optimistic UI updates, and graceful error handling. These patterns appear in most production applications.

4. Markdown editor

Challenge URL: https://www.frontendmentor.io/challenges/inbrowser-markdown-editor-r16TrrQX9

An in-browser markdown editor shows you can handle text processing and document management.

What the challenge includes:

Create, read, update, and delete markdown documents
Name and save documents
Edit markdown and see formatted preview
View full-page preview of formatted content
Toggle between edit/preview modes

Full-stack skills to add:

Frontend: Split-pane editor layout, live markdown preview rendering, syntax highlighting, keyboard shortcuts
Backend: Document storage and retrieval API, markdown-to-HTML conversion on server, export to PDF or HTML
Database: Document storage with versioning, folder organization, document relationships
Bonus: Template system for common documents, collaborative editing with operational transforms, revision history with diff visualization

How to present it: "Developed an in-browser markdown editor with live preview, document management, and export functionality. Shows understanding of text processing, file handling, and document versioning systems."

This project is great for understanding different approaches to data storage. Do you save on every keystroke, every few seconds, or when the user explicitly saves? Each approach has trade-offs.

Intermediate projects: multi-feature applications

These five projects involve multiple interconnected features, teaching you how to architect more complex applications.

5. Personal blog

Challenge URL: https://www.frontendmentor.io/challenges/personal-blog-lJpVCnmozL

Building your own personal blog demonstrates content management and publication workflows. You can make it as simple as a static blog or as complex as a full CMS with scheduling, drafts, and analytics.

What the challenge includes:

Navigate between pages (Home, article pages)
Read all articles
Select color theme
Subscribe to newsletter with email validation
Form validation with error/success messages
Multi-page navigation

Full-stack skills to add:

Frontend: Article listing with pagination, category filtering, responsive image handling, social sharing buttons
Backend: CMS functionality, content API with pagination, image upload and processing, newsletter API integration (Mailchimp/SendGrid)
Database: Posts with rich text content, categories and tags, subscriber list management
Bonus: Draft/published workflow with scheduled publishing, SEO optimization with dynamic meta tags, RSS feed generation, reading time calculation

How to present it: "Created a full-featured blog with CMS, commenting, and newsletter integration. Demonstrates content delivery patterns and automated email workflows."

Building a CMS teaches you about content workflows (draft → review → publish) and how to structure content APIs that scale.

6. Mood tracking app

Challenge URL: https://www.frontendmentor.io/challenges/mood-tracking-app-E2XeKhDF0B

A mood tracker introduces time-series data and analytics features.

What the challenge includes:

Log mood, feelings, reflections, and sleep daily
See today's mood entry details
View mood quotes based on current mood
See graph of most recent 11 records
Interact with chart bars to see details for that day
View average mood/sleep from past 5 check-ins vs. previous 5
Update name and avatar through settings
Form validation

Full-stack skills to add:

Frontend: Data visualization with Chart.js or D3, calendar view for historical entries, trend displays with comparison periods
Backend: Time-series data handling, analytics calculations (rolling averages, streaks, patterns), scheduled notification system for reminders
Database: Daily mood entries with timestamps, pattern analysis queries with window functions, historical data retention policies
Bonus: Mood insights using ML (pattern detection), customizable reminder notifications, data export to CSV/JSON, correlation analysis (mood vs. sleep, mood vs. weather API)

How to present it: "Built a mood tracking app with data visualization and trend analysis. Shows proficiency in time-series data handling, analytics implementation using SQL window functions, and scheduled background jobs."

Time-series data has unique challenges. How do you efficiently query for trends across months? How do you handle missing days? How do you visualize patterns over different time periods?

7. Entertainment web app

Challenge URL: https://www.frontendmentor.io/challenges/entertainment-web-app-J-UhgAW1X

An entertainment app teaches content organization and user preference tracking.

What the challenge includes:

Navigate between Home, Movies, TV Series, and Bookmarked Shows pages
Add/remove bookmarks from all movies and TV series
Search for shows across all pages
View content with thumbnail images
Page-specific filtering

Full-stack skills to add:

Frontend: Grid layouts for content browsing, search and filter functionality, infinite scroll for large catalogs, responsive image loading
Backend: Integration with TMDB or OMDb API for real content, caching layer for API responses, rate limiting for external APIs, recommendation logic based on user signals (bookmarks, ratings, search history)
Database: Bookmarked content with timestamps, user ratings and reviews, search history for personalization, user preferences and genre tracking
Bonus: Content recommendations based on bookmark patterns and ratings using collaborative filtering, social features (share bookmarks with friends), content alerts for new seasons of bookmarked shows, similar content suggestions based on what users bookmark together

How to present it: "Developed an entertainment web app with content organization, bookmarking, and personalized recommendations. Demonstrates third-party API integration, caching strategies for rate-limited APIs, and recommendation algorithms based on user interaction patterns."

This project teaches you to work with rate-limited external APIs, cache expensive API calls effectively, and build recommendation systems from implicit signals (bookmarks, searches, ratings) rather than explicit viewing data.

8. Product feedback app

Challenge URL: https://www.frontendmentor.io/challenges/product-feedback-app-wbvUYqjR6

A feedback management system shows you can build social features and voting mechanisms.

What the challenge includes:

Create, read, update, and delete feedback requests
Form validations for feedback creation/editing
Sort suggestions by most/least upvotes and most/least comments
Filter suggestions by category
Add comments and replies to feedback
Upvote feedback requests
View different suggestion states (suggestion, planned, in-progress, live)

Full-stack skills to add:

Frontend: Upvoting UI with optimistic updates, threaded comment display, sorting and filtering, status badge UI, form validation
Backend: Vote tallying with race condition handling using database transactions, comment threading logic, sorting algorithms (hot, top, new), moderation tools, status workflow management
Database: Feedback items with status field, vote tracking with unique constraints (preventing duplicate votes), comment trees using adjacency list or nested sets, user permission levels
Bonus: Status workflow automation (planned → in-progress → complete), email notifications for status changes, roadmap view showing in-progress items, admin dashboard for feedback management and analytics

How to present it: "Created a feedback management system with voting, threaded comments, and status workflows. Shows understanding of social features, concurrent action handling with database transactions, and permission-based systems."

Voting systems are trickier than they look. You need to prevent users from voting multiple times using unique constraints, handle race conditions when tallying votes with database transactions, and efficiently sort by vote count with proper indexing.

9. Kanban task management app

Challenge URL: https://www.frontendmentor.io/challenges/kanban-task-management-web-app-wgQLt-HlbB

A Kanban board demonstrates complex state management and real-time features.

What the challenge includes:

Create, read, update, and delete boards and tasks
Form validations for creating/editing boards and tasks
Mark subtasks as complete
Move tasks between columns
Hide/show board sidebar
Toggle light/dark themes
Drag and drop to reorder tasks (bonus)

Full-stack skills to add:

Frontend: Drag-and-drop with react-beautiful-dnd or dnd-kit, multi-board management, task detail modals, real-time updates with optimistic UI
Backend: Task ordering persistence, board state management, WebSocket connections for real-time collaboration, conflict resolution for concurrent edits
Database: Boards with column definitions, tasks with position ordering, subtasks with completion tracking, cross-board task relationships for linking related work
Bonus: Real-time collaboration (see other users' changes live), task assignments to team members, activity logs for audit trails, task comments and attachments, due dates with notifications

How to present it: "Built a Kanban board with drag-and-drop task management, multi-board support, and real-time collaboration. Demonstrates complex state management, WebSocket implementation for live updates, and optimistic UI updates with rollback on errors."

Drag-and-drop with database persistence teaches you about optimistic updates (update the UI immediately, save to database afterward) and conflict resolution when multiple users edit simultaneously. Position ordering requires careful indexing.

Advanced projects: production-scale applications

These three projects involve complex business logic and production requirements that mirror real-world applications.

10. Invoice app

Challenge URL: https://www.frontendmentor.io/challenges/invoice-app-i7KaLTQjl

An invoicing system demonstrates business logic and working with financial calculations.

What the challenge includes:

Create, read, update, and delete invoices
Form validations for invoice creation/editing
Save draft invoices
Mark pending invoices as paid
Filter invoices by status (draft/pending/paid)
Toggle light/dark mode
Multi-item invoice line items

Full-stack skills to add:

Frontend: Complex form validation with dynamic line items, invoice status workflows with visual indicators, date pickers for due dates, filter UI for status
Backend: Invoice calculations with line item totals and tax, invoice number generation with sequential IDs, PDF generation for invoices using libraries like PDFKit or Puppeteer, status change validation (prevent editing paid invoices)
Database: Client information storage, invoices with status and dates, line items (one-to-many relationship), invoice totals calculated and stored, proper DECIMAL types for currency
Bonus: Email invoice delivery as PDF attachment using SendGrid/Resend, duplicate invoice functionality to speed up similar invoices, invoice templates for common services, overdue invoice indicators based on due date, simple invoice statistics (total revenue, pending amount, paid this month)

How to present it: "Developed an invoicing system with PDF generation and status workflows. Demonstrates business logic implementation (calculating totals, applying tax), handling financial data with proper decimal precision, and workflow state management with validation rules."

This project teaches you about financial calculations (always use DECIMAL, never FLOAT), state machines (draft → pending → paid transitions with rules), dynamic forms (adding/removing line items), and PDF generation. The complexity comes from getting business logic right: line item totals, tax calculations, preventing invalid state changes, and maintaining data integrity.

11. Link-sharing app

Challenge URL: https://www.frontendmentor.io/challenges/linksharing-app-Fbt7yweGsT

A link-in-bio platform teaches user profiles and link management.

What the challenge includes:

Create, read, update, delete links
See preview in mobile mockup
Form validations (URL pattern matching per platform)
Drag and drop links to reorder
Add profile details (picture, first name, last name, email)
Profile detail validations
Preview devlinks profile
Copy profile link to clipboard

Full-stack skills to add:

Frontend: Profile customization with theme options, drag-and-drop link reordering, live preview mode, image upload with cropping
Backend: URL validation and sanitization, custom subdomain routing (username.yourapp.com), click analytics tracking with user-agent parsing, public profile API for sharing
Database: User profiles with unique slugs, links with ordering (position field), click tracking with timestamps and metadata, theme preferences
Bonus: Custom domain support (bring your own domain), QR code generation for profiles, A/B testing different link orders, integration with social platform APIs for follower counts, scheduled link activation/deactivation

How to present it: "Created a link-sharing platform with analytics, customization, and custom subdomain routing. Demonstrates multi-tenant architecture, analytics implementation with efficient aggregation queries, and URL routing patterns."

This project demonstrates multi-tenancy: each user has their own public page, subdomain, and analytics. You'll learn about slug uniqueness with database constraints, efficient analytics queries with proper indexing, and public vs. authenticated endpoints.

12. Personal finance app

Challenge URL: https://www.frontendmentor.io/challenges/personal-finance-app-JfjtZgyMt1

A finance manager demonstrates complex data relationships and thoughtful data visualization.

What the challenge includes:

Overview page showing all financial data at-a-glance
Transactions page with pagination (10 per page)
Search, sort, and filter transactions
CRUD operations for budgets and saving pots
View latest 3 transactions per budget category
View progress towards each pot goal
Add/withdraw money from pots
View recurring bills with status for current month
Search and sort recurring bills
Form validation throughout
Keyboard navigation

Full-stack skills to add:

Frontend: Complex forms with validation, charts for spending analysis (Chart.js/Recharts), budget vs. actual comparisons with visual indicators, transaction categorization UI, pagination controls
Backend: CSV transaction import with parsing and validation, budget limit alerts when thresholds exceeded, data aggregation for reports and charts, recurring bill detection from transaction patterns, spending summary calculations
Database: Accounts with balances, transactions with categories (foreign keys), budgets with time periods and spending limits, pots with target amounts, recurring bills with due dates, complex queries for spending patterns using GROUP BY and window functions
Bonus: Manual transaction categorization with suggestions based on merchant names, spending insights by category (top spending categories, unusual spending alerts), budget vs. actual visual comparisons with percentage indicators, CSV export for backup, custom budget categories, bill payment reminders with email notifications

How to present it: "Built a personal finance manager with transaction tracking, budget management, and spending analytics. Demonstrates handling sensitive financial data with proper input validation, complex data relationships with foreign keys, and data aggregation using SQL for reporting dashboards."

This project focuses on the data modeling and visualization challenges of personal finance: proper decimal handling for currency, time-based aggregations (spending this month vs. last month), budget tracking with alerts, and presenting complex financial data clearly. You don't need real bank connections to show you understand financial data architecture and can build meaningful analytics.

How to present these projects in your portfolio

Building the projects is half the work. How you present them determines whether you get interviews.

Essential information for each project

Every project in your portfolio needs:

Live demo link: Deploy your project so employers can actually use it. A broken or missing demo link is worse than no link at all. Use platforms like Vercel, Railway, or Render.

GitHub repository: Your code must be public and well-organized. Private repos make it impossible for potential employers to review your code.

Technologies used: List your frontend framework, backend language/framework, database, and any major libraries. Be specific: "React 19 with TypeScript, Express.js, PostgreSQL 15" tells more than "React, Node, Database."

Key features and challenges: In 2-3 sentences, explain what the project does and what made it interesting to build. Don't list features. Explain what you learned or what problems you solved.

Your architecture decisions: Why did you choose PostgreSQL over MongoDB? Why serverless functions instead of a traditional server? Why JWT authentication instead of sessions? These decisions show how you think.

README best practices

Your README is your first impression. Make it count.

Project description: One paragraph explaining what the project does and who it's for. Don't make readers guess.

Setup instructions: Step-by-step commands to run locally. Assume the reader knows nothing about your project. List all environment variables with example values. If it takes more than 5 minutes to get running, document why.

Architecture overview: A simple diagram or explanation of how your frontend talks to your backend, where data lives, and how pieces connect. This is critical for full-stack projects. Show employers you understand the whole system, not individual pieces.

Technical decisions: Pick 2-3 interesting decisions you made and explain them. "I chose PostgreSQL over MongoDB because the relationships between users, projects, and tasks were well-defined and benefited from foreign key constraints and ACID transactions."

Screenshots: Show the major features in action. Include both desktop and mobile views to prove responsive design. Use screenshots to tell the story of your app's workflow.

What to highlight in descriptions

When describing each project on your portfolio site:

Full-stack challenges you solved: "Implemented real-time sync between multiple browser tabs using WebSockets and conflict resolution logic for concurrent edits." This is far better than "Built a todo app."

Technical decisions and trade-offs: "Used optimistic UI updates for instant feedback, with rollback on server errors and retry logic for failed requests." Shows you understand user experience and error handling.

Performance optimizations: "Reduced initial page load from 3.2s to 1.1s by implementing image lazy loading and code splitting for route components." Proves you think about refining and optimizing your projects.

Security considerations: "Added rate limiting on authentication endpoints to prevent brute force attacks. Implemented CSRF protection and secure HTTP-only cookies for session management." Shows security awareness beyond hashing passwords.

What you'd do differently: "Next time, I'd use TypeScript on the backend, not just the frontend. I spent too much time debugging runtime errors that TypeScript would have caught. I'd also implement proper error handling middleware earlier instead of having try-catch blocks everywhere." Demonstrates learning about type safety across the stack and code organization.

If you're a developer with no professional experience, you need to lean into these methods of showcasing your understanding. Professional developers can easily point to quantifiable work they've done in their jobs and add it to their resumes.

But, as a newbie, you need to treat your portfolio projects as real-world apps and write about your learnings and improvements to showcase your knowledge.

Portfolio website structure

Organize your projects intentionally:

Lead with your strongest work: Put your best full-stack project first. This is what gets reviewed in those critical first 30 seconds. Make it count.

Group logically: You can organize by technology (React projects, Vue projects) or by complexity (foundation projects, advanced projects). Make it easy to navigate. Avoid random ordering.

Include action buttons: Every project needs clear "View Live" and "View Code" buttons above the fold. Don't make employers hunt for these links.

Show don't tell: Screenshots prove your design skills. GIFs prove your interactions work. Videos demonstrate complex features such as drag-and-drop and real-time collaboration.

Technical summaries: 2-3 sentences per project explaining the tech stack and key features. Save the deep dive for the README.

Taking it further: adding full-stack features

Frontend Mentor challenges provide professional designs, but the full-stack implementation is yours to define. Here are features you can add to any project to demonstrate advanced full-stack skills.

Authentication & authorization

User accounts transform simple apps into full-stack showcases:

User registration and login: Implement email/password authentication with proper password hashing (bcrypt or Argon2). Include email verification to prevent fake accounts and improve security.

JWT or session management: Choose based on your architecture. JWTs work well for stateless APIs and microservices. Sessions work better for traditional server-rendered apps or when you need instant logout.

Role-based access control: Add admin users who can moderate content and regular users with limited permissions. Implement middleware to check permissions on protected routes. This shows you understand multi-tenant systems.

Password reset workflows: Implement "forgot password" with time-limited email tokens. This involves email sending (SendGrid/Resend), secure token generation, token expiration, and secure token validation. Test the full workflow.

Real-time features

Real-time updates make applications feel modern:

WebSocket connections: Use Socket.io or native WebSockets to push updates from server to client instantly. Implement reconnection logic for dropped connections.

Live updates and notifications: Show users when new content appears without requiring a page refresh. The product feedback app is perfect for this: notify users when someone comments on their feedback.

Collaborative editing: Allow multiple users to work on the same document simultaneously. This involves operational transforms or CRDTs (advanced but impressive). Start with simpler presence indicators (showing who's online).

Activity feeds: Display a stream of recent actions (user X added a task, user Y commented). This demonstrates event-driven architecture and real-time data streaming.

Third-party integrations

Integrating external services shows you can work with APIs:

Email services: Use SendGrid or Resend to send transactional emails (welcome emails, password resets, notifications). Handle delivery failures gracefully.

Cloud storage: Store user-uploaded images on AWS S3, Cloudinary, or Cloudflare R2. This shows you understand file handling beyond local storage and can work with cloud services.

Social authentication: Add "Sign in with Google" or GitHub OAuth. This demonstrates understanding of the OAuth flow, token management, and linking social accounts to user profiles.

External data APIs: Pull in real data from services like weather APIs, news APIs, or the TMDB API for the entertainment app. Implement proper error handling for API failures.

Advanced data features

These features show you can handle complex data:

Full-text search: Implement search across text content using PostgreSQL full-text search or Elasticsearch. The note-taking app is ideal for this. Include relevance ranking and highlighting.

Data export/import: Let users export their data to CSV or JSON and import it back. This demonstrates data transformation skills and gives users confidence in data portability.

Analytics and reporting: Build dashboards that show usage patterns, trends over time, and performance metrics. The mood tracker is perfect for this. Use SQL window functions for rolling averages.

Caching strategies: Implement Redis caching for expensive queries or API calls. Add cache invalidation logic. This shows performance awareness and understanding of caching patterns.

Production polish

These details separate portfolio projects from production applications:

CI/CD pipelines: Set up GitHub Actions to run tests and deploy automatically on push to main. Include linting, type checking, and test coverage reports. This demonstrates DevOps awareness.

Error logging and monitoring: Integrate Sentry or similar to track errors in production. Set up alerts for critical errors. Shows you care about user experience after deployment and can debug production issues.

Performance optimization: Implement lazy loading, code splitting, and image optimization. Measure before and after with Lighthouse. Document the improvements with specific metrics.

Security best practices: Add rate limiting to prevent abuse, input sanitization to prevent XSS, CORS configuration, security headers (CSP, X-Frame-Options), and dependency scanning. These details show production readiness.

I've personally seen community members take our challenges well beyond the brief and add production polish.

One example is Toyan (above), who completed our Connect Four game project and transformed it into a full-stack multiplayer experience. He added real-time multiplayer features (including the ability to spectate other players' games), an achievement system, and much more. This project would make an incredible portfolio piece, leaving room for valuable interview conversations and discussions to showcase knowledge and passion.

Common mistakes to avoid

Even with great projects, poor presentation can hurt your chances. Here's what to avoid.

Weak project documentation

Generic READMEs damage your credibility. "This is a todo app built with React" tells employers nothing.

Explain your technical decisions. MongoDB for flexible schemas? PostgreSQL for ACID transactions? Express over Fastify? These decisions reveal your thinking.

Include working setup instructions. List environment variables with example values. Explain where to get API keys and how to set up the database. Test your instructions on a fresh machine.

Missing production deployment

Portfolio projects must be deployed and accessible. If an employer can't click a button and see your work running, they'll assume it doesn't work or you don't know how to deploy.

Broken demo links are worse than no links at all. Check your deployments regularly: free-tier services sometimes shut down after inactivity, domains expire, environment variables get cleared, or databases get wiped.

Choose reliable hosting platforms. Don't host on unreliable free services that frequently go down.

Not explaining the full-stack work

Don't assume employers will dig through your backend code. Many won't have time.

Call out full-stack features explicitly. "Includes bcrypt authentication, PostgreSQL with foreign keys, and RESTful API with rate limiting" beats "Full-stack todo app."

Add architecture diagrams. A simple visual showing React → Express API → PostgreSQL → Railway helps employers understand your system at a glance.

Document your backend in the README. Include API endpoints, database schema, deployment setup, and key technical decisions.

Outdated or abandoned projects

Projects with "Last updated 2 years ago" signal you've moved on or given up.

Dead projects on your portfolio send the wrong message. If you're not maintaining code in your portfolio, why would an employer trust you with their codebase?

Update dependencies regularly. A project with dozens of outdated npm packages and security vulnerabilities suggests you don't understand security or maintenance responsibilities.

Add "Last Updated" dates to show maintenance. Even small updates (fixing a bug, updating a README, adding a feature, updating dependencies) show that these are living projects you care about.

FAQ

What should be on a full-stack developer portfolio?

Your portfolio should ideally include 3-5 projects that demonstrate frontend, backend, and database skills. Each project needs a live demo, source code on GitHub, and clear documentation explaining your full-stack implementation. Quality matters more than quantity: three polished projects beat ten half-finished ones.

How many projects should a full-stack portfolio have?

Start with 3 projects from different complexity tiers in this guide. Once you have three solid full-stack projects deployed and documented, you're in great shape. You can always add more later, but aim for depth over breadth. One great project with thorough documentation beats five rushed projects, and can easily be enough to get your foot in the door with a potential employer.

Do I need to build everything from scratch?

No. Using Frontend Mentor challenges as a design foundation is smart: it shows you can work from requirements and specifications, which is exactly what you'll do at a job. The full-stack implementation you add on top (backend, database, authentication) is what proves your abilities. Focus your effort on backend work, not reinventing the design wheel.

Should I include team projects or only solo work?

Include both, but clearly explain your role in team projects. Team projects show you can collaborate and work in a codebase you didn't create entirely yourself. Solo projects prove you can handle the full stack independently. Label each project clearly: "Team project - I built the authentication system and user dashboard" is far better than vaguely claiming ownership.

What is an example of a full-stack project?

A todo task manager with user authentication demonstrates full-stack skills. The frontend uses React with form validation. The backend uses Express.js with JWT authentication and RESTful API endpoints. PostgreSQL stores user accounts and tasks. The complete application deploys to Railway, demonstrating you can build and ship production applications.

What are some fun full-stack project ideas?

Fun full-stack projects include: Kanban boards with drag-and-drop task management and real-time collaboration; mood trackers with data visualization and trend analysis; entertainment apps with bookmarking and personalized recommendations; link-sharing platforms with custom subdomains and analytics; and invoicing systems with PDF generation and email delivery.

How to do full-stack projects?

Full-stack projects require four components: (1) Frontend with responsive design and state management, (2) Backend API with authentication and business logic, (3) Database with proper schema design and relationships, (4) Production deployment on hosting platforms. Start with a design (e.g., a Frontend Mentor challenge), build the frontend, add backend functionality, integrate a database, and deploy everything.

Will full-stack be replaced by AI?

AI tools accelerate full-stack development, but portfolios still prove you can architect systems, debug production issues, and ship complete applications. These skills require judgment, problem-solving, and understanding of trade-offs that AI can't replace. Full-stack developers who use AI effectively will be more productive, but the fundamental skills remain essential.

Start building your full-stack portfolio

Your portfolio proves your skills. Your website packages them.

These 12 Frontend Mentor challenges provide professional designs and clear requirements. Your job is to add the backend functionality, database integration, and production deployment that prove you're full-stack ready.

Here's what to do right now:

Next 30 minutes:

Pick the Todo app challenge (simplest foundation project)
Read the requirements and download the starter files
Create your GitHub repository with a README template

This weekend:

Build the frontend using the design provided
Set up Express.js and PostgreSQL locally
Create your first API endpoint (GET /api/todos)
Test the connection between frontend and backend

Next week:

Add user authentication with JWT
Deploy Vercel, Railway, or Render
Write your README with an architecture diagram
Share your live project

Don't wait for perfect. Ship functional code, document it well, and iterate as you learn. Your portfolio evolves with you.

Pick the Todo app and start building today. Happy coding!

Project-based learning vs tutorials: Escape tutorial hell

Matt Studdert — Thu, 13 Nov 2025 15:29:50 +0000

You've completed another coding tutorial. The instructor made everything look easy. You followed along, typed the code, and watched it work. You feel accomplished. But then you open a blank editor to build something on your own, and suddenly... nothing. Where do you even start? What file should you create first? How do you structure this? The cursor blinks at you.

Sound familiar? Welcome to tutorial hell. It's that frustrating cycle where you watch endless tutorials, feel like you're learning, but can't build anything when you try. You know the syntax, you recognize the patterns, but when it's time to create something from scratch...nothing.

Unfortunately, tutorial hell is more dangerous now than ever. With 76% of developers using AI coding tools (some sources cite higher adoption), analyses showing entry-level positions down more than 50% compared to pre-2020 levels, and hiring managers looking for candidates who can work with AI rather than compete against it, knowing syntax isn't enough anymore.

But here's the good news: there's a proven way out. It's called project-based learning, and it develops the problem-solving skills that AI can assist with, but can't replace.

In this article, you'll learn exactly what project-based learning is, why it's the critical differentiator in today's market, how to spot if you're stuck in tutorial hell, and most importantly, how to escape it with a clear 7-step plan that works.

What is project-based learning?

Project-based learning means building complete projects from scratch, without step-by-step instructions. Instead of following tutorials, you get requirements and designs, then figure out how to build it yourself. This matches real developer work and develops problem-solving skills faster than tutorial-based learning.

Here's the key difference:

With tutorials, you're learning syntax—how to write code. The instructor makes every decision for you: which library to use, how to structure files, and how to solve problems. You replicate their choices.

With project-based learning, you learn to think like a developer. You get a design and requirements, then you decide how to build it. You structure the solution, debug your mistakes, make trade-offs, and yes, use AI tools strategically when appropriate.

This is exactly what you'll do in a real job. Your product manager won't give you a tutorial. They'll give you requirements and designs, and you'll need to figure out the implementation. Research shows that project-based learning improves problem-solving skills and knowledge retention significantly more than traditional instruction methods.

What project-based learning actually looks like

That definition might sound abstract, so let's make it concrete. Here's what project-based learning feels like when you're building an NFT preview card component.

What you're given:

A design mockup showing exactly how it should look
Requirements: match the design, handle hover states
Assets: images, style guide with colors and fonts

What you have to figure out:

HTML structure and semantic elements
CSS layout approach (flexbox? grid? something else?)
How to handle the image overlay effect
Implementing the hover state
Organizing your code so it's maintainable

What you're NOT given:

Step-by-step instructions
The exact CSS properties to use
Solutions to problems you'll encounter
How to debug when something breaks

Here's what the process actually feels like:

You stare at the design for a bit. Where do you even start? (This is normal.)
You write some HTML structure. You guess the semantic elements.
You add some CSS. It doesn't look right. You adjust. Still not quite right.
You get stuck on the hover effect. You search "CSS image overlay hover effect."
You find three different approaches. You have to decide which fits your situation.
You implement one. It kind of works, but the opacity is wrong.
You debug. You adjust. You test. You adjust again.
It works! It's not perfect, but it works.

This messy, frustrating, satisfying process? That's learning. That's what builds the problem-solving skills that matter. It's completely different from the smooth, guided experience of a tutorial.

When to use tutorials vs project-based learning

Before we go deeper, let's be clear: tutorials aren't evil. They have their place in learning to code.

Use tutorials for:

Learning syntax
Understanding a new concept at a high level
Seeing an example of how something works
Quick reference when stuck on something specific

Use project-based learning for:

Everything after the basics
Building your portfolio
Developing problem-solving skills
Learning to work with AI tools effectively
Preparing for real development work

A good rule of thumb: Spend about 20% of your time learning concepts through tutorials and documentation, and 80% of your time building projects. This ratio works because you learn far more from struggling through problems than from watching someone else solve them. Studies in educational psychology confirm that active learning (e.g., building projects) produces better outcomes than passive learning (e.g., watching tutorials).

Why tutorial hell is particularly dangerous now

Tutorial hell isn't about watching too many tutorials. It's about using them to avoid the discomfort of building on your own. Here's why that's particularly dangerous in 2025: you're learning exactly what AI already does well.

AI tools like GitHub Copilot, Cursor, and ChatGPT excel at the syntax-heavy, pattern-recognition tasks that tutorials teach. Need a React component? AI can generate it. Need to implement a common pattern? AI knows dozens of approaches.

What AI struggles with? The skills that project-based learning develops:

Complex system design and architecture decisions
Novel problem-solving without clear patterns
Understanding business context and requirements
Making strategic trade-offs between approaches
Reviewing code quality and catching subtle bugs

Here's what this looks like in practice:

Two developers apply for the same role. Both completed the same bootcamp. Both can write React code.

Developer A (tutorial-trained) gets the take-home assignment: "Build a dashboard that displays real-time data from our API with custom filtering." They freeze. They've built dashboards in tutorials, but those came with implementation instructions. They Google "how to build dashboard tutorial" and spend hours searching for something close enough to copy.

Developer B (project-trained) sees the same assignment as a variation of problems they've solved before. They don't know the exact solution, but they know how to break it down: fetch data → display data → add filters → optimize renders. They use AI to speed up boilerplate, but make their own architectural decisions. They complete it in half the time.

Both know React. Only one gets the job.

The bar has shifted. In 2021, employers wanted "code writers." In 2025, they need "problem solvers" who can work effectively with AI tools, not compete against them.

Why escaping tutorial hell is so hard

Knowing you're in tutorial hell isn't enough to escape it. The pattern is sticky because tutorials exploit our desire for certainty. They guarantee you won't fail because every answer is provided. Finishing courses gives you that satisfying progress bar completion. You collect certificates and feel productive.

But that safety is exactly what prevents growth. You're practicing following directions, not making decisions. You're building nothing real. You're not developing the differentiated skills that matter in today's market.

Every time you reach for another tutorial instead of opening a blank editor, you're choosing comfort over competence.

Projects offer guaranteed discomfort. No answers. No certainty. You, a blinking cursor, and anxiety. But here's the catch: that discomfort isn't a bug. It's the feature. Real learning lives in the struggle.

You need a structured way to embrace that struggle, not endless encouragement to "try harder." That's what the framework below provides.

Five signs you're stuck in tutorial hell

You finish tutorials but can't apply what you learned. You watched someone build a todo app, but when you try to make one yourself, you don't know where to start.
You search for a new tutorial every time you need to do something. Instead of trying to solve problems yourself, your first instinct is "I need a tutorial for this."
You're collecting certificates instead of building projects. Your "portfolio" is a list of courses completed, not things you've built.
Opening a blank code editor gives you anxiety. Without instructions, you freeze. The cursor blinks, and nothing happens.
You know syntax but don't know what to build or how to start. You can recognize code patterns, but you can't create them from scratch in a real situation.

If you recognize yourself in 2 or more of these signs, you're in tutorial hell. Let's get you out.

What good project-based learning looks like

Project-based learning means building from designs and requirements—no step-by-step instructions. But how do you choose the right projects? Here's what makes a good project at each level:

Good beginner projects have:

A single main feature or functionality
Clear success criteria (you'll know when it works)
Common UI patterns you'll see in real jobs
Limited scope (completable in a weekend or less)

Good intermediate projects add:

Multiple features that interact
State management challenges
Real-world data (APIs, forms)
Decisions about architecture

Good advanced projects include:

Complex state across features
Performance considerations
Scale and maintainability trade-offs
Multiple possible "right" solutions

Beginner projects: Start small and focused

When you're escaping tutorial hell, choose projects you can complete in one focused session:

Blog preview card: Build your understanding of HTML structure and CSS layout.
FAQ accordion: Build show/hide functionality and manage state.
Interactive rating component: Capture user input and display dynamic feedback.
Newsletter sign-up form: Build form validation and success states.

You get a design and requirements, then figure out the code yourself. The challenge isn't only "make it look right" but "make it work properly, handle edge cases, and write code you can understand later."

Intermediate projects: Add complexity

As you progress, tackle projects that require architectural thinking:

Contact form: Build accessible forms with multiple input types and comprehensive validation.
Calculator app: Handle complex user input and state management across operations.
Multi-step form: Manage state across multiple screens with validation and persistence.
REST Countries API: Fetch data from a real API, handle loading states and errors.

These require decisions that tutorials can't make for you. Should you use context or state management libraries? How do you structure your components? What error handling patterns make sense?

Advanced projects: Real architectural challenges

Eventually, tackle projects where there's no single "right" answer:

Bookmark manager app: Build frontend-only or full-stack with authentication and database design.
Product feedback app: Handle complex nested state and make architectural decisions in a larger codebase.
Audiophile e-commerce website: Build a complete e-commerce experience with cart, checkout, and routing.

At this level, you're solving problems that require judgment and context—exactly what AI tools can assist with but can't replace.

The 7-step plan to escape tutorial hell

Ready to make the switch? Here's your framework for moving from tutorial-based learning to project-based learning:

Step 1: Learn the absolute basics

Spend 2-4 weeks maximum on tutorials to learn:

HTML structure and semantic elements
CSS fundamentals (layout, positioning, flexbox)
JavaScript core concepts (variables, functions, arrays, objects, DOM)
Version control basics (Git and GitHub)

Don't aim for mastery. Aim for "good enough to start building." If you're picking it up quickly, move on sooner. If you need a bit more time on fundamentals, take it—but set a deadline.

Check out freeCodeCamp, The Odin Project, or Web.dev for structured basic tutorials, but remember: tutorials are just the starting point for learning to code.

Step 2: Pick a small, specific project

Choose something achievable in one weekend:

Critical: Pick something slightly beyond your current comfort zone. If it feels too easy, it won't teach you much. If it feels impossible, break it down more.

Step 3: Start building (and sit with the discomfort)

Open your code editor and start. Yes, you'll feel lost. That's the point.

If you freeze immediately (within 5 minutes), that's normal. Don't reach for a tutorial yet. Instead:

Look at the design for 30 seconds without touching the keyboard
Identify ONE element you know how to create (even if it's a div)
Write that element
Look at the design again—what's the next simplest thing?
Write that
Repeat

You're building momentum with tiny wins. The first element is the hardest. The second is easier. By the fifth, you're in flow.

If you're still stuck after 15 minutes, THEN search for specific help—but be precise: "How to center a div vertically" not "How to build a card component."

Write the HTML structure. Try the CSS. Make mistakes. Get it wrong. This discomfort is learning in action.

Step 4: Break it into tiny steps

Still overwhelmed? Break the project into absurdly small tasks:

Example: Building a card component

Add background color to the body
Create card container
Center the card on the page
Add the card background and border
Add the image
Add the title
Add the description text
Style the text
Test the spacing
Review and refine

Each small task is achievable. You'll build momentum with quick wins instead of feeling overwhelmed by "building a card component."

Step 5: Get stuck → research → solve (with AI when appropriate)

Getting stuck is learning. When you hit a wall:

❌ Don't: Go back to tutorials
✅ Do: Search for the specific problem

Search like this:

"CSS center div vertically and horizontally"
"JavaScript event listener on multiple elements"
"React useEffect cleanup function"

Be specific. Search for the exact problem you're facing, not general concepts.

How to use AI tools effectively

This could be an article all to itself, but here are some quick pointers for using AI tools effectively:

✅ After you've tried solving it yourself first, to see other possible implementations
✅ "I tried centering this div with flexbox, but it's not working. Here's my code: [paste]. Can you explain what I'm missing?"
✅ For understanding error messages: "What does this error mean: [paste error]"
✅ To review your code: "Can you review this function and suggest improvements?"

Don't use AI tools like this:

❌ Before you've attempted the problem
❌ "Write this function for me"
❌ "Take this design and build this project"
❌ Without reading and understanding what the AI suggests

Real developers search for answers every day. The skill isn't memorizing everything. It's knowing how to find solutions, evaluate them, and adapt them to your needs. Stack Overflow and MDN Web Docs are valuable resources for finding specific answers, as well as AI chatbots like ChatGPT and Claude.

When you're really stuck: Take a break. Walk away from the screen. Do the dishes. Take a shower. Your subconscious keeps working on the problem. Often, the solution clicks when you're not staring at the code.

Still stuck after trying everything? Join our community and ask for help. But ask well:

Share your code (GitHub repo or CodePen)
Explain what you're trying to do
Describe what you've already tried
Point to the specific part where you're stuck

This isn't only about getting answers. It's practicing how to communicate technical problems, a crucial skill for working on development teams.

Step 6: Review and improve

After it works, make it better:

Clean up your code. Remove duplicates, improve naming, and add helpful comments
Review AI-generated code carefully. If you used AI assistance, make sure you understand every line
Test edge cases. What happens if the user does something unexpected?
Consider accessibility. Can someone navigate this with a keyboard? What about screen readers?
Reflect on your decisions. What would you do differently next time?

Ask yourself:

Can someone else understand this code?
Would I understand this code in 6 months?
Are there any magic numbers or unclear variable names?
Does this handle errors gracefully?

This reflection is how you improve faster. It also gives you stories for interviews: "I initially tried X, but then realized Y would be better because Z."

Step 7: Share and get feedback

Deploy your project live (Netlify, Vercel, GitHub Pages)
Push code to GitHub with a comprehensive README
Submit your solution on Frontend Mentor
Share it for feedback in our community
Actually apply the feedback you get
Build the next project

Document your process in the README:

"Invoice app taught me about date formatting. GitHub Copilot's solution broke across different locales—everything was displayed in US format. Had to learn about Intl.DateTimeFormat to make it work globally."

Being transparent about your process, including how you work with AI tools, shows maturity and critical thinking.

Measuring progress: Know when you've escaped

You don't need to master everything. You've successfully escaped tutorial hell when:

You can:

Start a new project without looking for a tutorial
Debug problems you haven't seen before
Explain your code decisions clearly
Make architectural choices (even if they're not perfect)
Build something from a design without step-by-step instructions
Use AI tools strategically (not as a crutch, but as a productivity multiplier)

You have:

3-5 substantial projects you built yourself (not tutorial copies)
Code on GitHub that you can explain thoroughly
At least one project that consumed APIs or handled complex state
Experience getting stuck and finding your way out
The confidence to tackle problems you haven't solved before

You feel:

Confident opening a blank editor
Comfortable saying "I don't know, but here's how I'd figure it out"
Frustrated with tutorial pace because you want to BUILD

This isn't about perfection. It's about competence and growth trajectory. The skills you develop through project-based learning—problem-solving, architectural thinking, debugging, working with AI effectively—these are what matter in real development work.

Why Frontend Mentor works for project-based learning

Most coding practice sites give you instructions. Frontend Mentor gives you what you'd get at a real job: professional designs and requirements. Figure out the rest.

This might feel uncomfortable at first. That's intentional. That discomfort is exactly what builds the problem-solving skills that matter.

What makes this approach effective:

Real design files. You're not guessing what it should look like. You're implementing a professional design.
No solutions provided. You have to figure it out yourself. (Though the community can help when you're genuinely stuck.)
Progressive difficulty. Start with simple components, progress to complex applications.
Community feedback. Get your code reviewed by other developers learning the same skills.

When you complete a Frontend Mentor challenge, you haven't followed instructions. You've solved many small problems that build genuine experience. That's the difference.

FAQ

What do you mean by project-based learning?

Project-based learning (PBL) is a teaching method where you learn by actively working on real projects rather than passively consuming information. For developers, this means building complete applications from designs and requirements without step-by-step tutorials. You make architectural decisions, solve problems independently, and learn through hands-on experience. Unlike traditional tutorials that teach syntax, project-based learning develops problem-solving skills and decision-making abilities that employers actually need.

What is an example of project-based learning?

A concrete example: building a REST Countries API challenge where you're given professional designs and requirements, but you must figure out how to fetch data, handle loading states, implement search and filtering, manage errors, and structure your components. You're not following a tutorial—you're solving real problems. You might get stuck on API error handling, research solutions, try different approaches, and eventually ship a working application. That struggle and problem-solving process is project-based learning in action.

What are the 7 steps of project-based learning?

The 7 steps to effective project-based learning for developers are:

Learn absolute basics (2-4 weeks on core syntax)
Pick a small, specific project (weekend-sized scope)
Start building (embrace initial discomfort)
Break it into tiny steps (make progress manageable)
Get stuck → research → solve (use resources strategically, including AI)
Review and improve (refactor, test edge cases, consider accessibility)
Share and get feedback (deploy, get code reviewed, iterate)

This framework moves you from tutorial dependency to confident, independent building while developing the problem-solving skills that matter in real development work.

What are the 4 principles of project-based learning?

The four core principles of project-based learning adapted for developers are:

Active construction over passive consumption: You build projects rather than watch tutorials, forcing your brain to actively problem-solve instead of passively absorb.
Authentic challenges: Projects mirror real development work with actual designs, requirements, and constraints—not artificial tutorial scenarios.
Productive struggle: Getting stuck and working through problems develops deeper understanding than following step-by-step instructions. The difficulty is the point.
Iterative improvement: You build, get feedback, refactor, and improve—reflecting real development cycles and continuous learning.

These principles explain why project-based learning produces job-ready developers faster than tutorial-based approaches. You're practicing the actual skills you'll use daily in development roles.

Start building today

You've got the framework. You understand why tutorials aren't enough for learning to code. Now comes the part that actually changes things: building your first project.

Your path forward:

Spend max 1 month on basic tutorials
Start building small projects immediately
Follow the 20-80 rule: 20% learning, 80% building
Get comfortable being uncomfortable
Build at least 10-15 practice projects (show your best 3-5)
Get feedback and keep improving
Use AI tools strategically, not as a replacement for thinking

You're not learning to code. You're learning to solve problems with code. The only way to learn problem-solving is by solving problems.

Tutorial hell is comfortable. Project-based learning is uncomfortable. But competence lives on the other side of that discomfort.

Ready to escape tutorial hell? Start your first Frontend Mentor challenge and build something real today.

Not sure where to start? Check out our "Getting started on Frontend Mentor" learning path—small projects designed specifically for people escaping tutorial hell.

If you need some inspiration, read how community member, Toba, escaped tutorial hell and landed a professional developer role.

Build a bookmark manager app with search and filter functionality

Matt Studdert — Tue, 14 Oct 2025 10:33:47 +0000

Test your skills with this comprehensive app that includes CRUD operations, tag filtering, search functionality, light/dark themes, and authentication screens (for those who want to build a full-stack app).

We're excited to introduce our new Bookmark Manager App challenge. This project is perfect for developers looking to build a feature-rich application with real-world functionality like data management, advanced filtering, and search. You could even use what you build as your own bookmark manager!

What you'll build

Main bookmark view with light theme:

Main bookmark view with dark theme:

In this challenge, you'll create a bookmark manager app that:

Allows users to add new bookmarks with title, description, URL, and tags
Displays all bookmarks in a clean, card-based grid layout
Enables users to search for bookmarks by keyword
Lets users filter bookmarks by one or multiple tags
Provides archive functionality to organize bookmarks
Includes pin/unpin, edit, copy URL, and visit website actions
Offers multiple sorting options (recently added, recently visited, most visited)
Features light and dark theme toggle
Provides an optimal viewing experience across all device sizes
Includes hover and focus states for all interactive elements

How to start

To get started, visit the Bookmark Manager challenge page. There, you'll find:

The Figma design file to guide your project
Layouts for mobile, tablet, and desktop screens
A professional design system with details on colors, fonts, and spacings
Images optimized for the web
A README file to help you set up
A HTML file with pre-written content to get you started

This is a premium challenge, so you'll need a Pro subscription to start the project. Our premium challenges are of the highest quality and are designed to give you hands-on experience building industry-standard projects. They make excellent portfolio pieces!

Challenge yourself further

If you want to push yourself and customize the project, try adding features like:

Building as a full-stack app with user authentication to persist bookmarks across devices
Integrating an image hosting service (like Cloudinary) to store user avatars and bookmark favicons
Automatically fetching website metadata (favicon, title, description) when adding a bookmark URL
Creating a browser extension that lets users save bookmarks directly from any webpage
Implementing duplicate detection to prevent saving the same URL multiple times
Adding keyboard shortcuts for quick actions (add bookmark, search, navigate)
Adding progressive web app (PWA) capabilities for mobile installation and offline access

Join the community

Need help or want to share your work? Join our Discord community, where thousands of developers discuss projects, share resources, and support each other.

We look forward to seeing what you create. Happy coding!

Introducing the Frontend Mentor 30-Day Hackathon!

Matt Studdert — Wed, 10 Sep 2025 10:10:22 +0000

We're delighted to announce our first-ever hackathon! Whether you're just starting your coding journey or you're a seasoned developer, this is your chance to challenge yourself, connect with our amazing community, and potentially win a year of Frontend Mentor Pro!

What's the FM30 Hackathon?

The hackathon started on Friday, September 5th. You have 30 days to build your best solution to our brand new Weather App challenge. No need to rush or pull all-nighters – this hackathon is about creating the highest-quality solution you can within 30 days while sharing your journey with the community.

After 30 days, the Weather App challenge will remain on the platform, just like all our other challenges. So if you'd rather skip the hackathon and build at your own pace, that's totally fine! The hackathon simply adds a fun, time-bound element to our free challenge launches for those who want that extra motivation.

For this inaugural hackathon, you'll build a weather application using the Open-Meteo API (more details below). It's a practical project that millions use daily, and you'll learn to work with real-world data along the way. Even if you don't win, you'll walk away with a polished portfolio piece and some new skills under your belt!

How to participate

Getting started

Download the challenge: Grab the free Weather App starter files from the challenge page. As always, everything you need to know about the challenge is in the README.
Build your solution: Use these 30 days to create something you're genuinely proud of. Focus on quality over speed, and consider extending beyond the basic requirements. We've included some inspiration in the "Ideas to test yourself" section of the challenge page.
Share your progress: Post updates using #FM30Hackathon on social media. We'll be watching and resharing standout posts to help boost your visibility!
Submit your solution: Follow the submission guidelines below before the deadline.

Submission guidelines

Where to submit

Post your solution in the #hackathon-submissions Discord channel under the Weather App thread.

What to include

Your Discord submission needs just one thing: a link to your solution on Frontend Mentor. This makes it easy for the community to review your work, and since likes and bookmarks factor into the selection process, you'll want as many people as possible to view your solution page.

Please create only one submission post. Duplicates will be removed and could lead to disqualification.

Critical requirements

Custom README: Your GitHub repo must include a personalized README file (we provide a template in the starter files). Tell us about your process, the details you added, and the challenges you overcame. Including a custom README is mandatory – no README, no valid submission!
Meaningful commit history: Show your work! We want to see your progress through multiple commits, not just one mega-commit at the end.
Public accessibility: Make sure everyone can view your live solution and repository.
Submission deadline: We'll lock the Discord hackathon thread for this challenge on Monday, October 6th at 09:00 AM BST.

How we'll choose winners

Stage 1: Community love

Throughout the hackathon, the community can react to submissions in the Discord channel with:

❤️ General appreciation – The default "I like this!" reaction
🎨 Visually impressive – For solutions that nail (or improve!) the visual design
💡 Creative solution – For clever features, extensions, or other creative approaches
🧩 Code quality – For clean code, accessibility, best practices, or technical excellence

Please don't react to your own submission – these will be removed, and repeated attempts could disqualify your entry. Let the community do the celebrating!

We'll also track likes and bookmarks on your Frontend Mentor solution page, so be sure to share that link with your network to increase visibility for your solution.

Stage 2: Our shortlist

Our team reviews all valid submissions and selects five standouts based on:

Community engagement (all those reactions and platform likes!)
Code quality and best practices
How well you've met (or exceeded!) the requirements
README quality – seriously, be sure to focus on this!

Stage 3: Community vote

The five shortlisted solutions go to a public vote where you all choose the top three winners!

Prizes

We're keeping it simple, but meaningful, for our first hackathon:

🥇 1st place: One-year Frontend Mentor Pro subscription ($96 value!)
🥈 2nd place: One-month Pro subscription
🥉 3rd place: One-month Pro subscription

The Weather App challenge

You'll build a weather application using the free Open-Meteo API. At a minimum, users should be able to:

Search for weather information by entering a location in the search bar
View current weather conditions including temperature, weather icon, and location details
See additional weather metrics like "feels like" temperature, humidity percentage, wind speed, and precipitation amounts
Browse a 7-day weather forecast with daily high/low temperatures and weather icons
View an hourly forecast showing temperature changes throughout the day
Switch between different days of the week using the day selector in the hourly forecast section
Toggle between Imperial and Metric measurement units via the units dropdown
Switch between specific temperature units (Celsius and Fahrenheit) and measurement units for wind speed (km/h and mph) and precipitation (millimeters) via the units dropdown
View the optimal layout for the interface depending on their device's screen size
See hover and focus states for all interactive elements on the page

But don't stop there! This is your moment to push yourself! Add features, polish the UI, add delightful animations – show us what makes your solution special. You can check out "Ideas to test yourself" on the challenge page for inspiration, but we'll add them here as well:

Add geolocation detection to automatically show weather for the user's current location on first visit
Implement a favorites/saved locations system where users can bookmark frequently checked locations
Implement a "Compare Locations" feature to view weather side-by-side for multiple locations
Include UV index, visibility, and air pressure data (available via Open-Meteo)
Add sunrise/sunset times with visual indicators
Add animated weather backgrounds that change based on current conditions
Implement voice search functionality
Create dark/light mode themes that adapt to the time of day
Add progressive web app (PWA) capabilities for mobile installation

The Open-Meteo API is free, requires no API key, and has generous rate limits, so you can focus on building rather than dealing with authentication hassles.

Tips for success

Start today, not tomorrow: Beginning early gives you time to experiment, iterate, and polish. Plus, you can help others who get stuck on things you've already solved!
Document your journey: Share progress on your socials with #FM30Hackathon. We love seeing work-in-progress shots, lessons learned, and those "aha!" moments. We'll keep an eye on the hashtag and reshare selected posts. You might just inspire someone else to keep going!
Engage with others: The hackathon is as much about community as competition. Help others in Discord, share resources, and celebrate each other's wins.
Quality beats complexity: A clean, well-documented, accessible solution that nails the basics will beat a complex but buggy app every time.
Make it yours: While meeting the requirements, add your personal touch. What would make YOU want to use this weather app daily?

FAQs

Can I use any framework or library? Yes! React, Vue, vanilla JS, whatever you're comfortable with. This is about the final result, not the tools.
Just one submission per person? Correct – pour all your energy into making one stellar solution rather than several rushed ones.
Can I team up? This is a solo challenge, but helping each other learn and debug in Discord is strongly encouraged.
I'm new to coding – should I participate? Absolutely! Hackathons are fantastic learning experiences. Focus on completing a working solution and writing a great README. Simple, clean, and well-documented can definitely win!
Can I use AI tools? Yes, but make sure you understand and can explain every line of code in your solution. The README should reflect your learning journey and working process.

Important details

🗓️ Key dates

Starts: Friday, September 5th
Submissions close: Monday, October 6th at 09:00 AM BST
Winners announced: Thursday, October 9th

🔗 Quick links

Ready to start?

We can't wait to see what you build! Our hackathons are a fun chance to push yourself to create something you’re proud to share. We hope you enjoy the process and learn something new along the way!

Got questions? Remember to drop them in our Discord #help channel, and we'll be there to support you.

Happy coding! 🎉

Build a multi-page recipe website with search and filtering

Matt Studdert — Wed, 06 Aug 2025 15:53:50 +0000

We're excited to introduce our new Recipe Finder Website challenge. This project is perfect for developers looking to build a complete multi-page website with real-world functionality like search, filtering, and responsive layouts.

What you'll build

Homepage and about page:

Recipes index and detail pages:

In this challenge, you'll create a recipe finder website that:

Features four distinct pages: home, about, recipes index, and detailed recipe views
Allows users to search for recipes by name or ingredient
Lets users filter recipes by maximum prep or cook time
Displays recipes in a clean, organized layout
Shows detailed recipe information including ingredients, instructions, and cooking times
Provides an optimal viewing experience across all device sizes
Includes hover and focus states for all interactive elements

How to start

To get started, visit the Recipe Finder challenge page. There, you'll find:

The Figma design file to guide your project
Layouts for mobile, tablet, and desktop screens
A professional design system with details on colors, fonts, and spacings
Images optimized for the web
A README file to help you set up
A HTML file with pre-written content to get you started

Challenge yourself further

If you want to push yourself and customize the project, try adding features like:

Implementing responsive images using the provided small and large image variations
Creating smooth page transitions and micro-interactions without heavy frameworks
Updating the data and adding new filters for dietary restrictions or difficulty levels
Letting users adjust serving sizes and automatically recalculating ingredient quantities
Allowing visitors to save favorite recipes that persist between sessions

Join the community

Need help or want to share your work? Join our Discord community, where many developers discuss projects, share resources, and support each other.

We look forward to seeing what you create. Happy coding!

Practice your JavaScript skills by building a Character Counter app

Matt Studdert — Fri, 31 Jan 2025 14:36:18 +0000

We’re excited to introduce our new Character Counter challenge. This project is a great way to practice your JavaScript skills by building a tool that counts characters, words, and sentences in a text.

What you'll build

In this challenge, you'll create a character counter app that:

Counts characters, words, and sentences in the user's text.
Allows users to include or exclude spaces in the character count.
Lets users set a character limit and warns them if they go over it.
Shows an estimated reading time for the text.
Displays a graph showing how often each letter appears in the text.
Offers different color themes for users to choose from.
Is fully usable with just a keyboard.
Looks good on devices of all sizes.

How to start

To get started, visit the Character Counter challenge page. There, you'll find:

The Figma design file to guide your project.
Layouts for mobile, tablet, and desktop screens.
A design system with details on colors and fonts.
Images optimized for the web.
A README file to help you set up.
A HTML file with some starter content.

This is a premium challenge, so you’ll need a Pro subscription to start the project. Our premium challenges are of the highest quality and are designed to give you hands-on experience building industry-standard projects. They make excellent portfolio pieces!

Challenge yourself further

If you want to push yourself and customize the project, try adding features like:

Counting lines or spaces.
Creating a graph that shows how often each word appears (similar to the letter density graph).

Join the community

Need help or want to share your work? Join our Discord community, where many developers discuss projects, share resources, and support each other.

We look forward to seeing what you create. Happy coding!

Introducing Frontend Mentor for Teams!

Matt Studdert — Fri, 06 Sep 2024 10:42:46 +0000

Since starting Frontend Mentor, we've helped individual developers around the world improve their coding skills by building realistic projects. Seeing the transformations in both competence and confidence is always amazing as people move away from passive learning (e.g., tutorials) and towards active skill application.

And now, we're delighted to launch Frontend Mentor for Teams, where we aim to help companies and educators incorporate project-based learning into their developer training!

Here's the full announcement article, which you can also read on the Frontend Mentor platform 👇

Over the past five years, we’ve helped tens of thousands of developers (886,604 at the time of writing, to be precise!) improve their skills and confidence through project-based learning.

Something magical happens when people stop passively consuming content and start focusing on active skill application instead. After all, there’s only one way to truly master a skill: practice.

There really is no better way to boost skills than consistent, repetitive, intentional practice. It doesn’t sound overly glamorous, but it’s true. It’s true for any skill you aim to master, and it’s no different with coding: intentional practice will take you further than any video tutorial ever can.

Since we started Frontend Mentor, we’ve helped developers rack up hundreds of hours of hands-on keyboard, pulling your hair out over a bug only to realize you’re missing a semicolon, real-life experience.

And there’s nothing better than experience—not even a shiny certificate (although they’re nice, too)!

Our core focus has so far been helping developers get into the industry. However, over the years, we’ve noticed that more and more professional developers are subscribed to Frontend Mentor Pro as part of their professional training. Their companies want to use Frontend Mentor to help upskill their developers by making it easier to clock up productive hours building projects.

It’s not just companies with in-house developers, though. We’ve worked with coding bootcamps to incorporate Frontend Mentor challenges into their curriculum. They’ve realized that adding realistic projects can massively boost their students skills and help get them ready for life as professional developers. It also provides an easy way for teachers to give feedback on student submissions.

So, we’re excited to announce a new offering to help companies and educators efficiently manage multiple Pro licenses: Frontend Mentor for Teams!

How it works

The first version is extremely simple:

An admin (perhaps an engineering manager, team lead, CTO, or instructor) creates an account on the Teams platform.
They add the required number of seats for their team.
The admin then fills the seats with Frontend Mentor users, unlocking access to Pro on their accounts.

Admins can easily manage their learners through the Teams platform. This includes easily checking activity and progress through each learner’s public profile.

Future plans

We wanted to keep the first version as simple as possible, but we have exciting plans for the Teams platform going forward.

Our mission remains the same: to help people worldwide become confident, competent developers. Our combination of project-based learning and community mentorship is a powerful skill multiplier for developers of all experience levels.

We want more developers in our community to give helpful advice and feedback to people seeking support. The benefits go both ways: the recipient learns from the feedback provided, and the person giving the feedback reinforces their knowledge and improves their communication and mentorship skills…all valuable for career progression!

So, not only do we see loads of value in professional developers completing our projects for skill progression, but it is also an incredible opportunity for companies to level up their developers by embedding them in the Frontend Mentor community so they can both give and receive feedback to progress even further.

We haven't finalized details yet, but features like customizable learning paths, team branding, and progress tracking are areas we're exploring. If you’re in a company or coding school and think project-based learning could be helpful as part of your training, why not give Frontend Mentor for Teams a try!

Also, if you work as a professional developer at a company, your company may be happy to support your professional development through a Teams subscription. We wrote a guide on how to get manager approval for Frontend Mentor for Teams that may help you pitch the idea inside your company 🙂

Introducing the new Frontend Mentor Hiring platform!

Matt Studdert — Tue, 28 Nov 2023 16:52:44 +0000

It's been over two years since I first mentioned our plans to create a Hiring Platform for Frontend Mentor. In hindsight, I announced it way too early in our thinking process, but the response was extremely encouraging. As we started building, we realised Frontend Mentor there was a lot we needed to improve on the main platform, which took priority. But we kept chipping away at it, and today, I'm absolutely delighted to finally announce that we have officially launched our Hiring Platform and are actively finding companies who hire early-career developers to connect them with developers in our community.

Here's our full announcement, which you can also read on our platform 👇

At Frontend Mentor, we firmly believe that project-based learning is a powerful way to grow your skills. Over the years, we've found a place in the web development learning space, helping developers worldwide gain hands-on experience building projects using a professional workflow.

As we've grown, our mission as a company has evolved, with our focus now on helping create equal opportunity for people worldwide to become developers. Our professionally designed projects have already helped many people get hired and become confident front-end developers.

The focus on a professional workflow uniquely positions our community to understand more about the expectations of life as a developer. With over 10,000 solutions submitted each month, we have a lot of project-based data to help companies discover exceptional early-career developers who meet their hiring needs.

So, I am unbelievably excited to announce the next step in our mission with the official launch of the Frontend Mentor Hiring platform!

This project has been in the works for quite a while now, so it feels great to announce it fully. Since we first started planning it, the tech landscape has changed drastically. With many large tech companies laying off employees and the rise of AI tooling raising many questions about what the future of web development will look like, there's been a palpable air of uncertainty in the community.

However, based on our own internal experience and research from companies like GitHub, we are extremely optimistic and feel that the rise of AI tooling only makes early-career developers more hireable and productive than ever. Because everyone now has access to an AI pair programmer, like GitHub Copiliot, or large language model-based chatbots like ChatGPT, Bard, and Claude, answers and help are much easier to come by. As we move into the company's next phase, we aim to help our community stand out in the job market as much as possible and create the most hireable early-career developers around.

How our approach helps developers prepare for life as a professional

As I mentioned above, we believe the best way to learn web development is by actually doing it. That's why our platform is all about giving our community realistic projects where they take a professional design, use industry-standard tools and workflows (e.g., VS Code and Git version control), and build portfolio-ready projects.

By working on our challenges, learners get a taste of what it's like to be a professional developer. They learn how to build a design and brief, fix problems, use modern tools and frameworks, and write clean code that others can understand.

A huge part of Frontend Mentor is our community. Developers can share their projects, give and receive feedback, and work with others. All this helps improve their coding skills while developing the soft skills necessary to become a valuable team member.

These are all skills we aim to keep helping our community develop to prepare them for life as a professional developer.

The Hiring Platform: connecting companies with exceptional early-career developers

This brings me to the new Hiring Platform! With thousands of incredibly talented developers in our community, we aim to make discovering and hiring exceptional early-career talent as simple as possible.

The Hiring Platform helps companies:

Start talking to skilled candidates in minutes: Our Talent Search helps companies find the best developers based on their requirements. They can filter candidates by experience, skills, location, contract type, and more. This will save a lot of time instead of wading through mountains of resumes.
Access a diverse, skilled, and passionate talent pool: The Frontend Mentor community is global. We have high-quality developers from all backgrounds who hone their coding skills by building projects and giving each other feedback.
Evaluate proven skills, not self-reported claims: Our project-based developer platform allows companies and recruiters to review candidates' work before making contact. They can evaluate their competency based on completed projects rather than relying on self-reported skills.
Save time by contacting high-intent candidates: All candidates on our Hiring Platform are actively looking for work. So they are ready and waiting to hear about opportunities. Recruiters can find developers who meet their needs in minutes and start chatting!
Drastically reduce hiring costs: Our flexible subscription options come with no hidden hiring fees and unlimited hiring, enabling companies to save significantly compared to other talent-sourcing channels. They can hire as many developers as they want with no additional expenses. We also offer a guided hire flat fee service for anyone who needs help discovering and screening high-quality candidates.

We want to help companies cut through the noise and mountains of applications to find the perfect candidates who meet their needs. We already have a massive pool of exceptional talent and aim to grow considerably over the coming years.

So, how does it all work?

For developers

Developers continue completing challenges, engaging with others through feedback, and growing skills on the main platform. When they reach 150 points, they can set themselves as available for work and complete their Talent Profile. This doesn't guarantee anything, but it means they're eligible to appear in searches on the Hiring Platform and receive messages from potential employers.

If you're not already registered, you can sign up to Frontend Mentor here and start taking challenges 🤗

For companies and recruiters

Once signed up on the Hiring Platform, companies can use our Talent Search to find candidates who meet their hiring needs. Clicking through to a candidate takes them to their Talent Profile, where they can review all relevant hiring information, portfolio/GitHub/LinkedIn, and featured projects. If someone stands out, they can send them a direct message and start the conversation!

Here's a preview of what the top half of the Talent Profile looks like:

We also offer our guided hire service for companies that don't have internal hiring processes and need a hand. Nobody knows our community like us, so, for a flat fee, we can help shortlist excellent candidates to save time and minimize hiring risk.

Are you looking to hire exceptional early-career developers?

If you're hiring now or think you might in the future, check out our Hiring Platform. We have so many incredibly talented developers in our community looking for opportunities, and we can't wait to help you hire them.

A better way to discover junior front-end developers

Matt Studdert — Wed, 17 Nov 2021 15:12:17 +0000

Since launching the Frontend Mentor platform in April 2019, our community has grown to over 250,000 members (🎉). The idea for Frontend Mentor came to me when I was teaching front-end web development at General Assembly. I wanted to make it easier for my students to practice and create projects for their portfolios.

Our projects, or "challenges", mimic a real-life workflow for a front-end developer. In a professional setting, a designer would do the design work, and it would then be the developer’s job to recreate it in code.

Our challenges help developers focus on what developers do best: writing code. We come up with the project ideas and the designs; our community builds the projects to help improve their coding skills. Not only does this mean they gain hands-on experience working from realistic designs, but it also means our community members end up with a professional-looking portfolio of beautiful projects!

Example screenshot of a Frontend Mentor challenge Figma design file

It's been incredible to see Frontend Mentor grow into a vibrant, positive community where everyone supports each other.

As we've looked for more ways to help our community, we found one common theme: it's hard to land junior roles.

Recurring sticking points include:

Companies often have unrealistic expectations. For example, it's not uncommon to see junior roles advertised requiring several years of experience.
Many interview processes include whiteboarding assessments based on algorithms, even for junior front-end roles.
Good junior job listings are often hyper-competitive. Some even receive hundreds of applications in the first day or two of being advertised.
Companies are often vague about their salary ranges, interview process, and training paths.

Helping our community find work has always been a goal of Frontend Mentor. To better understand the problem, we started talking to people in hiring positions to see if they also experienced difficulties hiring juniors.

It very quickly became apparent that they did! Common issues people in hiring positions highlighted when hiring juniors include:

There’s no clear “best” strategy for discovering junior talent. Companies often use a mixture of job listings, partnerships with educational institutions, trawling LinkedIn, and getting recommendations from existing employees.
Large numbers of applicants, many of whom don't meet the specified criteria. This means companies are often drowning in a sea of resumés and cover letters.
The resumé and cover letter review process is often very high level and error-prone, so it's easy for talented developers to slip through the net.
GitHub profiles can be hard to navigate when trying to find suitable projects to assess skills.
Portfolio projects can often be old, and the developer might have only had a small role in the codebase.
Portfolio projects for juniors often don't look great (after all, developers are not designers), so it can be hard to see past the UI/UX and focus on the code.
There's no track record to base decisions on, so finding the right developer can be a lottery.
The process is often bloated and inefficient. There can be many stages, including initial applications, resumé review, screening calls, technical tests, in-person interviews, and more.

After talking to a wide range of people, we believe we're in a unique position: we have an opportunity to help both the developers within our community and companies looking to hire juniors.

Introducing the Frontend Mentor Hiring platform

Due to launch in early 2022, we've started working on a hiring platform to complement our learning platform. Our mission will be to help connect great companies with our incredible developer community.

Our first offering within the hiring platform will be called Talent Search, which will enable companies to search for developers using specific criteria. This includes attributes like experience, skills, and location. Talent Search will then surface the developers on our platform that best match these criteria.

Talent Search will make it possible to proactively search for developers instead of waiting for people to apply to open roles. In a sea of resumés and cover letters, so many talented developers can slip through the cracks with traditional job applications. Our goal is to let the completed projects and code reviews posted speak for themselves. This will provide incredible insights into developers' talent, knowledge, and written communication skills.

It might even help bypass a stage or two of the hiring process, saving time and money. We've had numerous developers in the community who have been hired based on the strength of their Frontend Mentor projects. After a technical conversation about their projects and an interview, they've received job offers. We’d love to make this a regular occurrence!

// Detect dark theme var iframe = document.getElementById('tweet-1429791321703829513-331'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1429791321703829513&theme=dark" }

The developers will have to state that they're available for work through their settings. If a developer doesn't opt-in, they won't show up on the hiring platform. Showing only the developers looking for work will filter out the noise for hiring managers. It will also ensure our developers aren't receiving unsolicited messages when they're not looking for a new job.

We have lots of ideas for the hiring platform, but we'll start with our Talent Search offering and evolve it from there based on feedback.

What can you do?

If you're involved in your company's hiring process, please check out the hiring platform page on Frontend Mentor, where you can learn more and sign up for our waitlist.

If you're already a professional developer, please share with anyone in your organization who is part of the developer hiring process.

We'll launch a closed beta before our public launch. We'd love to get as much feedback as possible to provide a great solution that works for everyone. Also, if you've got any questions, please feel free to ask!

16 front-end projects (with designs) to help improve your coding skills

Matt Studdert — Thu, 26 Mar 2020 14:45:04 +0000

There's nothing quite like building projects to grow as a developer. Tutorials are a brilliant learning tool. But at some point, the training wheels need to come off and you need to start building.

The problem is, as developers, we're often not the best at making things look great ourselves 😅

I wouldn't even know where to begin if someone asked me to create something beautiful from scratch! But, if a designer hands me a design I'll more than happily code it up.

If you're in the same boat, we've got some great projects for you at Frontend Mentor. Each one includes mobile & desktop designs, a front-end style guide (for fonts, colors, etc) and a basic brief. The assets are all provided and pre-optimized meaning all you need to focus on is writing the code!

You can use any tools you like while building each project. So if you're wanting to practice things like React, Vue, Sass, Tailwind you get to choose your setup.

So, without further ado let's get started on the first challenge:

1) Single price grid component

Requirements	Difficulty	Type	URL
HTML, CSS	Newbie	Free	View Project

This challenge is a perfect starting point. Instead of building an entire landing page, your task is to build a single component.

Brief

Your users should be able to:

View the optimal layout for the component depending on their device's screen size
See a hover state on desktop for the Sign Up call-to-action

Learning Outcomes

Although small, this project presents some nice layout challenges. It's a great opportunity to practice Flexbox or CSS Grid. You'll also get the basics of building a responsive component.

2) Four card feature section

Requirements	Difficulty	Type	URL
HTML, CSS	Newbie	Free	View Project

You'll face an interesting layout test in this project. How would you approach the vertically centered cards?

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size

Learning Outcomes

This will be another useful challenge to build up your confidence when laying out elements. You'll have to choose the best approach to align the cards and make them re-align down to mobile screen size.

3) Huddle landing page with a single introductory section

Requirements	Difficulty	Type	URL
HTML, CSS	Newbie	Free	View Project

This challenge will build on the other two and take it up a notch. You'll need to think about how best to position and space the elements out on the page.

Brief

Your users should be able to:

View the optimal layout for the component depending on their device's screen size
See hover states on desktop for all interactive elements

Learning Outcomes

Think about positioning images and content next to one another. Scaling the content down to mobile without it looking too squashed will be a challenge as well.

4) Base Apparel coming soon page

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Newbie	Free	View Project

You'll get your first sprinkling of JavaScript in this challenge. You'll need to validate the form when it's submitted. Oh, and there's a sneaky layout order swap with the written content and the image from desktop to mobile.

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page
Receive an error message when the form is submitted if:
- The input field is empty
- The email address is not formatted correctly

Learning Outcomes

You'll learn how to do basic form validation on a single field. This project will also take a bit of layout planning, so be sure to take some time, in the beginning, to think it through.

5) Intro component with sign-up form

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Newbie	Free	View Project

Now that you've done form validation on a single field, how about doing it on four? Also, don't forget to make sure the inputs are accessible to screen reader users!

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page
Receive an error message when the form is submitted if:
- Any input field is empty
- The email address is not formatted correctly

Learning Outcomes

By now you should have a good handle on basic layout. So the main learning outcome here will be how to write reusable JavaScript code to check the validity of the different form fields.

6) Pricing component with toggle

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Junior	Free	View Project

This pricing component challenge will present a nice layout challenge for you. Especially if you go for the bonus mentioned below!

Brief

Your users should be able to:

View the optimal layout for the component depending on their device's screen size
Control the toggle with both their mouse/trackpad and their keyboard
Bonus: Complete the challenge with just HTML and CSS

Learning Outcomes

If you go for the bonus you'll need to think through your HTML structure carefully. You'll need the perfect markup to be able to make use of pseudo-classes and sibling selectors for the toggle.

7) Insure landing page

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Junior	Free	View Project

There's only a tiny bit of JavaScript for this challenge with the mobile navigation toggle. But it will be the first time that you're building a multi-section landing page on this track.

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page

Learning Outcomes

Take some time to plan this out before diving into the code. You'll be faced with some interesting tests placing the background patterns.

8) Fylo dark theme landing page

Requirements	Difficulty	Type	URL
HTML, CSS	Junior	Free	View Project

Back to pure HTML and CSS for this one. It's quite a long landing page, so your layout skills will be really tested.

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page

Learning Outcomes

This challenge is all about the layout. Try to pay attention to the responsiveness and get it looking good at all screen sizes.

9) URL shortening API landing page

Requirements	Difficulty	Type	URL
HTML, CSS, JS, API	Intermediate	Free	View Project

This challenge will give you the first taste of pulling data from an API. You'll be integrating with the rel.ink API to build a fully-functional URL shortener.

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
Shorten any valid URL
See a list of their shortened links, even after refreshing the browser
Copy the shortened link to their clipboard in a single click
Receive an error message when the form is submitted if:
- The input field is empty

Learning Outcomes

Learn how to make HTTP requests and integrate with an external API. This could also be a good project to start diving into JS libraries/frameworks like React or Vue. Also, have a go at using localStorage to save the list of shortened links if the user refreshes their browser.

10) Manage landing page

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Intermediate	Free	View Project

This landing page will give your CSS skills a nice test. There are some background patterns that need to be positioned accurately and some little details in the switch from desktop to mobile. There are also a few areas that will require some JS.

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page
See all testimonials in a horizontal slider
Receive an error message when the newsletter sign-up form is submitted if:
- The input field is empty
- The email address is not formatted correctly

Learning Outcomes

Your major takeaways from this challenge will be related to CSS and layout. If you haven't done so by now, you might want to try out a pre-processor, like Sass, to help keep your code maintainable.

11) Bookmark landing page

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Intermediate	Free	View Project

Another landing page challenge to reinforce what you learned in the last challenge. This one includes a couple of trickier elements though. Firstly, the background patterns aren't included as assets in the download, so you need to code them yourself. Secondly, we've got a couple of JS-based components with the feature tabs and FAQs section.

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page
Receive an error message when the newsletter form is submitted if:
- The input field is empty
- The email address is not formatted correctly

Learning Outcomes

This challenge will help solidify your knowledge and refine workflow when creating a fairly complex layout. This is another good opportunity to use a pre-processor. You might even want to have a go at using a UI framework, like Tailwind, if you're feeling comfortable with pure CSS/Sass by now.

12) Job listings with filtering

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Intermediate	Free	View Project

Now that you've got a bit more comfortable with JavaScript, let's practice some filtering. In this challenge, you'll need to filter the job listings by the categories selected. There are two options to choose from for how to approach it:

Option 1: Filter job listings based on the categories using the HTML data- attribute. In this option, you'd use the hardcoded content that already exists in the index.html file.
Option 2: Use the local data.json file to pull the data and then dynamically add the content. This would be perfect if you're looking to practice a JS library/framework like React, Vue, or Svelte.

Brief

Your users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page
Filter job listings based on the categories selected

Learning Outcomes

You'll learn how to use JavaScript to filter items in the DOM. This is a key skill when building client-side applications, so this challenge will be great practice!

13) Rock, Paper, Scissors game

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Advanced	Free	View Project

Let's move away from landing pages and filters for a moment and build a game. This Rock, Paper, Scissors game will test both your CSS skills and your JS chops. There's even a bonus game of Rock, Paper, Scissors, Lizard, Spock if you're feeling adventurous!

For those of you who don't know about Rock, Paper, Scissors, Lizard, Spock, take a look at this:

Brief

Your users should be able to:

View the optimal layout for the game depending on their device's screen size
Play Rock, Paper, Scissors against the computer
Maintain the state of the score after refreshing the browser (optional)
Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)

Learning Outcomes

This challenge will give your logic-based problem-solving skills a nice run-out. Try to push yourself to build the bonus game if you can. This is another opportunity to practice using localStorage to maintain the state of the game if the user refreshes their browser.

14) REST Countries API with color theme switcher

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Advanced	Free	View Project

This is a perfect challenge to start really testing your skills and integrating with a 3rd-party API. You'll be using the REST Countries API to pull data from. This one is perfect for practicing JS libraries/frameworks!

Brief

Your users should be able to:

See all countries from the API on the homepage
Search for a country using an input field
Filter countries by region
Click on a country to see more detailed information on a separate page
Click through to the border countries on the detail page
Toggle the color scheme between light and dark mode (optional)

Learning Outcomes

You'll learn a lot during this challenge. You can use it to practice anything you like, so try to push yourself.

15) myteam multi-page website

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Advanced	Premium	View Project

This is one of our premium (paid) challenges and it offers an awesome chance to build a multi-page website that would look great in your portfolio. If you want to experience the closest feeling to being a professional developer, our premium challenges are where it's at. Our premium challenges come with mobile, tablet, and desktop designs. They also include the original Sketch design file and a simple, but professional design system.

Brief

Your users should be able to:

View the optimal layout for each page depending on their device's screen size
See hover states for all interactive elements throughout the site
See the correct content for each team member on the About page when the + icon is clicked
Receive an error message when the contact form is submitted if:
- The Name, Email Address or Message fields are empty should show "This field is required"
- The Email Address is not formatted correctly should show "Please use a valid email address"

Learning Outcomes

If you've never built a multi-page website you should learn loads by completing this challenge. Because it's a larger site, planning it out first is a must. Focus on structuring your CSS/Sass/Styles (or whatever) to keep your code scalable. Some great patterns to look into here are ITCSS, SMACSS, and 7:1. They're all great approaches and will help massively when building larger websites.

16) Minimalist portfolio website

Requirements	Difficulty	Type	URL
HTML, CSS, JS	Intermediate	Premium	View Project

If you've got this far then you're definitely going to need a great looking portfolio site to show off your hard work! That's exactly what you can use this challenge for. Build it to the design and then customise it to make it your own.

Brief

Your users should be able to:

View the optimal layout for each page depending on their device's screen size
See hover states for all interactive elements throughout the site
Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section
Receive an error message when the contact form is submitted if:
- The Name, Email Address or Message fields are empty should show "This field is required"
- The Email Address is not formatted correctly should show "Please use a valid email address"

Learning Outcomes

This challenge is another great opportunity to practice writing reusable and maintainable code. As I mentioned above, premium challenges come with mobile, tablet, and desktop designs and include the original Sketch design file. So you can really practice building a fully-responsive website.

Go forth and code!

If you've got this far, well done! There are more free challenges on Frontend Mentor, so please check it out and browse around.

Whenever you submit a solution on the platform you receive an automated report that includes:

An accessibility audit
A HTML validation check

These can help you find issues with your code. You'll also be able to receive feedback from the community, so be sure to ask questions when you submit your solution!

Another great way to learn more is to actually write some code reviews yourself! So please feel free to dive in and start answering questions and giving feedback. You'll learn loads and it also has the nice benefit of helping others! 🙂

I hope you find the challenges useful to practice on and build up your portfolio and confidence as a developer.

I always love hearing feedback and suggestions, so please feel free to let me know if you have any!

Introducing Frontend Mentor - Supercharge your front-end skills by building real projects

Matt Studdert — Wed, 03 Oct 2018 13:13:59 +0000

During the summer I had an idea that I thought would help people improve their front-end skills.

There are so many incredible sites and services out there for helping people learn to code. Companies like General Assembly, where I teach in London, and sites like freeCodeCamp do an amazing job at teaching people from the ground up.

But, I wanted to create a resource for people who already knew some HTML, CSS, and JavaScript. Not a step-by-step course, or code along, but a hands-off, project-based resource that emulates a real-life workflow as much as possible.

So, I'd like to introduce you to Frontend Mentor.

I've had a mini-site up for a few months to test the idea and get feedback. But now it's full-steam ahead with a new brand and full re-design of the site.

Challenges on Frontend Mentor

For the challenges, I've created fictional brands to build the designs around. This helps each challenge mimic a real-life workflow. It's like building a site for an actual client!

The challenges include mobile and desktop designs, starter code (including optimised assets). A front-end style guide is also provided, which includes colours, fonts etc.

Here’s a screenshot of the desktop preview for one of the challenges:

And the mobile preview:

If you would like to take a challenge, simply download a starter code from the site and you're away. I've decided to keep the starter code as downloads, instead of using a browser-based editor. This is because I want people to use the text editor and tools that they're most comfortable with.

Plans for the future

Over the coming weeks, I'm going to be adding new challenges to the site. I'll build out a proper /challenges index page to allow for filtering etc.

I'm also thinking about the different types of challenges to offer on Frontend Mentor. I like the thought of having smaller components for quicker challenges and even multi-page sites for people who want a real challenge.

I'll be adding some challenges that involve a bit of JavaScript as well. One of my goals is to offer ‘Bring Your Own Frontend’ (BYOF) challenges. For these challenges, Frontend Mentor would provide the designs and a documented public API. People can then choose which JavaScript library/framework to practice with.

Please give your feedback and share it around

This is the absolute beginning for Frontend Mentor, so please do let me know your thoughts. There are so many different directions I could take this in and I'd love to hear your ideas.

Feel free to join the Slack community on the site as well to get help on the challenges and to help others out.

Also, follow Frontend Mentor (@frontendmentor) on Twitter for the latest updates.

I look forward to hearing everyone’s feedback! Please share the site with anyone who you think it could help 🙌

DEV Community: Frontend Mentor

The FM30 hackathon returns: Build a typing speed test!

What's the FM30 Hackathon?

How to participate

Getting started

Submission guidelines

How we'll choose winners

Stage 1: Shortlisting

Stage 2: Community vote

Prizes

The challenge

Tips

FAQs

Key dates

Links

Let's go!

12 full-stack project ideas (with designs) for your developer portfolio

What makes a project "full-stack"?

1. Frontend implementation

2. Backend development

3. Database management

4. Production considerations

Complete example: Todo app as a full-stack project

The 12 full-stack project ideas

Foundation projects: learning core full-stack patterns

1. Todo app

2. Bookmark manager

3. Note-taking web app

4. Markdown editor

Intermediate projects: multi-feature applications

5. Personal blog

6. Mood tracking app

7. Entertainment web app

8. Product feedback app

9. Kanban task management app

Advanced projects: production-scale applications

10. Invoice app

11. Link-sharing app

12. Personal finance app

How to present these projects in your portfolio

Essential information for each project

README best practices

What to highlight in descriptions

Portfolio website structure

Taking it further: adding full-stack features

Authentication & authorization

Real-time features

Third-party integrations

Advanced data features

Production polish

Common mistakes to avoid

Weak project documentation

Missing production deployment

Not explaining the full-stack work

Outdated or abandoned projects

FAQ

What should be on a full-stack developer portfolio?

How many projects should a full-stack portfolio have?

Do I need to build everything from scratch?

Should I include team projects or only solo work?

What is an example of a full-stack project?

What are some fun full-stack project ideas?

How to do full-stack projects?

Will full-stack be replaced by AI?

Start building your full-stack portfolio

Project-based learning vs tutorials: Escape tutorial hell

What is project-based learning?

What project-based learning actually looks like

When to use tutorials vs project-based learning

Why tutorial hell is particularly dangerous now

Why escaping tutorial hell is so hard

Five signs you're stuck in tutorial hell

What good project-based learning looks like

Beginner projects: Start small and focused

Intermediate projects: Add complexity

Advanced projects: Real architectural challenges

The 7-step plan to escape tutorial hell

Step 1: Learn the absolute basics

Step 2: Pick a small, specific project

Step 3: Start building (and sit with the discomfort)