Skip to content

100 Days of Code | Daily Challenges | Beautifully Crafted Designs | Created for Full-stack/Frontend/Web Developers.

License

Notifications You must be signed in to change notification settings

bigdevsoon/100-days-of-code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 100 Days Of Code: Design to Code Challenge

⭐️ Please star this repository to support our community! ⭐️

Visit our platform for Developers and discover more fun stuff to build: BigDevSoon.

Welcome to the ultimate 100 Days of Design to Code Challenge! Whether you're just starting out or looking to sharpen your skills, this challenge is your pathway from a Junior to a Senior Frontend Developer with a flair for design. Each day brings a new challenge, complete with a unique design and detailed user stories.

🌟 Challenge Objective

The goal is simple: commit to coding by recreating beautiful designs daily for the next 100 days. By the end of this journey, you will have honed your skills in JavaScript, HTML, CSS, and popular frameworks like TailwindCSS. Each project is designed to be engaging, from completing pixel-perfect designs to adding your interactive flair.

🎨 What You Will Achieve

  • Journey From Beginner to Advanced Frontend Developer.
  • Master front-end technologies and frameworks.
  • Build a professional portfolio of 100 unique challenges.
  • Increase your chances of landing a Frontend job by a lot!

📖 How to Approach This Challenge

  1. Understand requirements: Use any combination of HTML/CSS/JS, libraries and frameworks as you wish! Also, each day starts with a clear User Story and Acceptance Criteria to guide your challenge.
  2. Design to code (1 per day ideally): Attempt to replicate the provided design image with precision. Variations are welcomed for personal flair!
  3. Add Interactivity: While designs focus on static elements, adding interactive features is encouraged to enhance functionality.
  4. Log Your Progress: Keep a daily log of your progress and achievements. When using BigDevSoon, tracking, and sharing your progress on social media to showcase your work and inspire others is super easy.
  5. Challenge resources: You are only given a design screenshot to work with hence all the icons, fonts, images and other resources need to be searched on your own, while working in BigDevSoon's Platform, we provide resources and BIG users can download Figma Designs with everything included.

☘️ Resource List

Images

Icons

Fonts

Colors

Sounds

🌐 Join the Community

Sign up at BigDevSoon to access community support on Discord and complete all challenges in one place. Free users receive all challenge images and can upgrade for additional resources such as Figma designs.

🔗 Sharing Your Work

Make your journey viral by sharing your daily project links and images on platforms like LinkedIn, Twitter, and Instagram. Use the hashtag #100DaysOfCode and tag #BigDevSoon to connect with fellow coders and increase visibility.

🔥 Let's Get Coding!

Are you ready to start your coding and design journey? Dive into the challenges, explore new technologies, and transform your skills. Happy coding, and good luck on completing all the challenges!

📅 Start Date: [xx/xx/xxxx]

#100DaysOfCode #CodeToLearn #BigDevSoon #CodeNewbie #Frontend

🕸️ Challenge List

Day 1: Profile Card

Profile Card Design

Day 2: Add to Bag

Add to Bag Design

Day 3: Mobile Navigation

Mobile Navigation Design

Day 4: Contact Us

Contact Us Design

Day 5: Recipe

Recipe Design

Day 6: Image Carousel

Image Carousel Design

Day 7: Create Account

Create Account Design

Day 8: Music Events

Music Events Design

Day 9: Password Generator

Password Generator Design

Day 10: Sign Up Page

Sign Up Page Design

Day 11: Hotel Booking

Hotel Booking Design

Day 12: Restaurant Reservation

Restaurant Reservation Design

Day 13: Task Board

Task Board Design

Day 14: Shopping List

Shopping List Design

Day 15: Notifications

Notifications Design

Day 16: Fur Friends

Fur Friends Design

Day 17: Article Slider

Article Slider Design

Day 18: Images Preview

Images Preview Design

Day 19: Upload Images

Upload Images Design

Day 20: Card Wallet

Card Wallet Design

Day 21: Pricing Plans

Pricing Plans Design

Day 22: Messages

Messages Design

Day 23: Home Page

Home Page Design

Day 24: Movie Ticket

Movie Ticket Design

Day 25: Meeting Schedule

Meeting Schedule Design

Day 26: Job Board

Job Board Design

Day 27: Leaderboards

Leaderboards Design

Day 28: Playlist

Playlist Design

Day 29: Video Player

Video Player Design

Day 30: Invoices

Invoices Design

Day 31: Dashboard

Dashboard Design

Day 32: Newsletter

Newsletter Design

Day 33: Brand Visualizer

Brand Visualizer Design

Day 34: User Profile

User Profile Design

Day 35: Rate Us

Rate Us Design

Day 36: Sleep App

Sleep App Design

Day 37: Explore Flights

Explore Flights Design

Day 38: Music Festival

Music Festival Design

Day 39: QR Code Scanner

QR Code Scanner Design

Day 40: FAQ

FAQ Design

Day 41: Create Workspace

Create Workspace Design

Day 42: Settings Appearance

Settings Appearance Design

Day 43: Player Profile

Player Profile Design

Day 44: Website Launch

Website Launch Design

Day 45: Hosting Features

Hosting Features Design

Day 46: Customer List

Customer List Design

Day 47: Export File

Export File Design

Day 48: Markdown Post

Markdown Post Design

Day 49: App Navigation

App Navigation Design

Day 50: Friend Request

Friend Request Design

Day 51: Download App

Download App Design

Day 52: Language App

Language App Design

Day 53: Billing Page

Billing Page Design

Day 54: Article Summary

Article Summary Design

Day 55: Progress Bars

Progress Bars Design

Day 56: Project Roadmap

Project Roadmap Design

Day 57: Game Profile

Game Profile Design

Day 58: Create Task

Create Task Design

Day 59: Calculate Tip

Calculate Tip Design

Day 60: Code Verification

Code Verification Design

Day 61: Flight Ticket

Flight Ticket Design

Day 62: Testimonials

Testimonials Design

Day 63: Weather App

Weather App Design

Day 64: Document Manager

Document Manager Design

Day 65: Interests

Interests Design

Day 66: Navigation UI

Navigation UI Design

Day 67: Select Account

Select Account Design

Day 68: User Satisfaction

User Satisfaction Design

Day 69: Profile Settings

Profile Settings Design

Day 70: Cookies Banner

Cookies Banner Design

Day 71: Email Client

Email Client Design

Day 72: Image Collections

Image Collections Design

Day 73: Push Notification

Push Notification Design

Day 74: Manage Accounts

Manage Accounts Design

Day 75: Add Shot

Add Shot Design

Day 76: E-book Store

E-book Store Design

Day 77: App Integrations

App Integrations Design

Day 78: Audio Player

Audio Player Design

Day 79: Payment Plan

Payment Plan Design

Day 80: Articles Grid

Articles Grid Design

Day 81: Delivery Details

Delivery Details Design

Day 82: Color Palette

Color Palette Design

Day 83: Socials Share

Socials Share Design

Day 84: Buy a Coffee

Buy a Coffee Design

Day 85: Customer Reviews

Customer Reviews Design

Day 86: ChatBot

ChatBot Design

Day 87: Charts

Charts Design

Day 88: Fingerprint

Fingerprint Design

Day 89: Voice Call

Voice Call Design

Day 90: My Devices

My Devices Design

Day 91: QuizApp

QuizApp Design

Day 92: Search Filters

Search Filters Design

Day 93: Task Manager

Task Manager Design

Day 94: Time Widget

Time Widget Design

Day 95: 404

404 Design

Day 96: Subscribe Card

Subscribe Card Design

Day 97: Design Assets

Design Assets Design

Day 98: Voice Recording

Voice Recording Design

Day 99: Columns Card

Columns Card Design

Day 100: Footer

Footer Design