Karim Elnemr Logo

Karim Elnemr

February 21, 2022

Best 10 Web Development Learning Resources

webdev-resources.png

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

So that, now is the best time to learn web development. But if you don't know how to start, don't worry I got you covered.

After a lot of researches, readings and comparisons, here are the best and most reliable resources I use to learn web development online.

1- Road Map

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.

It 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.

2- Freecodecamp

Freecodecamp

Freecodecamp is an extensive open-source online learn to code Bootcamp for free, build projects and earn 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.

3- W3Schools

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.

4- MDN

MDN

Resources for developers, by developers.

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 to guide complete beginners to web development with all that they need to start coding websites.

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.

5- Can I Use

Can I Use

“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

also 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.

6- CSS Tricks

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.

7- Codepen

Codepen

The best place to build, test, and discover front-end code. CodePen is a social development environment for front-end designers and developers.

Codepen features an online text editor to build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

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

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!

8- Frontend Mentor

Frontend Mentor

Improve your front-end coding skills by building real projects.

Simply have a look through a collection of web designs.

Pick one that you feel will be a suitable challenge for you form deferent levels (Newbie, Junior, Intermediate, advanced, Guru).

Start the challenge and download all the starter files.

They provide all the files you'll need to complete the challenge, then start building it your way.

Submit your solution, by posting it on the platform so that everyone will see and get you can get feedback on your code from other developers in the community.

9- Stack Overflow

Stack Overflow

Stack Overflow is a public platform serves 100 million people every month, making it one of the most popular websites in the world.

It is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network.

It features questions and answers on a wide range of topics in computer programming. If you hit any roadblock while learning or building your project I advice you to seek some help and use that great tool.

10- GitHub

GitHub

Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world.

GitHub is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management (SCM) functionality of Git, plus its own features.

It provides access control and several collaboration features such as bug tracking, feature requests, task management, continuous integration and wikis for every project.

It is commonly used to host open-source projects. It is the largest source code host in the world.

In this article, I have included the most important resources to learn web development from my prospective.

These platforms offer different teaching methods, such as challenges, games, online references, Articles, videos, and more.

Choose the method that works best for you, enjoy the process of learning, be diligent, consistent and precise.

 

Thanks for reading!