DEV Community

Alex Omeyer
Alex Omeyer

Posted on • Updated on

📚🏆 Top 20 Web Development Learning Resources: From Beginner to Advanced

Web development refers to the act of building and maintaining websites; these websites can range in complexity from simple static websites to more complex web applications with huge databases, real-time data-intensive applications such as social media and eCommerce applications.

Back-end developers designs the application APIs and databases schemas and implements the business logic. Backend developers were originally referred to as developers back in the days when front-end development was considered to be trivial work. Backend developers can employ a wide range of languages to achieve their needs. A backend developer would be skilled in languages such as PHP, Java, Python, ASP.net, Ruby, etc.

Front-end developers consume the APIs and implement the logic to handle a website’s presentation, interactivity, and user experience. Unlike backend, the front-end developer’s main scripting language is JavaScript. However, there is an overwhelming amount of JavaScript frameworks, libraries, bundlers, and build tools available for front-end development. And oftentimes a front-end developer is specialised in one or more of these. Some examples of these front-end technologies are React, Angular, Vue, Svelte, Webpack, Rollup, Snowpack, ESbuild, etc.

Besides JavaScript, front-end developers also use HTML and CSS to both structure and beautify a website.

Full-stack developers are developers who has both front-end and back-end development skills.

Regardless of the area of specialisation, good developers follow the boy/girl scout rule: always leave the code better than you found it. And they achieve this by using tools that enhance productivity, improve code quality, foster collaboration, and manage technical debt.

Web development is a highly paid skill that is currently in great demand.With the advent of Covid, many businesses and services are moving online; thereby, increasing the need for web developers.

Consequently, now is the best time to learn web development—let's look at the websites and online platforms to learn software development!

1. Road Map

Learning web development is a journey and for this, you would need a road map. One of the biggest challenges faced by new developers when learning web development is not knowing where to start, what to learn, or the path to achieve their goals.

Roadmap.sh is a community effort to create roadmaps, guides, and other educational content to help guide the developers in picking up the path and guide their learnings.

Read map provides downloadable visual guides containing topics, tools, languages, and all the required niceties to guide a noob developer in his journey to web development mastery.

Image description

2. Freecodecamp

Freecode camp is an extensive open-source online coding Bootcamp that offers free training and certification on a wide range of web development skills. Some of the certifications offered by Freecodecamp are Web design, front-end development, Data Visualization, Back-end development & API, Machine Learning, Quality Assurance, Data Analysis, Information Security, and more.

With about 40,000 freeCodeCamp.org graduates, working in big techs all over the world, Freecodecamp is the most comprehensive and extensive online training platform on this list. And its courses are all free.

Image description

3. Codecademy

Codecademy is another online learning platform that offers training on a wide variety of programming languages such as Java, JavaScript, PHP, Python, Kotlin, HTML, CSS, SQL, C++, Bash/Shell, and more.

It offers free beginner-level training on some programming languages. Also, it features some well-structured paid pro courses; tailored towards a career path.

Image description

4. Managing technical debt blog

Software development is not just about shipping features, but also maintaining a healthy codebase and managing technical debt.

On average, engineers spend 1 day/week on technical debt and maintenance issues. Moreover, technical debt decreases team morale, and causes frustration in the Engineering teams and has a huge monetary cost. The Stepsize team writes the Managing technical debt blog where you will find the best resources to learn how to deal with tech debt:

Image description

5. Scrimba

Scrimba is a revolutionary online learning platform that teaches web development with an interactive screencast and live events. It features both free and paid low-cost quality courses.
You can learn more about Scrimba by practicing with this interactive screencast.

Image description

6. Codepen/challenges

Codepen is an open-source social development environment for front-end developers. Codepen features an online text editor with support for HTML, CSS, and JavaScript.

Codepen’s creations are called pens which can either be public or private --- available only on paid plans.

According to the website, Codepen challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on. The best Pens get picked and featured on the homepage!

Image description

7. W3Schools

