Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 19, 2021 01:57 pm GMT

Firefox can help you learn CSS better.

Original post: Firefox can help you learn CSS better.

Yeah, you have read it right. Stop using chrome or any other browser. Most of you might get offended, but I know what I am talking about. Chrome is the best choice when it comes to javascript and other stuff. Even I am writing this article using chrome. So, why should you stop using chrome? Well, I usually suffer a lot when CSS doesnt work the way I want it to work. Its totally my fault, but how can I get help? or how can I know the CSS I am applying is invalid here? Sometimes, these small CSS tweaks can make you suffer a lot.

After a lot of searches, I found a valuable resource to help me understand these CSS tweaks. I found the Firefox browser. I will explain to you, why you should reconsider your browser and start using Firefox while learning CSS.

If something doesnt work, it will tell you why.

While learning CSS, you might experiment with CSS. Sometimes, something didnt work and you have no idea that why it didnt work. Here comes Firefox, to let you help in this situation. Let me tell you how.

ScreenShot of the Chrome Developer tool.

Above is the Developer tool of chrome and you can see that I have applied vertical-align property to the button and it didnt work. As you might know that why it didnt work. What about beginners, who are just learning now? For them, it might be arduous. Now lets see Screen Shot of the Firefox developer tool.

ScreenShot of Firefox Developer tool.

You can see that its telling me what was the mistake, I was using display flex for the button, changing it to display inline will work.

What are the fonts, the website is using?

As a beginner web developer, you might be wondering about different fonts of different websites. When I started, I was so curious to know about the different kinds of fonts, some famous websites were using. Unfortunately all in vain, until I found Firefox. In the firefox developers tools, you can actually for fonts. Heres how.

Go to the Website, then open the Firefox developer tool. Navigate to Fonts and then select All fonts on Page. There you will be able to see the list of fonts.

Image of https://thoughtsbuilder.com website

If you want to see the font of a specific header or any paragraph, select that paragraph and then see repeat the same process.

FlexBox inspector

CSS flexible box model is commonly known as flexbox model, it is CSS layout model. The flexbox layout allows responsive elements within a flex container to be automatically arranged depending upon screen size.

If you are working with flexbox and want to inspect the flexbox container then Firefox FlexBox inspector may be your friend in need.

You just need to open the inspector and there navigate the flex item. Go to the Styles tab and you might see the property of display flex. In front of flex, you may see a small grid icon just click on that and you will see that the flex container got highlighted. It is very useful when you are working with flexbox properties like flex-wrap etc.

Image showing CSS Flexbox

CSS Grid inspector

How important it is to keep track of rows and columns in CSS Grid and Firefox CSS inspector helps you do that very easily. To open CSS inspector, you just need to follow the process as you did to open flexbox inspector. After opening grid inspector you can see the highlighted rows and columns.

Website showing CSS grid

This website used in the image is not affiliated with me. I just opened it to show you as an example.

Accessibility Inspector

One of the best ways to fix your website Accessibility is to inspect it through the Firefox accessibility inspector. Open the developer tool and navigate the accessibility or you can use the shortcut (shift + F12). Where you can scan for issues and it will also let you know, how you can fix these issues.

Accessibility feature of Firefox

Conclusion

As you can see, how helpful Firefox can be while learning CSS. There are a lot more to just these, but I guess these features are pretty much used every time. So, I hope you are okay with my opinion now.

If you liked my article, give it a like and let me know if you know any other feature of firefox which can help the people. Share it with your friends, because Sharing is caring.


Original Link: https://dev.to/sameerkatija/firefox-can-help-you-learn-css-better-199i

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To