<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/sources/freecodecamp/best-of/2024/01" -->

---
title: Best freeCodeCamp posts — January 2024 | daily.dev
description: The most upvoted freeCodeCamp posts from January 2024, curated by the daily.dev community.
canonical: https://daily.dev/sources/freecodecamp/best-of/2024/01
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:url: https://daily.dev/sources/freecodecamp/best-of/2024/01
og:type: website
og:site_name: daily.dev
og:title: Best freeCodeCamp posts — January 2024 | daily.dev
og:description: The most upvoted freeCodeCamp posts from January 2024, curated by the daily.dev community.
og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph
---

# Best of freeCodeCamp — January 2024

1. 1  
[](https://daily.dev/posts/visual-studio-code-extensions-to-boost-your-productivity-in-2024-nghggkofw "Visual Studio Code Extensions to Boost Your Productivity in 2024")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
Visual Studio Code Extensions to Boost Your Productivity in 2024  
Discover the top Visual Studio Code extensions to boost productivity in 2024\. These extensions enhance features and tools, minimize context switching, and improve code readability. Explore AI-powered coding assistants like GitHub Copilot and Tabnine. Customize your editor with icon themes and enjoy features like error lens, bookmarks, and indented rainbow. Stay organized with project manager and utilize real-time collaboration with Live Share. Optimize your workflow and increase productivity with these recommended extensions.

1.2K  
65
2. 2  
[](https://daily.dev/posts/the-react-roadmap-for-2024-how-to-learn-react-mywtztg65 "The React Roadmap for 2024 – How to Learn React")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
The React Roadmap for 2024 – How to Learn React  
This post provides a roadmap for learning React in 2024, covering core concepts, hooks, intermediate concepts, creating apps with Vite, data fetching with TanStack Query, state management with Zustand, styling with TailwindCSS and Radix, routing with TanStack Router, building forms with React Hook Form, and full-stack React development with Next.js.  
332  
12
3. 3  
[](https://daily.dev/posts/javascript-arrow-functions-vs-regular-functions-vu6toyel5 "JavaScript Arrow Functions vs Regular Functions")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
JavaScript Arrow Functions vs Regular Functions  
Learn the difference between regular function syntax and arrow function syntax in JavaScript, how to access arguments with both types of functions, and when to use each type.  
273  
9
4. 4  
[](https://daily.dev/posts/nginx-for-backend-developers-v75umjcvw "NGINX for Backend Developers")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
NGINX for Backend Developers  
NGINX is a versatile and powerful open-source software used for web serving, reverse proxying, caching, load balancing, media streaming, and more. This course on NGINX provides a comprehensive guide to understanding and using NGINX, covering topics such as installation, terminology, serving static content, mime types, location context, rewrites and redirects, and using NGINX as a load balancer.  
211
5. 5  
[](https://daily.dev/posts/how-to-build-an-admin-dashboard-with-react-j4ulpeabd "How to Build an Admin Dashboard with React")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How to Build an Admin Dashboard with React  
Learn how to build a stunning admin dashboard with React and Next.js. Discover important Next.js concepts and powerful tools like Prisma, PostgreSQL, Tremor, NextAuth, and TailwindCSS.  
194  
1
6. 6  
[](https://daily.dev/posts/how-to-build-a-crud-rest-api-with-nestjs-docker-swagger-and-prisma-jo8bavs53 "How to Build a CRUD REST API with NestJS, Docker, Swagger, and Prisma")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How to Build a CRUD REST API with NestJS, Docker, Swagger, and Prisma  
Learn how to build a CRUD REST API with NestJS, Docker, Swagger, and Prisma. Explore the power of NestJS, Docker, Swagger, and Prisma to implement CRUD operations for managing recipes.  
177  
2
7. 7  
[](https://daily.dev/posts/less-common-html-tags-you-should-know-with-example-code-jgstkihws "Less Common HTML Tags You Should Know – With Example Code")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
Less Common HTML Tags You Should Know – With Example Code  
Discover some lesser-known HTML tags that can be useful in web development. Learn about the <base>, <aside>, <q>, <var>, <samp>, <datalist>, <progress>, and <dialog> elements, and the importance of using semantic HTML.  
119  
6
8. 8  
[](https://daily.dev/posts/how-lazy-loading-works-in-web-development-cgbsc6f2o "How Lazy Loading Works in Web Development")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How Lazy Loading Works in Web Development  
Lazy loading is a web performance optimization strategy that improves performance, reduces bandwidth usage, and enhances user engagement by loading only necessary resources. It can be implemented using the loading attribute in HTML.  
117  
2
9. 9  
[](https://daily.dev/posts/mern-stack-roadmap-how-to-learn-mern-and-become-a-full-stack-developer-sovpxosnk "MERN Stack Roadmap – How to Learn MERN and Become a Full-Stack Developer")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
MERN Stack Roadmap – How to Learn MERN and Become a Full-Stack Developer  
Learn the MERN stack, a widely-used technology stack for building efficient and scalable web applications. Get started with HTML, JavaScript, and CSS. Explore React for frontend development. Understand REST APIs and backend server development using Express and Node. Learn about MongoDB and Mongoose for database management. Write tests for your MERN stack applications. Get familiar with Git for version control. Deploy your MERN stack applications. Access top resources for learning the MERN stack and try out 10 project ideas today!  
89  
3
10. 10  
[](https://daily.dev/posts/how-to-deploy-next-js-apps-to-github-pages-vbebjhu87 "How to Deploy Next.js Apps to Github Pages")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How to Deploy Next.js Apps to Github Pages  
Learn how to deploy Next.js apps to Github Pages using GitHub Actions for automatic deployment. GitHub Pages is a web hosting option for developers and open source projects.  
89  
4
11. 11  
[](https://daily.dev/posts/how-to-sort-an-array-of-objects-by-property-name-in-javascript-xmuu4uyf6 "How to Sort an Array of Objects by Property Name in JavaScript")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How to Sort an Array of Objects by Property Name in JavaScript  
Learn how to sort an array of objects by property name in JavaScript. Understand JavaScript arrays and arrays of objects, keys in JavaScript objects, determining the data type of a property, sorting an array of objects with a specific key, how to sort an array based on numeric values, how to sort an array based on string values, and edge cases to consider.  
78  
1
12. 12  
[](https://daily.dev/posts/gitting-things-done-a-visual-and-practical-guide-to-git-yqxy2ktnv "Gitting Things Done – A Visual and Practical Guide to Git")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
Gitting Things Done – A Visual and Practical Guide to Git  
Learn about the basic objects in Git - blobs, trees, and commits. Understand the process of recording changes in Git and how branches work under the hood.  
77
13. 13  
[](https://daily.dev/posts/beginner-web-dev-tutorial-build-a-weather-app-with-next-js-typescript-2zmjomaan "Beginner Web Dev Tutorial – Build a Weather App with Next.js & TypeScript")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
Beginner Web Dev Tutorial – Build a Weather App with Next.js & TypeScript  
A beginner's web dev tutorial on building a Weather App using Next.js, Tailwind CSS, and TypeScript.  
69  
1
14. 14  
[](https://daily.dev/posts/how-to-use-template-literals-in-javascript-bxbwdxe3i "How to Use Template Literals in JavaScript")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How to Use Template Literals in JavaScript  
Learn how to use template literals in JavaScript. Understand the syntax, benefits, and use cases. Explore tagged template literals for advanced string manipulation.  
59
15. 15  
[](https://daily.dev/posts/ai-tools-you-can-use-in-visual-studio-code-besides-github-copilot-z2m2aepzk "AI Tools You Can Use in Visual Studio Code Besides GitHub Copilot")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
AI Tools You Can Use in Visual Studio Code Besides GitHub Copilot  
Discover helpful AI tools besides GitHub Copilot that can improve coding efficiency and productivity. Learn about Synk, Cody AI, Tabnine, Code Whisperer, CodeGeex AI, and Codeium.  
58  
6
16. 16  
[](https://daily.dev/posts/learn-langchain-and-gen-ai-by-building-6-projects-fhhfxns7i "Learn LangChain and Gen AI by Building 6 Projects")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
Learn LangChain and Gen AI by Building 6 Projects  
Learn how to build six end-to-end projects using LangChain and various LLMs in this course on the freeCodeCamp.org YouTube channel. The course covers the integration of LangChain with GPT-4, Google Gemini Pro, and Llama 2, enabling the creation of practical, real-world applications.  
56  
1
17. 17  
[](https://daily.dev/posts/how-to-code-with-ai-svhwianjw "How to Code with AI")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How to Code with AI  
Learn how to code using AI with a course that covers front-end development using HTML, CSS, and JavaScript. The course is divided into three sections: launching first projects, advanced AI projects, and database-powered applications.  
53  
1
18. 18  
[](https://daily.dev/posts/understanding-dom-events-and-javascript-event-listeners-mzhd1l1m6 "Understanding DOM Events and JavaScript Event Listeners")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
Understanding DOM Events and JavaScript Event Listeners  
Learn how to listen and respond to DOM events using JavaScript. Understand the difference between the addEventListener() method and the on\[eventname\] HTML attributes. Explore common DOM events and how to remove event listeners.  
52
19. 19  
[](https://daily.dev/posts/javascript-engine-and-runtime-explained-9srxen4xk "JavaScript Engine and Runtime Explained")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
JavaScript Engine and Runtime Explained  
Learn about JavaScript engines and runtimes. Understand how the JavaScript engine works with the call stack and heap. Explore the concepts of compilation, interpretation, and JIT. Discover the components of a JavaScript runtime in a browser, including the JS engine, Web APIs, callback queue, and event loop.  
48  
1
20. 20  
[](https://daily.dev/posts/how-to-build-a-high-performance-tab-component-in-react-i26ohqy5y "How to Build a High-Performance Tab Component in React")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
How to Build a High-Performance Tab Component in React  
Learn how to build a high-performance tab component in React. This article covers setting up the environment, creating the tab component, optimizing for performance, and adding animations using Framer Motion.  
47  
1
21. 21  
[](https://daily.dev/posts/what-is-the-document-object-model-dom-for-beginners-q21dfugrd "What is the Document Object Model? DOM for Beginners")  
Article  
![Avatar of freecodecamp](https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp)freeCodeCamp · 3y  
What is the Document Object Model? DOM for Beginners  
Explanation of how HTML, CSS, and JavaScript work together in web development. Introduction to the DOM and how it enables JavaScript to manipulate web pages.  
47  
1

[See all freeCodeCamp archives](/sources/freecodecamp/best-of)

```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","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/freecodecamp/best-of/2024/01#page","url":"https://daily.dev/sources/freecodecamp/best-of/2024/01","name":"Best freeCodeCamp Posts — January 2024","description":"The most upvoted freeCodeCamp posts from January 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/freecodecamp/best-of/2024/01#items","numberOfItems":21,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/visual-studio-code-extensions-to-boost-your-productivity-in-2024-nghggkofw","name":"Visual Studio Code Extensions to Boost Your Productivity in 2024"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/the-react-roadmap-for-2024-how-to-learn-react-mywtztg65","name":"The React Roadmap for 2024 – How to Learn React"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/javascript-arrow-functions-vs-regular-functions-vu6toyel5","name":"JavaScript Arrow Functions vs Regular Functions"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/nginx-for-backend-developers-v75umjcvw","name":"NGINX for Backend Developers"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-build-an-admin-dashboard-with-react-j4ulpeabd","name":"How to Build an Admin Dashboard with React"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/how-to-build-a-crud-rest-api-with-nestjs-docker-swagger-and-prisma-jo8bavs53","name":"How to Build a CRUD REST API with NestJS, Docker, Swagger, and Prisma"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/less-common-html-tags-you-should-know-with-example-code-jgstkihws","name":"Less Common HTML Tags You Should Know – With Example Code"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-lazy-loading-works-in-web-development-cgbsc6f2o","name":"How Lazy Loading Works in Web Development"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/mern-stack-roadmap-how-to-learn-mern-and-become-a-full-stack-developer-sovpxosnk","name":"MERN Stack Roadmap – How to Learn MERN and Become a Full-Stack Developer"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/how-to-deploy-next-js-apps-to-github-pages-vbebjhu87","name":"How to Deploy Next.js Apps to Github Pages"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-sort-an-array-of-objects-by-property-name-in-javascript-xmuu4uyf6","name":"How to Sort an Array of Objects by Property Name in JavaScript"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/gitting-things-done-a-visual-and-practical-guide-to-git-yqxy2ktnv","name":"Gitting Things Done – A Visual and Practical Guide to Git"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/beginner-web-dev-tutorial-build-a-weather-app-with-next-js-typescript-2zmjomaan","name":"Beginner Web Dev Tutorial – Build a Weather App with Next.js & TypeScript"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-use-template-literals-in-javascript-bxbwdxe3i","name":"How to Use Template Literals in JavaScript"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/ai-tools-you-can-use-in-visual-studio-code-besides-github-copilot-z2m2aepzk","name":"AI Tools You Can Use in Visual Studio Code Besides GitHub Copilot"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/learn-langchain-and-gen-ai-by-building-6-projects-fhhfxns7i","name":"Learn LangChain and Gen AI by Building 6 Projects"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/how-to-code-with-ai-svhwianjw","name":"How to Code with AI"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/understanding-dom-events-and-javascript-event-listeners-mzhd1l1m6","name":"Understanding DOM Events and JavaScript Event Listeners"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/javascript-engine-and-runtime-explained-9srxen4xk","name":"JavaScript Engine and Runtime Explained"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-build-a-high-performance-tab-component-in-react-i26ohqy5y","name":"How to Build a High-Performance Tab Component in React"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/what-is-the-document-object-model-dom-for-beginners-q21dfugrd","name":"What is the Document Object Model? DOM for Beginners"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/freecodecamp/best-of"},{"@type":"ListItem","position":5,"name":"January 2024"}]}]}
```