W3School provides one of the most extensive free online learning resources. It features tutorials on a wide range of programming languages such as HTML, CSS, JavaScript, Python, SQL, PHP, and more.

Image description

8. The Odin Project

Similar to Freecodecamp, the Odin Project is an open-source online learning platform. It features a full-stack curriculum that would guide your path in your journey to web development mastery.

The Odin Project training has three paths:

  • Foundation --- where you learn the basics of web development.
  • Full-stack Ruby on Rails --- full-stack web development with Ruby on Rails back-end
  • Full-stack JavaScript --- full-stack web development with JavaScript on the front-end and back-end.

Image description

9. htmlreference.​io and cssreference.​io

These are great online learning resources that feature HTML and CSS references from the creator of Bulma CSS.

Image description

10. Frontend Mentor

Here is another online learning platform that levels up your web development skills through challenges. Frontend Mentor features challenges of different difficulty levels: newbie, junior, intermediate and advanced. It is a fun and well-thought-out way to learn web development, and not only does it give challenges, but it also provides Figma design files and optimised image assets.

Image description

11. Dev Challenges

Dev Challenges features a large collection of resources and a great community that helps you solidify your web development skills and grow your confidence by working on different projects called challenges.

It is easy to get started with Dev Challenges. All you have to do is pick a challenge, build the project alone or with a team, and submit your solution.

Image description

12. MDN

According to their website, MDN Web Docs (previously known as MDN — the Mozilla Developer Network) is an evolving learning platform for Web technologies and the software that powers the Web, including CSS, HTML, and JavaScript.

In addition, MDN features a learning area focused on teaching the basics of web development. The MDN learning area provides articles on a broad range of web technologies such as HTML, CSS, Git & Github, React, Ember, Angular, Vue, Django, and more. If you are a beginner who loves to read, this is a good place to start your web development journey.

Image description

13. Code Mentor

Code Mentor provides a great way to level up your web development skill by engaging you with real-life projects. You can also view the solutions of these projects to learn from other people's codes.

Also, Code Mentor offers a thriving community of over 12,000 developers, where you can discuss projects, find peers or one-on-one mentors.

Image description

14. Coding Dojo

Coding Dojo is a great online learning platform that helps you improve your skill through its online coding platform, coding challenges, walk-through videos, and assessment.

Image description

15. CSS Battle

CSS battle takes a different approach to learning. CSS battle aims to build up your CSS skills through CSS games referred to as battles. Each battle gives you a target that is a styled object that you are to replicate with the smallest CSS code possible.

It is a great way to flex your CSS muscles and grow your CSS skills.

Image description

16. Codier

Codier is another challenge-based learning platform. Codier helps you grow your front-end web development skill by taking on their front-end challenges.

Image description

17. Ace Frontend

Ace Front-end is an online learning platform that focuses solely on the fundamentals --- HTML, CSS, and JavaScript. It is aimed at helping front-end developers hone or polish their skills ahead of an interview.

Image description

18. Can I Use

According to the website, "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

“Can I use” lets you check the browser compatibility of different CSS features. Also, in partnership with BrowserStack, it lets you test your website for compatibility across 2,000+ real browsers and devices.

“Can I use” is a great platform that is useful for developers of all skill levels. And it even allows you to submit a feature if it is not found on the platform.

Image description

19. CSS Tricks

CSS Tricks is a website that provides awesome CSS tricks that are useful for developers of all skill levels.
Beyond this, it features a great collection of articles, guides, videos on different aspects of front-end web development.

Image description

20. 30 Seconds of Code

30 Seconds of Code is an online programming cookbook that provides short code snippets for different programming languages.

30 Seconds of Code may best serve the needs of intermediate and advanced developers. It provides short code snippets and explanations for common programming problems. Thus it is a great place to learn about the design patterns used to solve these problems.

Image description

Key takeaway

In this article, we have learned about web development and different 20 online learning platforms to learn web development.

Also, these platforms employ different teaching methods, such as challenges, games, online references and cookbooks, videos, and more.

