Stop using Chrome if you're writing CSS

[@KevinPowell]

It feels a little strange posting content with what's going on in the world right now, but I do think it's important to keep on going if we're able to. I hope you, you're family, and you're loved ones manage to stay safe and healthy during this time, and my heart goes out to anyone who's having a tough time because of all this.

[@Dogger1230]

@Kevin Powell We, the world, also need a sense of normalcy, too, rather than just being able to focus on Coronavirus. Your videos help us get that. Thanks Kevin! Great video as always!

[@404-UsernameNotFound]

First COVID-19, now today we're dealing with a 5.7 earthquake and aftershocks. Glad for this video diversion 😁

[@kaine2694]

In times like those I think it is best to keep learning and doing what we are doing. Thanks for this video. Didn't know lots of that stuff.

[@YELLOWFROGdesign]

I love your tutorials! I was wondering... what do you think about coding WordPress themes from a graphic file instead of using page builders? Any other CMS platform you recommend in order to provide clients with a robust set of features? Thanks!

[@blonduose]

Thanks, it's quite difficult to study while in quarantine, but your responsive course (and yt videos) is (are) helping me not lose track.

[@ArnoDePachter]

“Firefox tells you why it doesn’t work” - SOLD

[@aviroxi]

🔥🦊

[@dominikdodo2696]

For JS development there is a nice feature that Firefox has. When you inspect element you can see labels such as flex, grid, but also *event*. When you click on "event" label you can see all the events attached to the element.

[@officialAXVin]

It was mentioned at 5:08

[@kyouhyung]

What even helps you more when working on layout are scroll and overflow labels.

[@boombapswag]

Chrome has the same thing - it's next to css rules in the "Event Listeners" tab.

[@oliverbriscoe243]

@@boombapswag and it's even better because you can remove them

[@sallus449]

Bruh chrome does that

[@D7460N]

Love how real you are as you present. Even for a pro, not everything has to be perfect. Finding fonts you didn't know were there. Relatable, practical, and informative. Thank you.

[@HarshRajAlwaysfree]

"For shortcut people its ctrl+shift+I" F12 : _am I a joke to you?_

[@KevinPowell]

Haha, it's way too far away, I have to move my hand too far for that one :P

[@Luggruff]

Harsh Raj Always free: ""For shortcut people its ctrl+shift+I" F12 : am I a joke to you?" Right-click -> Inspect: _am I a joke to you?_

[@akumekyuketsuki]

@@Luggruff Wait a sec...did your hands just leave the keyboard?

[@Luggruff]

@@akumekyuketsuki yeah, though only in a move my brain doesn't even register at this point.

[@minamulhaq]

@@KevinPowell but once

[@FlorinPop]

Nice tips! Thank you!

[@KevinPowell]

Any time 😁

[@JonathanGibbs24]

The use case for these CSS helpers is super beneficial. We frequently do collaborative coding sessions with designers to make style updates on the fly. Knowing these tooltips & style editor is available is a huge plus - thank you!

[@Ostap1974]

May be to consider createing small video series of Chrome vs Firefox dev tools deep dive topic by topic? They are very similar, but both have some strong areas imo.

[@mityaboy4639]

A year later KZbin suggest this video... what a year. thanks for the Firefox tip.

[@danebrouwer]

The fact that you said "Shift" before "Ctrl" in the shortcut bugs me more than I care to admit 😂

[@KevinPowell]

haha

[@kermitec]

on a PC you can also just hit F12

[@cleptor]

I understand how you might feel. Standard macOS notation uses a "-" in keyboard shortcuts. Using a "+" like in Windows bugs the hell out of me.

[@casperdewith]

The order is Ctrl, Alt, Shift.

[@hasnaindev]

He's a mac user, what can I say.

[@jodorgu8640]

Have always preferred FF not just for the css-centric devtools but because of Mozilla's policy on corporate transparency and protection of user privacy. Also the built-in plugins are great

[@asandax6]

Yeah the plug ins are awesome but they dropped them on mobile and it made Firefox not good😔.

[@sligit]

@@asandax6 There are still plugins on FF mobile but they're curating them so yeah there are very few at the moment but more will be coming.

[@AhsimNreiziev]

Not to mention the fact that Chrome lacks basic functionality like being able to scroll the tab bar left or right......

[@K0nc3pt10n]

