As a person learning web development, you should always be looking things up that you don't know. Because, let's face it - in today's world, it's silly to know every single feature of a coding language. Instead, we as developers look things up! Today, I'm going to show you six of the best web development reference sites for those moments when you can't quite remember how that specific thing works.
What is a reference site?
A reference site is where you go if you need to know a specific thing - let’s say what values the margin property takes in CSS or how to find the square root of a number in JavaScript. It is an easy way to get an answer to a very specific question.
How is a reference site different to a tutorial site?
A tutorial site such as this one aims to explain something to you. So, for example, in my CSS background images tutorial, I teach you how all the different background image properties work in an easy-to-understand way. If it were a reference site, it would say something like:
The background-position property takes one or more comma-separated <position> values. If multiple background images have been specified, each <position> is applied to a corresponding background image (first <position> for the first image, second <position> for the second image, and so on).
(From the Codrops CSS Reference)
As you can see, this is much more succinct and is good if you need a quick reference or reminder, however it is not as good if you are learning it for the first time and need help, examples and, guidance.
1. W3Schools
W3Schools is a tutorials website, but they are more brief and reference-like. They also have dedicated reference pages for most web development languages. Their format is very good. For each language reference, they have a sidebar with a list of pages, so it is very easy to find what you are looking for - I never even need to use the search bar! The reference is also very succinct and to-the-point which is good for when you need a quick reminder of something. I would say that W3Schools has the best explanations by far.
Reference links:
They also have many other references for things such as jQuery, PHP, and SQL.
2. DevDocs
DevDocs is very similar to freeCodeCamp in that is has many different languages (not only web development), from very popular ones to lesser-known ones. I really like the layout - it is similar to W3Schools and especially freeCodeCamp with the sidebar and drop-downs. The reference is really great and in-depth, but also easy to skim and find what you need.
Reference links:
- HTML Reference
- CSS Reference
- JavaScript Reference
- And basically everything else 😂
3. freeCodeCamp Guides
freeCodeCamp guides are made by the community, for the community. They have a GitHub repository where you can actually contribute! This is something I’ve done and it’s pretty rewarding. Anyway, with so many nice people working on it day and night, it is a great reference. The layout is also very nice - similar to W3Schools, it has a sidebar with all the different pages. However, every single language is in that sidebar, meaning navigations is really simple.
To visit a page for a particular language, just click the arrow next to it in the sidebar and a drop-down will appear with all the pages. Another awesome thing about freeCodeCamp guides is that it isn’t just for HTML, CSS, and JavaScript. They have a bunch of other languages including C, Ruby, PHP, and more. They also have extra guides such as Working in tech and design which are very helpful.
Reference links:
- HTML Reference
- CSS Reference
- JavaScript Reference
- A bunch of other stuff (see the sidebar)
Note that these links go to the main language pages, to see all the sub-pages of that language you will need to expand it in the sidebar.
4. MDN Web Docs (Mozilla Developer Network)
The MDN Web Docs is made by Mozilla, the people who built Firefox. So as you can imagine, they are also a great authority on web development! Personally, I am not a fan of MDN’s layout, however, it is a lot more detailed that W3Schools and provides more examples.
I suppose it depends on what you are looking for - If you are looking for a quick reference to something you forgot, go to w3schools. If you are looking for more in-depth documentation outlining everything about what you are looking for, choose MDN. Ultimately, it’s up to you. Have a look at both and see which you prefer. Personally, I’m not a fan of MDN overall, but many people would disagree with me.
Reference links:
They also have some other more specific references such as ones for SVG and canvas.
5. Codrops CSS Reference
Last but definitely not least, the Codrops CSS Reference has a really great layout and is easy to navigate and use. They have every single CSS property, function, data type, rule and more. When you click on one it takes you a page with the official syntax, values, examples and more. It even shows you which browsers support the feature!
Much like MDN, it is very in-depth. However, I like it much more than MDN because even though there is a lot of content, it is organized in a much better way and is easier to navigate and find what you are looking for. Unfortunately, Codrops only has a CSS reference, not an HTML or JavaScript one :( If they did, that would be awesome, but for the moment I’m glad that the CSS one exists.
Reference links:
6. Stack Overflow
While Stack Overflow is not strictly a reference site, it is an invaluable place to get answers to programming questions or issues. Most of the time when you have a question, you will find that it has already been answered on the site - look no further! If not, you can post a question and someone will usually get back to you within an hour (often less) of posting the question (unless it’s really obscure or tricky). The Stack Overflow community is helpful, kind, generous, and smart and will help you through whatever your issue is.
There is a great tour page explaining how it works here.
My cheat-sheets! (coming soon)
Haha, what’s a good article without some self-promotion 😉
So, early next year I’m gonna be making some cheat-sheets on HTML and CSS (and JavaScript late next year). While they won’t be full-on references, I hope to make them a good place to refer to for a basic summary of the language. If you have any ideas as to what you, as a reader, would like them to contain, send me an email.
Conclusion
Hopefully, this list helped you! If there’s anything that you think should have been on there or want to have a heated discussion on which is the best, the comments are the place for you. Also, I love feedback! Tell me there 👇
Here is a quick recap of the websites I talked about today:
| Website | Links |
|---|---|
| W3Schools | HTML, CSS, JavaScript |
| DevDocs | HTML, CSS, JavaScript |
| freeCodeCamp Guides | HTML, CSS, JavaScript |
| MDN Web Docs | HTML, CSS, JavaScript |
| Codrops CSS Reference | CSS |
| Stack Overflow | Homepage, Tour page |
If you liked this article and want to inspire some fellow coders or soon-to-be coders, I’d really appreciate it if you shared this article. Thanks! Also, if you want to receive new posts I’d be stoked if you signed up to the newsletter! If you do, you’re officially awesome in my eyes 😎 and deserve a taco 🌮
Have a great 2018 and hopefully these websites I shared will help you along your coding journey! Stay tuned for next time, where I’ll be talking about free resources to test your website. This is a great way to see how you can improve your website going into 2018 📆 🎆 . See you then!
Want more posts like this? Sign up to my newsletter.
I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)
This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript
Top comments (1)
Really nice article, I’ll be sure to check some of them out as apart from Mozilla and w3 schools I’ve not heard of any of them 😅