Choose the method that works best for you, enjoy the process of learning, and remember that writing good quality code not only leads to higher quality software, but also to greater team and personal satisfaction.

This post was written by Lawrence Eagles - a full-stack Javascript developer, a Linux lover, a passionate tutor, and a technical writer. Lawrence brings a strong blend of creativity & simplicity. When not coding or writing, he love watching Basketball✌️

Top comments (9)

Collapse
 
willaiem profile image
Damian Żygadło • Edited

I want to add two additional resources (helpful mainly for frontend developers)

  • If anyone wants to learn React then I would highly Kent C. Dodds - epicreact.dev/

Normally it's about $269, but if someone doesn't need videos and comments from the creator, then you can learn from the creator's repo for absolutely free.
Each chapter is a self-contained workshop, which has several subchapters and tasks, so you can learn whatever you need.

In my opinion, this course beats the vast majority of other courses - it teaches good practices, useful patterns and shows real-life examples that can happen to you.

I'm throwing in links to TypeScript versions right away (if you don't know TS at all, there is a special script inside the projects that "removes" TS and restores JS):

  1. React Fundamentals - github.com/kentcdodds/react-fundam...
  2. React Hooks - github.com/kentcdodds/react-hooks/...
  3. Advanced React Hooks - github.com/kentcdodds/advanced-rea...
  4. Advanced React Patterns - github.com/kentcdodds/advanced-rea...
  5. React Performance - github.com/Willaiem/react-performa... (my implementation in TS)
  6. Testing React Apps - github.com/kentcdodds/testing-reac...
  7. React Suspence - github.com/kentcdodds/react-suspense (only in js, this is still old and it's possible that Kent will update this when React 18 is released)
  8. Build an Epic React App (Bookshelf) - github.com/kentcdodds/bookshelf (only in js, tasks are in branches)
  • I've been following this channel for a while, I really recommend it because of the quality material (e.g. No BS TS series on TypeScript, also there are videos on React):
    youtube.com/c/JackHerrington

  • If I recall anything else then I will add it.

Collapse
 
ajayts07 profile image
ajayts07

Great list of resources!!

As a developer I belive there are some other resources that can be useful for developers all around the globe. For instance, you can check the Sneat – Free Vuetify Vuejs 3 Admin Template. 🤗

The most comprehensive and developer friendly admin dashboard template. 🚀

Collapse
 
ones66790 profile image
ones66790 • Edited

That's of a huge help for all the beginners. I like how all the information is structured and can be easily assimilated when you read it. That's also very important when presenting some information, because it doesn't matter how useful it is, if people can't understand it. I like this style of web development webcitz.com/web-programming.html, and this is the reason why I have started learning and reading this kind of articles, because I wanna be able to create such good websites as this company.

Collapse
 
criscrosgarcia profile image
Cristian Rogelio Garcia

Nice material!

Collapse
 
viktory6743 profile image
viktory weiss • Edited

Finding web development learning resources involves exploring a variety of platforms, courses, tutorials, and documentation. Remember to tailor your learning path to suit your interests and career goals. Constant practice, creating projects, and keeping up with industry trends are key to developing your web development skills. Also, check the most recent reviews and recommendations for these resources, as the industry is dynamic and new platforms may appear. I think the best place to do this is Linkedin linkedin.com/pulse/software-develo... . there you will find both courses and people who will accurately describe their experiences and even jobs if you really want to. Don't forget to tailor your learning path according to your goals, whether it's front-end development, back-end development, full-stack development, or a specific technology stack. Mix and match resources to create a well-rounded learning experience. As the field evolves, stay curious and open to new tools and methodologies.

Collapse
 
mahmoudessam profile image
Mahmoud EL-kariouny

Thanks bro

Collapse
 
viktory6743 profile image
viktory weiss

You're welcome

Collapse
 
peenana2 profile image
pee nana

Many thanks bro for such awesome resources.

Collapse
 
jaycoolent profile image
Julius Jean-Baptiste

Nice