Front-end development is crucial to the success of any web application. The best back-end programming would fall flat on its face if the front-end is not appealing, responsive, and well designed. The role of a remote front-end developer is to bring a mix of aesthetics with functionality to a site. Multiple technologies are associated with the front end, and it is important to have ready access to resources. We spare you the hard work and offer a curated list of resources for frontend web development. This list is for:
Employers: before you hire a front-end developer, enquire how many of these resources they’re familiar with.
Developers: though you’d have heard of all of these resources, perhaps this guide will let you pause, revisit, bookmark, and benefit.
Must-Read list of web resources for frontend development in 2022
Repositories
These are well maintained and free to access knowledge hubs that contain documentation and public projects.
Also known as MDN Web Docs and Mozilla Developer Center. Mozilla is a free software community with products such as Firefox and Thunderbird.
The Mozilla community founded the MDN in 2005. It is so prominent that Microsoft, Google, and Samsung have closed their in-house documentation centers and moved them to MDN. It has around 50,000 documents related to HTML5, CSS, JavaScript, Django, Node.js, and other technologies.
GitHub is a collaborative platform for software development using software called Git.
Conceptually, there is more than a passing resemblance to collaborative online encyclopedias, such as Wikipedia, using Wiki software.
The difference is that GitHub is a for-profit company.
The number of developers on GitHub is eye-popping. At last count, it stood at 73 million. It is safe to say every developer in the world worth his salt has an account at GitHub.
It also plays host to 200 million code repositories, including 28 million public repositories.
A brief read-through of a Git-based article such as the Front-End Performance Checklist will show you why it is an essential part of every front-end developer’s toolkit.
Online Tutorials
These web-based tutorials are handy for learning. After you have passed out they act as a ready reckoner in case you are stuck with syntax.
W3Schools is an online learning center that tutors front end languages such as:
- HTML
- CSS
- JavaScript
- PHP
- SQL
- Python
- Java
- C++
- C#
- Bootstrap
- JQuery and more
The website is effortless to navigate with every language having a tutorial, basic, intermediate, and advanced resources listed neatly.
If you are confused, go to the left pane of the selected computer language and click on the required information.
Nothing can be simpler. There is also a search box powered by Google. You can sign up for paid courses. But for most developers, the free version is more than enough.
A simple guide to HTML and CSS. It does not explain with lengthy paras, but lays out all the elements alphabetically.
There is an example screenshot of a code editor and a one-line explanation. Sweet, short, and succinct. No-fuss, no protracted intros, in and out with an answer in a few seconds.
A comprehensive collection of syntax and code editor screenshots. Concise explanations are given throughout the tutorial to simplify the learning process.
The entire site can be downloaded as EPUB or PDF for a mere $12. A worthy investment for such in-depth insight.
A not-for-profit learning platform that has a terrific editor and plenty of courses.
Anyone can sign up and take the courses at their own pace. All you need is an email address. The site doesn’t ask for any personally identifiable information.
In the end, you get a certificate that can help you get a junior developer’s job.
FCC also has a blog with in-depth articles, such as The React Beginner’s Guide for 2022.
There is also a forum where you can ask queries or simply browse through topics shared by others. The forum is multilingual and has sections in Spanish, Italian and Chinese.
Magazines and News
A remarkable feature of front-end development is that it is not only code-based but also has to adhere to the current design norms.
Knowing about UX is a must. That is why reading webzines is a must.
It has been presenting the best articles by brilliant writers since 2006. Its fan base is a million-strong on Twitter.
Smashing Magazine offers in-depth articles such as Useful UX Guidelines, Tools, And Resources.
You can search using tags e.g. UX, UI, Round-Ups.
Besides, it offers guides, workshops, podcasts, and a newsletter packed with information. All this is for free. If you pay, you gain access to online seminars that provide insights into the most advanced concepts for the front end.
Envato Tuts offers free articles as well as paid content.
The how-to tutorials are free. They have valuable content about all types of coding and web design.
Anyone can access the plus content à la carte or by subscribing to Envato Tuts Plus for $16.50/monthly.
Considering the quality of the material, it is worth it.
Animated Content Tabs, Hover Animations, and Parallax Effects. Your client is going to ask you for these because they are trending.
Do you know how to write the code?
Worry not if you are in the dark. CSS-Tricks is a one-stop information hub for all things CSS.
Created by Chris Coyier, the programmer leading CSS development for two decades, CSS-Tricks hosts the Almanac, a ready reference to a vast library of CSS functions.
The front page is a blog where you can find the latest CSS design trends and how to set them up using simple syntax. There are over 200 videos that get into the core of CSS development from every angle.
Newsletters
With 78,000 subscribers, it is one of the most respected newsletters that covers the gamut of frontend technologies. It is weekly and provides a thorough review of the latest articles and developments about HTML, CSS, JavaScript, and developments from Google and Microsoft that affect the front end.
Another once-a-week masterpiece. If you don’t have time to read through hundreds of articles on CSS-Tricks, simply read through CSS Weekly updates, and you are covered. It is superbly curated and the fastest way to stay up to date.
Do you know about the latest developments in Ember.js and React? You have to remain in the loop, otherwise, your skills are going to get redundant. Sign up, learn as much as possible, and soon you’ll be offering React app development services.
To know all about the latest in the world of JavaScript sign up for JavaScript Weekly.
Don’t count out good old YouTube.
The video streaming service has plenty of channels that are dedicated to the front end. The best by far is Traversy Media, with 1.74 million subscribers and a whopping 160 million views. It covers everything front end from HTML to React through simple tutorials spanning hours. Most of all, everything is completely free.
The other big one is Programming with Mosh with 2.24 million subscribers. Mosh not only tutors about HTML and CSS but also how to use frameworks such as Angular, React, and Node.
Now what?
Book an hour on your calendar. Spend 5 minutes on each resource. Get a feel. Bookmark. Revisit. And benefit from them.
Sources
https://www.frontendmentor.io/resources
https://github.com/thedaviddias/Resources-Front-End-Beginner#tools
https://www.reddit.com/r/Frontend/
https://www.reddit.com/r/Frontend/comments/75odl5/the_list_of_resources_for_frontend_beginners/
https://www.quora.com/What-is-the-best-resource-for-learning-front-end-development
https://dev.to/snkds/14-great-websites-to-learn-front-end-development-mpm
https://www.developerdrive.com/18-learning-resources-for-front-end-developers/