DEV Community

Cover image for A curated list of (mostly) free resources for HTML, CSS, JavaScript and more
Matt Studdert
Matt Studdert

Posted on

A curated list of (mostly) free resources for HTML, CSS, JavaScript and more

Over years of writing code I have built up a lot of bookmarks for sites I find useful. I have used this list to help point my students in the right direction if they're looking to solve a particular problem.

Instead of emailing people the list, I decided to put it online...it's easier that way ๐Ÿ™‚ So, here's my list of resources for front-end web development!

Wherever possible, I have focused on free resources to make the list accessible to everyone.

In no particular order, here are a few of my favourites from the list:

dev.to

OK, so I lied about the lack of order for this first one! This is a dev.to post after all! Since joining this summer I've been amazed at the strength and solidarity of the community. Ben, Jess, and Peter are doing an amazing job helping this community evolve into one of the top destinations for devs to hang out online.

freeCodeCamp

Very few people in the web development community haven't heard of freeCodeCamp. The site is an amazing free resource to learn how to code. You can either go through all the tracks, or pick and choose the skills you would like to learn. On top of the course, they also have great articles and an awesome podcast to help you learn on the go.

Syntax Podcast

This podcast isn't just informative, it's also really funny to listen to. The hosts Wes Bos and Scott Tolinski have a great friendship, which gives the podcast a great dynamic. They're both awesome developers/instructors and every episode is packed with knowledge bombs.

Visual Studio Code

V...S...Code. Oh how I love thee ๐Ÿ˜ I could go on for hours about how much of a pleasure it is to write code in this text editor...and I probably will in another post. If you haven't tried it yet, I'd recommend giving it a shot. There are a ton of articles out there for good setups for particular workflows to help you get up and running.

Lighthouse

Having a testing tool might seem like a strange addition to this list. Not very sexy I know! But seriously, Lighthouse offers an unbelievable suite of testing tools to help build fundamentally sound websites. Included in the tool is the ability to run audits right from Chrome Dev Tools for the following:

  • Performance
  • Progressive Web App benchmarks
  • Best practices
  • Accessibility
  • Search Engine Optimisation.

Any additions?

There are so many incredible resources out there, that I know this list will keep on growing.

If you've got any resources that you'd add I'd love to hear them!

Keep in touch

If you'd like to stay in touch and be updated when new resources get added to the list, follow Frontend Mentor on Twitter.

Top comments (13)

Collapse
 
notriddle profile image
Michael "notriddle" Howell

Mozilla Developer Network is the reference that we need, as opposed to the reference we deserve.

Collapse
 
mattstuddert profile image
Matt Studdert

It's an extremely comprehensive resource. Getting people to actually read the articles is often a losing battle though! ๐Ÿ˜‚

Collapse
 
juniusfree1 profile image
juniusfree

I finished >90% of MDN's HTML and CSS module. I used Anki to make it more interesting. ๐Ÿ™‚

Thread Thread
 
mattstuddert profile image
Matt Studdert

Ah, nice! Never heard of Anki. Looks like a great study aide!

Collapse
 
weirdmayo profile image
Daniel Mayovsky

I think Vim would be the next thing I learn after I know how to write code and have written some for lets say about 4 months.
Vim will definitely be a frustrating experience for first two weeks, but then the person that takes on this journey will never regret it. It will definitely help the person to write the code more efficiently.
After that, if a person really liked the Visual Studio Code, it can install the vim plugin for it, and the whole coding experience will become so much better.

Collapse
 
mattstuddert profile image
Matt Studdert

Interesting! Next tried Vim, so it's good to hear your perspective. Thanks!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

In my search to find out resources that I can use to make my websites better, I think the best so far is this bennettfeely.com/clippy/
It is CSS clip-path generator to create cool shapes on images and put a creative spin on image display.

Collapse
 
mattstuddert profile image
Matt Studdert

Yeah, Clippy is a great tool! ๐Ÿ’ฏ

Collapse
 
david_j_eddy profile image
David J Eddy
Collapse
 
mattstuddert profile image
Matt Studdert

Awesome list is definitely awesome! ๐Ÿ™Œ

Collapse
 
jess profile image
Jess Lee

Really beautiful site, Matt! Great list.

Collapse
 
mattstuddert profile image
Matt Studdert

Thanks Jess!

Collapse
 
craigleo profile image
Craig Leontowicz

logotaco.com for some free logo and brand design.