![codedrop square picture css codedrop square picture css](https://cdn.kstarlive.com/resource/2017/06/14/base_28373dfdd9e23fc82e7ae6136b64c18e.jpg)
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. 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. It even shows you which browsers support the feature! When you click on one it takes you a page with the official syntax, values, examples and more. They have every single CSS property, function, data type, rule and more. Last but definitely not least, the Codrops CSS Reference has a really great layout and is easy to navigate and use. They also have some other more specific references such as ones for SVG and canvas. Personally, I’m not a fan of MDN overall, but many people would disagree with me. Have a look at both and see which you prefer. If you are looking for more in-depth documentation outlining everything about what you are looking for, choose MDN. 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. 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. The MDN Web Docs is made by Mozilla, the people who built Firefox. 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. A bunch of other stuff (see the sidebar).They also have extra guides such as Working in tech and design which are very helpful. They have a bunch of other languages including C, Ruby, PHP, and more. Another awesome thing about freeCodeCamp guides is that it isn’t just for HTML, CSS, and JavaScript. 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. However, every single language is in that sidebar, meaning navigations is really simple. The layout is also very nice - similar to W3Schools, it has a sidebar with all the different pages. Anyway, with so many nice people working on it day and night, it is a great reference. They have a GitHub repository where you can actually contribute! This is something I’ve done and it’s pretty rewarding. Reference links:įreeCodeCamp guides are made by the community, for the community. The reference is really great and in-depth, but also easy to skim and find what you need. I really like the layout - it is similar to W3Schools and especially freeCodeCamp with the sidebar and drop-downs. DevDocsĭevDocs is very similar to freeCodeCamp in that is has many different languages (not only web development), from very popular ones to lesser-known ones. They also have many other references for things such as jQuery, PHP, and SQL. I would say that W3Schools has the best explanations by far. 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. They also have dedicated reference pages for most web development languages. W3Schools is a tutorials website, but they are more brief and reference-like. If multiple background images have been specified, each is applied to a corresponding background image (first for the first image, second for the second image, and so on).Īs 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. The background-position property takes one or more comma-separated values. If it were a reference site, it would say something like: 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. How is a reference site different to a tutorial site?Ī tutorial site such as this one aims to explain something to you. It is an easy way to get an answer to a very specific question. What is a reference site?Ī 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. 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. Because, let’s face it - in today’s world, it’s silly to know every single feature of a coding language.
![codedrop square picture css codedrop square picture css](http://1.bp.blogspot.com/_mwq4k2Ux7jI/Scjl1WjpPOI/AAAAAAAAACQ/5xqgY_TT7MQ/s320/greimas.jpg)
As a person learning web development, you should always be looking things up that you don’t know.