loading...

Essential Frontend Resources in 2019

zahinize profile image Zahin Alwa Updated on ใƒป3 min read

Frontend development has taken the world by storm in the last decade with extreme progress in all web technologies (HTML, CSS, JS, etc.) sponsored and led by the biggest software companies in the world. It is arguably one of the highest paid, the most in-demand and satisfying jobs in the software industry for quite some time. This is the best time to learn it if you havenโ€™t started already ๐Ÿ˜ƒ!

Here is an exhaustive list of web resources that will help you to become a great Frontend developer in 2019.

  • Mozilla Developer Network for frontend (Html, CSS, Js, etc.) code reference and learning ๐Ÿค“. This will be your code holy book ๐Ÿ“š and you should follow it religiously!

  • caniuse.com to check โœ… cross-browser compatibility of frontend technologies.

  • kangax-js-compat-table to check โœ… JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile).

  • html5 Periodic Table to learn different types of HTML5 elements and write semantic HTML markup ๐Ÿ˜Ž.

  • web.dev to learn about web ๐Ÿ•ท fundamentals from Google Developers ๐Ÿ‘จโ€๐Ÿ’ป.

  • v8.dev to learn about Googleโ€™s open-source high-performance Javascript and WebAssembly engine ๐Ÿฆธโ€โ™‚๏ธ that empowers Chrome and NodeJS.

  • css-tricks to learn everything about CSS ๐Ÿ˜ป. Period.

  • htmlreference.io, cssreference.io to have an HTML/CSS visual guide ๐Ÿคฉ and code reference bookmark.

  • javascript.com, javascript.info to start learning about Javascript ๐Ÿ˜ผ.

  • ponyfoo.com to get valuable content about the Open Web platform ๐Ÿ•ธ๏ธ.

  • smashingmagazine.com to get professional resources for web designers ๐Ÿค“ and developers.

  • freecodecamp.org to build frontend projects and collaborate with the community ๐Ÿ‘จโ€๐Ÿซ.

  • frontendmasters.com to advance ๐Ÿ”ฅ your skills with in-depth, modern frontend courses.

  • codecademy.com, udemy.com, pluralsight.com, lynda.com to do free and paid ๐Ÿ’ด online code courses.

  • egghead.io to learn the best JavaScript tools and frameworks from industry pros ๐Ÿ˜Ž.

  • alligator.io to quickly understand seemingly-difficult frontend code concepts ๐Ÿ˜ฎ.

  • leanpub.com to easily write, publish and sell in-progress and completed ebooks ๐Ÿ“š and online courses.

  • frontendfront.com to stay updated with the latest web news, trends and conferences ๐Ÿ“ฃ happening all over the world ๐ŸŒ.

  • uptodate.frontendrescue.org to follow frontend leaders ๐Ÿ† , find the best resources, attend conferences, get inspired and build your stuff.

  • medium.com to discover, read ๐Ÿ“– and write ๐Ÿ–Š related articles.

  • twitter.com, instagram.com to follow people you like, discover what they do ๐Ÿ” and share your work.

  • producthunt.com to discover and submit ๐Ÿ’ฏ new products.

  • codepen.io to build, test ๐Ÿง and discover frontend code.

  • jsfiddle.net to build demos for libraries/framework documentation ๐Ÿ“ƒ and fiddle with frontend code.

  • repl.it to learn, build, collaborate and host your ideas in one place ๐Ÿคฉ.

  • codesandbox.io to build โœ๏ธ and share web applications using cutting edge technologies.

  • glitch.com to build โœ๏ธ and share your next web app/bot/demo using customisable starter templates.

  • github.com to host and review ๐Ÿง code, manage projects and build software ๐Ÿค– alongside millions of developers.

  • stackoverflow.com to get answers to your toughest coding questions ๐Ÿ˜, share knowledge with your coworkers in private, and find your next dream job.

  • hashnode.com to connect with developers all around the world and grow your career ๐Ÿค“.

  • dev.to to share and discover great ideas, have debates and make friends ๐Ÿ’›.

Well, that's a wrap!
Do you like this list? Did I miss any essential web resources that you feel should be added?
Please let me know in the comments or collaborate on Github. Let's talk!

Disclaimer: All these resources have been chosen on popularity, relevance and effectiveness metrics. Their presence will certainly enhance your frontend developer portfolio but you can always pick and choose them :).

Posted on by:

zahinize profile

Zahin Alwa

@zahinize

Software Engineer ๐Ÿ‘จโ€๐Ÿ’ป. Clean code & Documentation โค๏ธ. Sports โšฝ๏ธ. Singing and Music ๐ŸŽต. Dance ๐Ÿ’ƒ. Movies ๐ŸŽฅ.