It amazes me how many devs are stuck in the past using Chrome. I took the challenge went from Chrome to Firefox and haven't looked back since.

[@nadeemrza918]

Can you make me learn few differences in chrome from Firefox as I started with Firefox only.

[@roeltaga]

Thank you for this video! I'm a junior web developer and for years now I've been using Firefox just because it is so much better than any other browser! I am so happy to see people like you spreading the word!

[@joe-un1ky]

Been using Firefox forever. Nice to finally see some love

[@ethangroat8333]

Same here!

[@Felipe-pb9gu]

Same here... Firefox > Chrome

[@darinweaver6706]

as someone who is learning full stack this is just the kind of thing I need. CSS drives me nuts and debugging it is a *nightmare.* I often get to the area in the inspector where I see my style overridden by _user agent_ or somesuch and I'm like "WHY....!?". This could solve those problems where its valid syntax but just logically the flow or order or specificity is wonked up. Thanks for the vid..

[@ayushp5882]

I'm learning CSS, and this channel really helps. He does makes css so fun and easy to play with. 🤩

[@MB-zj3er]

Saving the CSS to a file from the browser is very nice thing alone that I was not aware of! Thanks for the video. 👍

[@carolmckay5152]

Thanks for that Kevin, I found that contrast inspector one day a while back and couldn't find it again. NOW I know where it is - terrific!

[@codercow1941]

Hey there Kevin, I have just finished the course and I wanted to say that it's been really helpful for me starting out a a front end dev, and to show that I'm gonna be showing my progress of my learning by streaming in this youtube channel. Thankyou for what you put in for me and everyone else who is going to be a learning the lang of HTML and CSS. :)

[@janpawedwa4590]

2:33 Ok, I am convinced already, downloading Firefox now!

[@rainwalker2420]

I have installed Firefox developer and nightly and using Firefox developer for past a year but didn't know about these extra features. Thanks for this tutorial bro.

[@N0thingAs1tSeems]

Wooooooow, for someone like me who has been fumbling around in CSS and is still googling how to scale images, this is extremely valuable information. Thank you

[@darkbluebossa]

I used to use Firefox. Then I formatted my laptop and started using Chrome. Yesterday I installed Firefox again and I found it faster. Not to mention the Dev Tools are better and it´s better for me to use an alternative to monopoly browser

[@aaaron19]

I also realized that Firefox is so much faster than Chrome!

[@Toughmenchannel]

thankful i watched this video before i get into deeply in CSS. Thank you Kevin.

[@rebelshadowrm]

I always loved the change log that Firefox dev tools has. Sometimes I get lost changing things in the dev tools to get something to work the way I want but I forget about all the elements I changed, so the change log is incredible

[@jaydenmoon1165]

I know this video is older - but your videos have helped to keep my mind on web dev and design and off of things that may get me down - thank you for all your content :D

[@m0shtik]

Man, you've just made my life so much easier!!!

[@juhavehnia7862]

Great tip! Even us who started with CSS 1.0 in the early days of web this can be really handy. There are plenty of cases where you end up wasting time trying to figure out why something doesn't work.

[@fahadus]

I keep trying out FF features every few months and love what I see. But I'm basically stuck on Chrome until FF or any competitor adds something like _Local Overrides_. I don't hear people talk about that feature enough. Very easy to set up. Then, you can freely change your stylesheets and work on Inspector stylesheet to your heart's desire without saving anything to your project, they persist! If you open DevTools on the page, your changes will automatically load. You can also reload your inspector you were working on priorly. The same with JS files. You can make changes on the fly without having to save anything on your project files if you're just testing a few things out. A LOT faster to work in the browser, compared to saving each change on the project and seeing it.

[@diegognoatto590]

"changes" = my fav tab ❤️

[@ssboxer]

OMG, your timing is impeccable! I’m at home using this extra time to learn CSS in-depth and I’ve wasted an entire morning making this particular header responsive. I finally finished, but I’ll definitely take your advice and check out Fire Fox going forward. Be well and thanks so much!!

[@robertzeurunkl8401]

This is amazing. I've always raged at the chrome debugger wondering _"Why can't it tell me WHAT is overriding this style?"_ This is fantastic help.

[@ricardodesirat2590]

Great Video Kevin! It would be nice to have one with you fixing your site's accessibility issues (and some new ones you put there for learning purposes) A 2 in 1 video :)

[@KevinPowell]

