Blog Posts
15 Coding Challenges for Beginners That Actually Teach You Something
Skip the boring algorithm drills. These 15 coding challenges for beginners focus on real skills — HTML, CSS, JavaScript, and React — that you'll use on the job.
Frontend Interview Prep: Practice Problems, Projects, and a Game Plan for 2026
Prepare for frontend developer interviews with real practice problems, portfolio-ready projects, and a structured game plan. No LeetCode grind required.
12 Frontend Project Ideas That Will Level Up Your Skills in 2026
The best frontend project ideas for 2026 — from beginner to advanced. Build real-world apps, practice React, CSS, JavaScript, and land your first dev job.
How to Learn React by Building Real Projects (Not Just Tutorials)
Stop watching React tutorials. Start building real projects with Figma designs, test cases, and AI assistance. Here's a practical roadmap to learn React by doing.
Vibe Coding for Beginners: What It Is, How It Works, and How to Start
A practical introduction to vibe coding — the AI-powered development workflow that's changing how developers build software in 2026. Learn what it is and how to get started.
Building Games with AI: How We Shipped a 2D Roguelite in 10 Days
A complete breakdown of our AI-powered indie game dev workflow — Claude Code, Unity MCP, Replicate, ElevenLabs, and more. From zero to Steam-ready in 10 days.
10 CSS Features That Replace JavaScript — No Libraries, No Build Step
CSS can now replace scroll listeners, positioning libraries, animation frameworks, and Sass preprocessors. 10 interactive demos you can edit live.
16 Free Developer Tools You Can Use Right Now (No Signup Required)
A curated list of 16 free browser-based developer tools for CSS, images, SEO, data, and code editing. Every tool works instantly in your browser with no account needed.
10 Tips for Developer Job Seekers in 2026
Practical advice for developers looking for jobs in 2026 — from ATS-optimized CVs to portfolio strategy, interview prep, and standing out.
How I Vibe Coded My Vibe Coding Platform
40+ commits, a full platform rewrite, and an AI assistant — all built with Claude Code. Here's the exact workflow.
Best Vibe Coding & Practice Platforms in 2026: An Honest Guide
Comparing BigDevSoon, Frontend Mentor, LeetCode, and freeCodeCamp — vibe coding, traditional practice, pricing, and which platform fits your learning style.
Fetch Data In React With GraphQL
GraphQL introduces totally new concept for data fetching. One endpoint to rule them all, let's see how we can use it in React.
Fetch Data In React As User Types Or Clicks
Let's dive into a bit more complex examples of real-world scenarios. Fetching data from an API as a user types or clicks is a common pattern in modern web applications.
How To Fetch Data In React From REST API
Let's learn how to fetch data in React using fetch, axios, and react-query.
5 Tools To Increase Website Conversion Rate
Nothing hurts more than spending endless hours on coding a website, rolling it out to production, and having close to zero traffic.
Command Line Interface And A Terminal
Introduction to the fundamental tool for all developers. Learn about terminals, essential commands, and why every developer should be comfortable with the CLI.
How To Improve Your Frontend Skills
It's easy to get stuck in tutorials hell...
Boolean And Friends in JavaScript
Conditions, typecasting, logical operators, comparison operators, ternary operator, optional chaining, null-coalescing operator - they are all part of JavaScript.
JavaScript Arrays And How To Avoid Loops
Arrays exist in every programming language. It's a data structure best suited for storing multiple values. And, for doing various operations on these values, often called as a collection.
Developers And Designers - Part 3
A Design System is a place where everything makes sense. It bridges the gap between design and development by providing a shared language, components, and guidelines.
Var, Let, Const in JavaScript
Everyone needs variables in JavaScript. Let's learn the best ways to use them.
Developers And Designers - Part 2
Communication is key when planning new features. Without a structured process, the handoff between design and development can become chaotic and lead to misunderstandings.
Developers And Designers - Part 1
Finding a common language is not a simple task. Developers think in a more abstract way while designers focus on the visual side of the product. Understanding each other's perspective is the key to building great products.
5 Ways To Learn Effectively
Learning is a process of every human being...
8 Useful React Components
There is a lot of pre-built, reusable, abstracted, encapsulated, and tested code available to use nowadays.
Autoformat Code With Prettier
Prettier saves a lot of time and automates code formatting. Learn how to integrate with it, ESLint, Husky integration, and recommended setup is also included.
10 Technical Interview Tips
Technical Interview can be a hard nut to crack...
Knowledge Pills
CSS Anchor Positioning
Position popovers relative to any element using CSS anchor positioning — no JavaScript positioning library needed.
CSS Animated Accordion
Smooth open/close animations on native details elements using interpolate-size — no JavaScript height measurement.
CSS color-mix() Palette
Derive an entire color system from one base color using color-mix() and oklch() — no Sass functions, no JavaScript.
CSS Container Queries
Make components respond to their container width instead of the viewport — true component-level responsive design.
CSS :has() Form Validation
Style forms based on input validity using the :has() parent selector — no JavaScript event listeners needed.
Native CSS Nesting
Write Sass-like nested rules directly in CSS — no preprocessor, no build step, no extra dependency.
CSS Scroll Progress Bar
Build a reading progress bar that fills as you scroll — entirely with CSS, no JavaScript.
CSS Scroll Reveal Animations
Animate elements into view as they enter the viewport — no JavaScript, no libraries, just CSS.
CSS @starting-style
Animate elements into view from display none using @starting-style — no JavaScript timing hacks, no setTimeout workarounds.
CSS View Transitions
Morph between UI states with smooth animations using the View Transitions API — CSS handles the animation, JavaScript just toggles a class.
Event handlers arguments in React
onClick, onChange, onBlur... We usually pass a reference to the function handler but how do we add more arguments instead of just the event itself?
Remove duplicates in JavaScript
Clones might take over the world, we need to learn how to remove duplicates from an array.
Reverse String in JavaScript
There is no built-in method on string type to reverse it in JavaScript.
React Dark Mode hook
We'll create useDarkMode hook to switch between light and dark themes.
React fetch hook
Let's create a custom hook for fetching data with the browser fetch.
Place HTML Elements Absolutely with CSS
Use a combination of position relative and absolute to place text on the image card.
React toggles hook
Having too many dialogs, modals, popups and state starts to become repetitive? Solution - write a custom hook.
React counter hook
Let's create a custom hook for tracking the counter state and exposing the current counter value with increment, decrement handlers.
CSS Relative Units
Do you only use pixels or % in CSS? Open yourself to more possibilities and best practices.
ECMAScript new features
Null coalescing operator, optional chaining, and Array.flat method are all amazing.
Search through string in JavaScript
Need to search for a character, word, or entire sentence? String .includes method to the rescue.
JavaScript multiple condition checks
Checking multiple values in JavaScript often leads to redundant, boilerplate code - let's use .includes method to fix that.
Convert JavaScript data structures
Converting data structures is a day-to-day job as a Developer.
Method chaining
Method chaining is a helpful pattern to learn in programming.
Sum using reduce
Use the versatile .reduce method to sum an array of numbers.
Immutable add, edit, delete operations
Learn how to add, edit and delete array of objects in semantic, declarative approach using rest spread operator and array methods.
Adjust box sizing in CSS
Adjust box-sizing property to include padding and border to actual width or height. Simplifies overhead of the box model.
Reset & normalize for CSS
Avoid CSS reset and normalize your styles through different browsers.
Flexbox equal height cards
Make all cards equal height with flexbox. Especially helpful when content is dynamic.
Outline HTML elements
Outline all your HTML elements with a single line of CSS.
Want to write for BigDevSoon? Reach out at adrian@bigdevsoon.me
Become an author