--- title: 100 FREE Frontend Challenges | daily.dev description: The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate... canonical: https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: 100 FREE Frontend Challenges | daily.dev og:description: The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate... og:url: https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf og:image: https://api.daily.dev/og/posts/rWz8jfJlf.png og:image:alt: 100 FREE Frontend Challenges og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # 100 FREE Frontend Challenges **[Community Picks](https://daily.dev/sources/community)** · 9 min read · 2919 upvotes · 139 comments ## Summary The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate JavaScript and other frameworks. Each challenge involves recreating a design to build a working website or web app. The goal is to foster a project-based learning approach, encouraging developers to complete all challenges and enhance their chances of landing a web development job. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@alexagboolafullstack** · 75 upvotes > Here's the full list if anyone wants it: > > 1. Profile Card > 2. Add to Bag > 3. Mobile Navigation > 4. Contact Us > 5. Recipe > 6. Image Carousel > 7. Create Account > 8. Music Events > 9. Password Generator > 10. Sign-up Page > 11. Hotel Booking > 12. Restaurant Reservation > 13. Task Board > 14. Shopping List > 15. Notifications > 16. Fur Friends > 17. Article Slider > 18. Images Preview > 19. Upload Images > 20. Card Wallet > 21. Pricing Plans > 22. Messages > 23. Home Page > 24. Movie Ticket > 25. Meeting Schedule > 26. Job Board > 27. Leaderboards > 28. Playlist > 29. Video Player > 30. Invoices > 31. Dashboard > 32. Newsletter > 33. Brand... **@tobeblast** · 11 upvotes > Nice one **@cabeale** · 8 upvotes > These are great, excellent for inspiration of anyone is wanting to practice making their own components! **@gscarvalho** · 7 upvotes > Great tip! I'll try some challenges soon... **@rtk\_pareta3003** · 6 upvotes > thank you for it. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html) [View this post on daily.dev](https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"100 FREE Frontend Challenges","url":"https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf"},"datePublished":"2024-07-03T08:05:40.964Z","dateModified":"2024-08-23T15:46:50.687Z","description":"The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bc37c54b1538cf9d9daad63fc8b3ca4d?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bc37c54b1538cf9d9daad63fc8b3ca4d?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":139,"discussionUrl":"https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2919},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":139}],"keywords":"webdev,javascript,css,html","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"100 FREE Frontend Challenges"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/100-free-frontend-challenges-rwz8jfjlf","comment":[{"@type":"Comment","text":"Here’s the full list if anyone wants it:\n\nProfile Card\nAdd to Bag\nMobile Navigation\nContact Us\nRecipe\nImage Carousel\nCreate Account\nMusic Events\nPassword Generator\nSign-up Page\nHotel Booking\nRestaurant Reservation\nTask Board\nShopping List\nNotifications\nFur Friends\nArticle Slider\nImages Preview\nUpload Images\nCard Wallet\nPricing Plans\nMessages\nHome Page\nMovie Ticket\nMeeting Schedule\nJob Board\nLeaderboards\nPlaylist\nVideo Player\nInvoices\nDashboard\nNewsletter\nBrand Visualizer\nUser Profile\nRate Us\nSleep App\nExplore Flights\nMusic Festival\nQR Code Scanner\nFAQ\nCreate Workspace\nSettings Appearance\nPlayer Profile\nWebsite Launch\nHosting Features\nCustomer List\nExport File\nMarkdown Post\nApp Navigation\nFriend Request\nDownload App\nLanguage App\nBilling Page\nArticle Summary\nProgress Bars\nProject Roadmap\nGame Profile\nCreate Task\nCalculate Tip\nCode Verification\nFlight Ticket\nTestimonials\nWeather App\nDocument Manager\nInterests\nNavigation UI\nSelect Account\nUser Satisfaction\nProfile Settings\nCookies Banner\nEmail Client\nImage Collections\nPush Notification\nManage Accounts\nAdd Shot\nE-book Store\nApp Integrations\nAudio Player\nPayment Plan\nArticles Grid\nDelivery Details\nColor Palette\nSocials Share\nBuy a Coffee\nCustomer Reviews\nChatbot\nCharts\nFingerprint\nVoice Call\nMy Devices\nQuiz App\nSearch Filters\nTask Manager\nTime Widget\n404\nSubscribe Card\nDesign Assets\nVoice Recording\nColumns Card\nFooter","datePublished":"2024-07-05T00:58:47.224Z","url":"https://daily.dev/posts/rWz8jfJlf#c-BWKyalaXT","author":{"@type":"Person","name":"Alex Agboola","url":"https://daily.dev/alexagboolafullstack","image":"https://media.daily.dev/image/upload/s--PfDi_tR1--/f_auto/v1734650706/avatars/avatar_TiWYa2ET9oqp9UQLy8y7n"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":75}},{"@type":"Comment","text":"Nice one","datePublished":"2024-07-03T08:54:42.766Z","url":"https://daily.dev/posts/rWz8jfJlf#c-HiemHYidw","author":{"@type":"Person","name":"Tobechukwu Nwanne","url":"https://daily.dev/tobeblast","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":11}},{"@type":"Comment","text":"These are great, excellent for inspiration of anyone is wanting to practice making their own components!","datePublished":"2024-07-04T10:42:35.381Z","url":"https://daily.dev/posts/rWz8jfJlf#c-iJ3UuC84s","author":{"@type":"Person","name":"Callum Beale","url":"https://daily.dev/cabeale","image":"https://avatars.githubusercontent.com/u/55794038?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8}},{"@type":"Comment","text":"Great tip! I’ll try some challenges soon…","datePublished":"2024-07-04T15:13:38.784Z","url":"https://daily.dev/posts/rWz8jfJlf#c-ry4lmqcD4","author":{"@type":"Person","name":"Gislene Carvalho","url":"https://daily.dev/gscarvalho","image":"https://lh3.googleusercontent.com/a-/AOh14GhUDqRvi76B-yN62P-T2ZJdxUoQZetbhoqLEHAIDXc=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"thank you for it.","datePublished":"2024-07-04T03:31:38.114Z","url":"https://daily.dev/posts/rWz8jfJlf#c-cBqv9Lhmm","author":{"@type":"Person","name":"RITIK PARETA","url":"https://daily.dev/rtk_pareta3003","image":"https://media.daily.dev/image/upload/s--u4yl8vr7--/f_auto/v1719894431/avatars/avatar_kNGKXe2y3spQfxuQxE5Dd"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6}}]} ```