Good idea! Only issue is then I'd have to show everyone the terrible mess that is my sites code 😂

[@ricardodesirat2590]

​@@KevinPowell don't worry, you have an excuse, some of them would be put on purpose for learning reasons :)

[@pagoli]

Thank you! I'm blown away ... that's what I was looking for. Finally I get why there are sometimes errors when using flexbox designs ... I was nearly giving up on it.

[@danthompson1m]

Great tutorials. Pleasant, upbeat manner and delivery - makes learning fun. Well done!

[@adalbertojosebrasaca9697]

Awesome !!! This is one of those tips that save hours of research on the internet looking for the solution of the error. Thank you so much for share that information.

[@pbrasil88]

* Solution to the problem / Solution for this problem #grammarpolice

[@jimbo-dev]

On Linux there is Epiphany browser which is webkit based so you can do debugging for Apple devices without mac. And you should replace Chrome with Brave browser, because some adblockers block specific css classes which can be tested on Brave (it has some generic adblock preinstalled). Added bonus from Brave browser is also the lack of Google tracking but the same web developer tools as on Chromium.

[@user-mfsc-2024]

chrome browser is strong in js debugging while firefox is strong in html/css debugging

[@kyouhyung]

Then again, Chrome is not as better at JS than FF as FF is to Chrome at CSS. Chrome is a better consumer browser overall i admit, but FF beats Chrome in dev things.

[@vladutcornel]

Both have their strenghts and weaknesses. It's probably best to learn both. When you have something to do, jump in the one that does it better.

[@guss77]

Firefox had better debugging layout - for my taste - and it's multitab viewer, editor shortcuts and filesystem integration are better. Not to mention that the latest Chrome has a serious bug where when you try to set 1 breakpoint it might set 10 or more all over the place (though that could be a weird angular interaction). The only thing I'm missing from Firefox javascript debugger is the quick file search (CTRL-P on my system). I'm really missing that, working on a large dev project.

[@romtekch4958]

That kind of tip from FF dev tools has helped me MUCH recently. Very useful. I think it's a relatively recent addition.

[@BobbyCharlz]

I’m watching this 4 years later and a few years in to my CSS dev journey and I’m like…d’uoh! Thank you for sharing. Especially interesting and useful is knowing how to fix what we may have gotten wrong. I’m liking FF more.

[@MiguelFernando]

I'm thinking about how many hours I could have saved knowing this and fiddling with CSS. Will definitely pass this info along !

[@amlslmn4573]

Always good advices ! And your pronunciation is just perfect, I can understand everything as french ^^ Thank you very much Kevin, you're a king !

[@dmays67]

Woah! Having just switched back to Firefox from Chrome I absolutely Love what you're showing as helpful tools for this budding developer. Nice one mate!!

[@MikkoRantalainen]

11:00 Nice, I hadn't noticed that accessibility tool that you can just hover around the page. Thanks for the tip!

[@FaustBusserl]

Hi, what desktop window tool do you use, you seem to arrange them in tiles at about 1:39?

[@KevinPowell]

Not using anything special, I think it's just the way I edited it there 😊

[@richtraube2241]

Had no idea you can save changes in the inspector. Very cool.

[@lancen6805]

When I first started out I always did dev with FF. At some point though FF always took forever to load up so I hesitantly moved over to Chrome. After using Chrome I noticed that it too took awhile to load up after awhile. I kind of worked through those pains with Chrome since I was using all their apps. I have gone back to FF but not full time. I do miss it. I love the grid feature built right in. I am pleased by the saturation of colors as well. I might just go back full time with it. Thanks renewing my interest.

[@michalroesler]

That's an awesome video Kevin. Thank you so much. Impatiently waiting 4 the next video tutorial.

[@scheimong]

I was initially using Chrome when I first started doing web development. However, I once had to test browser compatibility, and that's how I got Firefox. And yeah, just as you said, Firefox's dev tool is just so much better. I particularly liked the ability to toggle flex and grid layout boundaries with a click - as compared to having to moving my mouse back and forth to hover over several different containers, which I had to do in Chrome. It really is the many small quality-of-life features like this that make doing development on Firefox so much easier. That being said, I still do most of my daily browsing on Chrome, simply due to the abundance of plugins and better Google integration. It's kind of a shame that Firefox is not receiving the amount of love from developers it deserves, especially given that it's non-profit and open source - I really do not want to see Chrome monopolising the browser market. Fortunately, it seems like Google has refrained from going all anti-competition with Firefox, at least for the time being.

