Best of freeCodeCamp — January 2024

1. 1
   Article

   freeCodeCamp·2y

   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
   Article

   freeCodeCamp·2y

   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
   Article

   freeCodeCamp·2y

   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.

   274

   9
4. 4
   Article

   freeCodeCamp·2y

   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
   Article

   freeCodeCamp·2y

   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
   Article

   freeCodeCamp·2y

   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.

   178

   2
7. 7
   Article

   freeCodeCamp·2y

   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
   Article

   freeCodeCamp·2y

   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
   Article

   freeCodeCamp·2y

   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!

   90

   3
10. 10
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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
    Article

    freeCodeCamp·2y

    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