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)
Mozilla Developer Network is the reference that we need, as opposed to the reference we deserve.
It's an extremely comprehensive resource. Getting people to actually read the articles is often a losing battle though! 😂
I finished >90% of MDN's HTML and CSS module. I used Anki to make it more interesting. 🙂
Ah, nice! Never heard of Anki. Looks like a great study aide!
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.
Interesting! Next tried Vim, so it's good to hear your perspective. Thanks!
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.
Yeah, Clippy is a great tool! 💯
Awesome List is awesome, even has a frontend section.
Awesome list is definitely awesome! 🙌
Really beautiful site, Matt! Great list.
Thanks Jess!
logotaco.com for some free logo and brand design.