[@marian7429]

When I saw the title I didn't expect to see another browser better than chrome in working with css files. After watching the video I realised I was wrong. Thanks!

[@vitorhmtts]

these suggestions are really good. mozilla learned something from the rust compiler, apparently

[@justafreak15able]

rust is amazing

[@fuseteam]

they created rust :p

[@ajibolanle]

Thanks Kevin! Great tips! I didn't bother downloading Firefox when I changed my system before but I have it downloaded now! Definitely going to try these out. 👍🏾

[@soul.rebel1986]

Wow! I have been searching around for accessibly tools! Thank you so much this was extremely helpful 😁

[@decoy6773]

just wanna cry, cause i didn't know about this features of firefox, and it's blamed me every time on Chrome. Thanks a lot Kevin!

[@FunCubing3x3]

Great video! I will likely be working with css again soon after becoming rusty at it, so your tips are very valuable, thanks! Also, the various tools that we have at our disposal for full stack development are becoming great e.g. VS Code

[@Jadestonk]

I switched to Mpozilla for css debugging after watching your video. Btw, you are so peaceful despite you work with css, I admire that jajaja

[@Honestly_Marie]

I CAN’T EVEN RIGHT NOW! This explains so much about the troubles I have with Chrome and because all of my literature has told me this was the way to go, I thought it was always me. Bless your heart and thank you for the information here!! Also, did you actually make those changes to your website? 😉

[@ead5590]

Was really great to get to know about it.. I'd been using Firefox for grid related issues but the CSS dev tools features will surely help.. Thanks a lot Kevin! 😆

[@rathernotdisclose8064]

I just opened a page I was working on in Firefox that I was only using chrome to develop, and the parallax scrolling is like 10x smoother in Firefox. That alone sold me.

[@mahimaandani]

Made it to last video! It was an amazing learning journey, all thanks to you!

[@berenjor]

This is the very first video I saw from you and it made me subscribe. Great work!

[@rc91249]

Soo many useful tips on Your channel, wow man 😊 Here I’m downloading firefox for the first time in years!

[@tejasshekar]

Was searching for how to write a better CSS as I started learning CSS this week. And this video.......it just made me install firefox coz I'm literally sold when it shows what's my issue and how I can learn about it. Damn.

[@LocherYT]

i learned frontend styling with Chrome through my parttime job, we were forbidden from installing additional bloatware aka Firefox. Now after watching this video i see myself using firefox for when I am working from home (due to corona/home-office situation). Thank you for enlighting me. I didn't think Firefox even had a comparable Dev-Tools functionality.

[@KevinPowell]

Devtools exist because of Firefox! (or more specifically, Firebug, which was an extension you could get, which eventually was built into it).

[@HarshRajAlwaysfree]

I don't like doing front end stuff on chrome It sometimes causes hysterical errors Even in HTML

[@_laxman_vijay]

Really great features! . But the problem is there are some styles that work in Chrome properly and not in Firefox and vice versa. And since chrome has the biggest userbase we are forced to make sure the site works best in chrome

[@patrickpacalolo]

I'm brazilian, and i dont know english as i would like.. but you say too clearly, that gets easy to understand. I changed(again) my browser to Firefox, because in chrome the adblock extension can’t block youtube ads anymore =/ This happens yesterday, and today i learn a lot great things about Firefox.. thank you so much!!

[@knsaber]

One of my favorite tips for something similar to the sliders, is using mouse wheel in Chrome on the css values, and it will act like a scroller. CTRL and SHIFT will change the increments to 10 and 100.

[@jonez4143]

Thank you! I literally never even thought of using Firefox's dev tools. This is all so good to know

[@agoodmansaid]

WOW! This is why I'm your subscriber! 👏🏽👏🏽👏🏽

[@truthhorizon5851]

This is a real thing.I spend 3 hours to fix a simple css issue in Chrome.Firefox is really good in HTML and CSS.Great video.Thanks

[@esagecantu]

In my progress of solidfying my HTML/CSS knowledge, I appreciate this tip.

[@jeffgubbins1033]

Enjoying your video. One thing on Mac to open the Developer Tools on Firefox it's: Option - Command - i not Shift - Command - I as stated in your video.

[@drikting]

