These days the knowledge of coding and web development has become more accessible and free. I’d like to share with you free code learning resources list for Front-end developers.

The resources listed below are well-known, trusted, and respectable in the web development community.

  1. Text resources

    1. MDN Web Docs
    2. The Odin Project
    3. JavaScript.info
    4. web.dev
  2. Interactive resources

    1. Codecademy
    2. freeCodeCamp
    3. Udemy
    4. Treehouse
    5. Coursera
    6. JavaScript30
    7. Khan Academy
    8. Upskill
    9. edX
  3. Video resources

    1. freeCodeCamp
    2. Codecademy
    3. Treehouse
    4. Traversy Media
    5. Google Chrome Developers
    6. Coding Tech
    7. edureka!

Text Resources

These code learning resources are text-based, which means you’ll have to read a lot in order to grasp information.

The resources listed below are well structured with examples and visualizations (like images) so they’re easy to comprehend and digest.

MDN Web Docs

MDN Web Docs
MDN Web Docs

Probably the most popular reference source for any web developer. MDN Web Docs contain almost full documentation on the fundamentals of web development (HTML, CSS, JavaScript, and more). Not only that, but they also have complete guides and tutorials for beginners.

Website: MDN Web Docs: Learn

The Odin Project

The Odin Project
The Odin Project

The Odin Project provides a free open-source coding curriculum that can be taken entirely online. This resource is created for absolute beginners in the world of web development and those who have tried other resources without success.

The Odin Project curriculum is full of projects that will help you build a strong portfolio of work on Github to fill out your resume.

The curriculum has also been designed in a modular fashion, making skimming through lessons a breeze.

Website: The Odin Project

JavaScript.info

JavaScript Info
JavaScript Info

This is a go-to resource for everything JavaScript. It has been a long-living resource that started in 2007 and has been updated and improved ever since.

JavaScript.info features two parts which cover JavaScript as a programming language and working with a browser. There are also additional series of thematic articles.

Website: JavaScript.info

web.dev

web.dev
web.dev

web.dev is a resource dedicated to web performance, web accessibility, and best practices in general. It has a learning section with well-structured collections of guides and articles.

No matter if you’re a beginner or a seasoned developer you’ll always find information on areas that can be improved.

Website: web.dev

Interactive resources

Following code learning resources are interactive, which means that instead of just reading or watching you’ll be able to practice coding as you learn.

Codecademy

Codecademy
Codecademy

Codecademy has courses on a variety of technologies including web development. Some of them a free. Each course is structured in blocks each one has a lesson, a project, and a quiz.

During the lesson, you learn new skills, inside a project you implement what you just learned, and during the quiz, you have to answer questions related to the topic.

Website: Codecademy

freeCodeCamp

freeCodeCamp
freeCodeCamp

freeCodeCamp is a nonprofit community that helps you learn to code by building projects. You’ll learn to code by completing coding challenges and building projects. You’ll also earn verified certifications along the way.

Website: freeCodeCamp

Udemy

Udemy
Udemy

Udemy is a global community of instructors who provide learning content both free and premium. Udemy is not only about learning how to code, they have courses on a wide range of topics. And web development is one of them.

Premium content provides additional possibilities like Instructor Q&A and Instructor direct message. However, they share Free courses from time to time that is still custom-tailored and of high quality.

Website: Udemy: Free courses

Treehouse

Treehouse
Treehouse

While Treehouse provides mostly Premium courses, they also offer a 7-day free trial. Treehouse’s main focus is web development and web design education.

Each course consists of educational videos, code challenges, and quizzes. They also have a community forum where students can discuss topics and ask questions.

Website: Treehouse Free Trial

Coursera

Coursera
Coursera

Coursera is the global online learning platform that offers anyone, anywhere access to online courses and degrees from world-class universities and companies.

Coursera has a section of free courses on web development and computer science. One advantage that stands out from the rest of the resources is that they offer education in many different languages.

Website: Coursera

JavaScript30

JavaScript30
JavaScript30

JavaScript30 is a resource created for beginner to Intermediate developers and designers who want to become comfortable with both JavaScript fundamentals and working in the DOM without a library.

The best way to get better at something is by doing it. Take a challenge and create 30 things in 30 days using nothing by Vanilla JavaScript.

Website: JavaScript30

Khan Academy

Khan Academy
Khan Academy

Khan Academy is an online learning center that offers practice exercises, instructional videos, and a personalized learning dashboard that empower learners to study at their own pace in and outside of the classroom.

While Khan Academy is not only about programming or web development, it features a section on computing and some modules on web development in particular.

Website: Khan Academy

Upskill

Upskill
Upskill

Upskill offers an extensive free course on web development. Their videos are streamed in high definition directly on their site. Students are also provided with exercises and solutions for algorithms and coding challenges. Also included are lessons on how to find the best jobs, interviewing practice, and more.

Website: Upskill

edX

edX
edX

edX is an online platform that offers world-class education from well-known universities around the globe. They have courses in a lot of areas such as web development in particular. Their front-end web development course is directly from W3C, creator of the latest Web standards.

Website: edX

Video Resources

YouTube is a great place to learn web development for free. There are literally a ton of video tutorials and guides available. But beginners might be overwhelmed at first. Following channels focus entirely on programming and web development and are proven to be efficient.

freeCodeCamp

A YouTube channel of a well-known free code learning resource. They have everything starting from fundamentals all the way up to advanced stuff.

YouTube channel: freeCodeCamp

Treehouse

Treehouse has its own channel where they list educational videos for free.

YouTube channel: Treehouse

Traversy Media

Probably one of the most known YouTube channels for web developers. Traversy Media features the best online web development and programming tutorials for all of the latest web technologies including Node.js, Angular 2, React.js, PHP, Rails, HTML, CSS, and much more.

YouTube channel: Traversy Media

Google Chrome Developers

YouTube channel from the creators of the most popular browser for web development. They post useful guides and tips on web performance, Dev Tools, and new technologies.

YouTube channel: Google Chrome Developers

Coding Tech

If you want to learn from other developers like best practices or new technologies this is the channel for you. They mainly focus on posting videos from conferences and meetups.

YouTube channel: Coding Tech

edureka!

edureka! is a live and interactive learning platform, they have a huge YouTube channel with a wide range of topics on programming including web development.

YouTube channel: edureka!

Tags: