HTML & CSS Crash Course Tutorial #7 - Chrome Dev Tools

Hey gang, in this HTML & CSS tutorial for beginners I'll go through what Google Chrome dev tools are - and how they can help us when creating websites. We'll look at inspecting elements, getting CSS selectors, editing attributes & CSS rules on the fly and also importing project folders into Chrome for live coding.
----------------------------------------
🐱‍💻 🐱‍💻 Course Links:
VS Code download - code.visualstu...
🐱‍💻 🐱‍💻 Other Related Courses:
Modern JavaScript Tutorial - www.thenetninj...

[@Luke-xi4vn]

I’ve been binge watching your past playlists on react, regex, and more and I just had to come here to tell you that the work your doing on this channel is truly incredible. You put out the highest quality content, bring awesome energy, have unparalleled knowledge and top it off with masterful teaching skills. Your channel is changing my life, improving me everyday, and I’m certain that the majority of your subs and viewers feel the same way. I have so much appreciation for the resources and content you create. Thank you, wholeheartedly.

[@NetNinja]

Thanks so much I really appreciate your comment and it’s great you’re gaining so much from it 😊 thanks again dude 👍👍

[@rolim22]

I second it . I have become a big fan o Shaun and will sign and buy all his materials. The best tutor I've came across on the web. Thanks a lot!

[@jarryd_phillips]

Could agree more. Thank you Shaun. Will definitely purchase React & React Native on your website. 👍🙏

[@JohnnyB.Good10]

💯%

[@djstylistictv]

I'm binge-watching this playlist like it's Netflix. Dude, you are an amazing teacher.

[@NetNinja]

Thank you :)

[@flifluflofli]

haahahahaha :) the issue is that if u watch it like youtube you wont remember a shit hahahaha ;)

[@LionafriQRadio]

you have to actually do & practice it, fam!

[@magalyriera]

You are by far the best teacher I have come across on KZbin! Thank you tons for sharing your knowledge!!!

[@batchrocketproject4720]

One of the best tours of Chrome developer tools I've seen; I use it daily but learnt plenty here. Thanks.

[@subhambhakat3908]

I am unable to add CSS using console the way he said in the beginning part of the video.Do I need to learn something else for that.It says syntax error

[@MOTAZ722]

i was confused watching many tutorials when it comes to check what they are doing with chrome tools . nobody makes it so clear as you did. thank you so much

[@ridl27]

yea, Chrome Dev Tools are really useful things! and I'd like to say it was pretty good introduction to them 👍

[@NetNinja]

Thanks 😊😊

[@venkatakalyan8330]

Hey Ninja ,its really good video about chrome dev tools its used for beginner especially who come for web developement domain, thank you make this vidoe ,we need to see another video on chrome dev tools on this channel ✔❤👏

[@yinonb172]

Best HTML & CSS Tutorial, explanations are greats and brights.

[@JohnnyB.Good10]

06:30 with Chrome 116 You can't edit the file without add the folder: Sources -> Filesystem -> + Add folder to workspace. and add the folder you work on. now you can edit and save it.

[@hris8136]

it is a really good tutorial. i learnd a lot form here. Thank you for professional sharing explain Chrome Dev Tools very detail .

[@jenniferward6821]

Absolutely brilliant tutorials. Thank you from South Africa let me know if you ever want to go on safari😀😀

[@hussainbabonji4207]

thank you for explaining a lot Im porbably going to use it almost everyday in my life now

[@kensleylewis]

Ah...based on your video it appears that setting up a work-space is good for when we are starting to build a style-sheet from scratch that serves to be a template, as oppose to modifying one that already exists. Its tough to find a good video on using the modern version of workspaces in Chrome these days. Everything I'm finding is extinct like the dinosaurs. Thanks

[@alicoder9872]

What a Tutorial I watched👌👌👌👌👌🤷‍♂️🤷‍♂️

[@AngelloProduct]

noticed that google chrome's web tool is web developer friendly than the other browser web tools I used everything is set up better.

[@felixomundi1495]

Nice content you need 5 star rating.

[@NetNinja]

Thanks Felix!

[@aminmouhamed2502]

the best ninja

[@Shakeel714]

Wonderful tutorial!!

[@Szerinted10]

Omg, another fine tutorial. I'm lagging with two hours. :-(

[@Grewal0007]

wow osum video tutorial Sir.....plz keep this series continue....

[@NetNinja]

Thank you 😊

[@harshsngh07]

Nice tutorial always the best on youtube. Can you also make tutorials on React Native

[@cedric_ds]

5:54 why can't I see my img folder in Sources when using Live Server, but when using File protocol, I can? If I rename the folder to image then back to img, I can see it in Sources (Live Server), but when I then manually refresh the page, the folder is gone (the images all appear though). (The img folder appears in the Filesystem subtab, but greyed out)

[@kensleylewis]

It would be so awesome if we could write SASS in workspace new files too! Maybe someday we'll get there...

[@charlieallen8571]

at school i once used the chrome tools and my teacher got mad at me because she said i was "hacking" LOL

[@aaryan__bondekar9778]

are there any changes in our html/css file after we edit it using the chrome dev tools?

[@Palaan92]

Thank you ☺️😊💗

[@NetNinja]

You’re welcome 😊

[@housearora9618]

I have a question...how the banner is different from normal text.....

[@alilemo2134]

u r the best

[@sarmad54]

Hello Shaun, I do not see the course file for this #7 tutorial. Is this because you always add and modify the file during the video. Thanks

[@MULTICODE]

Thanks for your great content on web dev ,i will become a ninja with your course on php, please i wish to know if you are going to teach us laravel??

[@NetNinja]

Hey at some point I will be 😊😊

[@MULTICODE]

@@NetNinja thanks , very soon i will be a ninja in laravel with your help. :)

[@rafatmuizmahmud2698]

please make a tutorial in reactJs

[@G2thesecondpower]

Great information; very clear and easy to understand. My one request: Could you speak a bit slower? I had to rewind a few times to make sure I understood what you were talking about before you moved on to the next thing.

[@tom-cz2jx]

I Dont quite understand why you would want to use the developer tools to... for example change the font color.. Why wouldnt you just do It in your html file? Also if you change the color using developer tools it's just a change on your local machine? If you refresh the page its gone.

[@tanzimibthesam5861]

This is to just save time see real time output

[@tonyhoffman7278]

How do we open up the Dev tools on a Mac ninja

[@Rob_W_96]

Thanks for the vid! I have a question that's kind of hard to explain - but I'll try. I use a laptop for my code, and then an ultrawide monitor for previewing my code. When previewing, I tend to make my window take up about 2 thirds of my monitor. I'll open the developer console and set the width to what I'm working with (1440px, for example). What I've realized is that this looks totally different than if I did this on my laptop, instead of a monitor! For example, when previewing this window at 1440px wide and zoomed in at 100%, I get a height of 845px. When doing the exact same thing on my laptop I get a height of 491px. I've been designing code on my monitor that looks horrendous on most people's laptops, and I've only just realized! Does anyone know a way of working where this won't happen? I can switch to using my laptop as the preview screen, but it's a small display - so id prefer not to.

[@Lbmaniak]

Thx

[@liangtang2127]

thx!!

[@MustafaBirsoz]

[@apopictirpickalacak]

Merhaba, 1 yıl olmuş nasılsın? :)

[@MustafaBirsoz]

@@apopictirpickalacak ????

[@mobronk2485]

Heyo, I was trying to save the work in Chrome, but for whatever reason it wouldn't save. I tried making a new folder, copying and pasting into the folder, etc. I tried like 5 different things and spent like 20 mins on it just so I could follow along properly, but still no dice. Can someone help me figure this out? I feel like this is a simple thing and I am not making it happen 🥲

[@JithinmylavarapuJithinmy-ht8kk]

Faced same problem