Thanks Kevin for this helpful video! With Chrome, I have to keep saving an unchanged CSS file to reflect a change made elsewhere in Flask, and even then I am uncertain. With Firefox and browser-sync, so far it seems reliable, at most I just have to refresh the browser to display the last changes. Well done :-)

[@sunquist9258]

Allways used Chrome while developing React apps. You opened my eyes and now considering switching to FF when working with stylesheets, thanks!

[@K0nc3pt10n]

I moved from Chrome to Firefox for React development and found that I preferred Firefox.

[@rickfearn3663]

Terrific video Kevin. I was not aware of the advantages of Firefox when writing CSS and using the grid. Thanks!!!

Hi kevin, just congrat 4 u great content, extremely usefoul. Many thanks

[@sandeepdehal711]

Wow Amazing Work man 👍🏻

[@anroburger7689]

You are my hero 😄 this was so helpful, I'll be following you from now until forever 🤘

[@Vietnamkid1993]

I love Firefox Developer Edition got integrated into the regular Firefox.

[@alexhek]

Thanks for the great insight! I am learning CSS and having these Dev tools will be massively helpful 😍

[@miaangela2398]

Awesome thanks for sharing! Will get Firefox asap. I write custom CSS for WordPress and I think this will help me a lot

[@tprasanth6852]

Your VIDEO is a life saver. Thank you now i don't have to frequently visit Mdn or w3school

[@direstraitsist]

Firefox is my CSS mentor now! I love you so much Kevin. You saved minimum 500 hours of mine.

[@MrDflego]

Those Firefox features are so helpful, I use to use Firefox all the time but then I heard it was better to get your page working on Chrome firstly so went to Chrome. I assumed that Chrome would have some similar features I just hadn't come across them yet, it's good to know that that's not the case.

[@octavian3033]

This helped me A LOT. Chrome and Firefox may have close to the same tools, however I think the ones on Firefox are more user friendly, esp for a newbie

[@kmcg101]

I had no idea and use Chrome dev tools every day. Thanks so much.

[@yomikolawole5073]

Thank you Kevin for these videos, they have really helped my learning.

[@agk2011]

This is a great video. Keep it up, man.

[@barnetteputong2652]

Thanks for all the tips. Very helpful!

[@SYPCWAK]

Thanks for the wonderful and informative video! This is a big help to me! For my MacBook Pro, I must press Option-Command-i to get the inspector to appear. And Option-Command-m for mobile.

[@bishalsenhdri7655]

"Firefox Developer Edition" is even better than Vanilla Firefox! You can change theme of editor as well.

[@ProgrammingWithPax]

Great video. Thank you Kevin!

[@wordonice4457]

I use Chrome a lot! But then again, i transitioned from a back-end programming background, so I'm still learning a lot. Will start using Firefox for more often to take advantage of these new features

[@8ack2Lobby]

Thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanks alot! I am gonna start firefox for css now. Also there was an issue with chrome that it doesn't update my css after simple reloading. I have to hard reload every time.

[@Tomas970506]

Haha I just got used to pressing ctrl shift r for quick hard reload...

[@Sparsha-Dhar]

Generally I don't go for "Stop using Chrome instead use Brave, Firefox, security issues, blah blah blah whatever". But this content was actually worth it. I was going to ignore this one but the word "CSS" told me, no have a look at this video.

[@victordeveloper1920]

Very useful! Thanks!

[@musthavechannel5262]

A small thing but I was hoping you would mention it. While inspecting an element, Firefox draws four dotted lines along the bounding box of the element which run to all the way to the edges of the screen. This has been a *HUGE* time saver in instances where you want to have an idea of elements' relative position, and those instances are very frequent. I'm sure majority of the people is benefiting from it already but if it is new to anyone then use it and try using chrome after that. You will feel crippled and held back so much. Talking of inspector, I also like the Firefox's usage of strong colors to highlight margin/padding/element compared to chrome's choice of low contrast colors. Been using Firefox since forever but I never paid attention to the responsive breakpoints thing in CSS tab, such a nice thing to have. P.S. I use Firefox because I have so many reasons to use it and no reason to switch away from it. It is just just awesome.

[@JLDReactions]

This was so useful! Thanks.

[@MikkoRantalainen]

6:15 The Segoe UI was *fallback* to local system fonts because you had some specific character (emoji or some other UNICODE symbol) not provided by the web fonts.

[@Fubbel42]

Great content, you're an excellent teacher 👍