Discussion

markdown guide
 

Great list for sure -- thanks for putting this together! ๐Ÿ˜Š

May I also suggest JSFiddle.

It is somewhat synonymous with codepen, however with a few differences! IMO, JSFiddle is more of a platform to learn and discover code, whereas codepen is more of a 'sharing' platform. For instance code snippets, UI patterns and what not.

That's not to say that you can't learn from codepen, you most definitely can and they are both amazing tools! ๐Ÿ˜Ž

Best,
Tyrus Malmstrom.

 

Hi Tyrus, thanks for the suggestion ๐Ÿ™Œ.

I am glad you liked the compiled list :).

Indeed JSFiddle.net is an amazing frontend code playground and has been one of the oldest too. I started using it way before any other online code playground. I critically thought about its inclusion into the list and finally decided against it due to the fact that all major features provided by JSFiddle are already present in Codepen and Codepen has a thriving huge developer community that appreciates, collaborates and discover incredible frontend code every day. I was unable to find a likewise community for JSFiddle.

Having said that, there will be developers who might like the elegant UI, usability and minimal feature set offered by JSFiddle.

Thus, I will add JSFiddle to the list.

Regards,
Zahin

 
 

Hi Alberto, thanks for the suggestions ๐Ÿ™Œ.

Wow! These resources are invaluable and will act as an HTML/CSS code reference bookmark.

I will add both of them to the list :).

 
 

Great list! What about caniuse.com ?

 

I agree! caniuse is an awesome site that I use quite often in my daily development.

It allows you to see what features are supported on all browsers and the layout is very intuitive -- great suggestion! ๐Ÿ‘Œ๐Ÿ˜Š

 

Hi Daniel, thanks for the suggestion ๐Ÿ™Œ.

I am glad you liked the compiled list :).

My bad ๐Ÿ˜…! caniuse.com is the de-facto standard for finding cross-browser compatibility of frontend technologies. I will add it to the list.

 

Great list - I propose that you should add glitch.com ! I am a long time user of codepen and a huge fan of it, and gitch.com is kind of a full stack version of it. If you haven't tried it yet - I highly recommend it!

 

Hi Agustin, thanks for the suggestion ๐Ÿ™Œ.

I totally agree with your proposal. glitch.com allows you to build and share full-stack web applications and it's a breeze to make stuff on it. I have built a couple of POCs on it and loved the whole experience.

I will add glitch.com to the list :).

 
 

Hi Prashant, thanks for the suggestion ๐Ÿ™Œ.

How can I missed it ๐Ÿ˜? Honestly, I hadn't explored dev.to at the time of writing this post. I am simply blown away by its fantastic developer community!

I will add dev.to to the list :).

 

Strange, I don't see dev.to in here considering JavaScript-based (or at least front-end based) articles are pretty popular here. :p

 

Hi Gabriel, thanks for the suggestion ๐Ÿ™Œ.

Totally agree. How can I miss it ๐Ÿ˜? Honestly, I hadn't explored dev.to at the time of writing this post. I am simply blown away by its fantastic developer community!

I will add dev.to to the list :).

 

I would also suggest javascript.info as anoth awesome resource for learning.

 

Hi Chandler, thanks for the suggestion ๐Ÿ™Œ.

Indeed, javascript.info is a valuable frontend resource consisting of Javascript-based tutorials. The site content is regularly updated to catch up with the progress of ECMAScript specification.

Thus, I will add it to the list :).

 
 

Hi Mark, thanks for the suggestion ๐Ÿ™Œ.

Indeed, frontendmasters.com is a valuable frontend resource to advance your skills ๐Ÿ”ฅ. It is a highly popular course among frontend developers.

I will add it to the list.

 

Great list! I also recommend ponyfoo.com and also to subscribe to their weekly newsletter, they share really good content from all over the internet!

 

Hi Emanuel, thanks for the suggestion ๐Ÿ™Œ.

Indeed, ponyfoo.com is an amazing resource that has been sharing valuable content for a while now.

I will add it to the list :).

 

Thanks for putting the list together. It is very helpful.

 

Hi Michael,

I am glad you liked the compiled list :).

 

Great list! How about devtools.tech for amazing tech tutorials? :P

 

Aye Aye Captain! Will add devtools.tech to the list ๐Ÿ˜‰.

 
 

Hi Maxence,

I am glad you liked the compiled list :).

 
 

Hi Stefan, thanks for the suggestion ๐Ÿ™Œ and sorry for a bit late reply.

hashnode.com seems like a fantastic resource to connect with developers all around the world and grow your career ๐Ÿค“.

I will add it to the list :).

 

Very nice and informative article.
Thanks a lot.

 

Hi Alok,

I am glad you liked the compiled list :).