Want to Learn More CSS? Try Using Firefox DevTools

There are many reasons you should be using the Firefox web browser, particularly if you are interested in learning more about CSS. If you find it frustrating to visit Stack Overflow each and every time you run into CSS issues that seem to be impossible to solve, try running your project on Firefox while developer tools are running.

A new Firefox DevTools feature lets you see why a line or block of code is not working or having the desired effect.
The feature was announced by Firefox developer Nicholas Chevobbe in early June, and it has been welcomed by the web design community. The feature works similarly to the debugging mode offered by Google Chrome, but it includes explanations as well as a link to the relevant tutorials.

The example provided by the announcement was of a line of CSS code that intended to set a width property but failed to have the desired effect. When evaluating the code on a line by line basis, the DevTools Inspector found an issue with a width declaration that was incorrectly coded as an inline element. The intuitive feature alerted about this issue with a text balloon explanation that even included a suggestion to use the correct display declaration, which in this case should be inline:block or display:block.

Aside from the elucidation, Firefox DevTools also displays a handy link to the relevant CSS lesson; this offers an opportunity to learn more about the specific topic. Developers at the Mozilla Foundation plan to add even more functionality to DevTools. It should be noted that this is an open-source project supported by a large community, which means that it will only get better and more comprehensive in the future.

CSS programmers are not the only ones who stand to benefit from this feature. Let's say you are a back-end developer who notices something is not right with the way a project looks; if you happen to catch the problem with DevTools and the recommendation works, you will not have to submit a ticket and wait for a front-end CSS developer to review the code. In this case, Firefox DevTools become more than just learning opportunities; they can be timesavers. For more information click here https://twitter.com/nicolaschevobbe/status/1135798960361263104.