Using Inspect Element to Analyze Websites - Tutorial | Debug Your CSS Code

[@rootstechnology]

30 Coding Apprenticeships: sunny-artist-8760.ck.page/9be0e5e745 FREE Coding Curriculum: sunny-artist-8760.ck.page/4cfb088c83 Learn to code with me as your mentor: www.ROOTsTechnology.info Subscribe To My Channel: kzbin.info

[@alireza7633]

The way you prioritized the items you wanted to cover in your 10min video and how you taught them was excellent. There is no wonder why most of your videos have pure 100% upvotes. And you also look at and answer your comments. What a quality channel! Thanks, man! Subscribed right away.

[@rootstechnology]

I really appreciate that, Ali! Thank you! But, it's getting really hard to keep up with 40K subscribers tho LOL I'm glad you found the tutorial helpful! Thanks for tuning in and subscribing to my channel!

[@alireza7633]

@@rootstechnology You are welcome! We should thank you, bro. Yes, indeed, it's not easy. Keep up the valuable channel. 😉 Best wishes to you...

[@zoechristian840]

Love this. You are a really great teacher. You explain things so well. We need more instructors like you. Very clear. Thank you!

[@rootstechnology]

Appreciate it, Zoe! Glad you found these tutorials helpful! Thank you for tuning in and subscribing to my channel! Stay tuned for more tutorials!

[@ramchillarege1658]

You are a gifted teacher. I have always plundered through this, without taking the time to look at it carefully. I will come back to hear more lessons from you. Thanks!

[@rootstechnology]

Thank you, Ram! I’m glad you found my teaching style helpful! Don’t forget to come back!

[@storm_trouble]

Thank you. And thanks to all blogers in youtube who shares their knowledge.

[@rootstechnology]

You’re welcome! Glad you found the video helpful, thanks for liking and subscribing!

[@christineleko1876]

Thank you for explaining Inspect element so clearly and simply!

[@rootstechnology]

You're welcome, Christine! I'm glad you found this tutorial helpful! Check out rootstechnology.info/resources/ for a sample coding curriculum to help you on your coding journey. Thanks for tuning in and subscribing to my channel!

[@artyshmunzuk5435]

Bro, amazing video. Straight to the point and explained so clearly. Thank you!

[@rootstechnology]

Thank you! Glad you found it helpful!

[@anyastewart4565]

UX designer here. Super helpful video, thank you!

[@rootstechnology]

You’re welcome Anya!!! Thanks for tuning in and subscribing!

[@sparksays7247]

This was extremely informative! I already had an understanding of most of these concepts before this vid but all I could think was “ I wish this was how it was how these concepts were explained when I first started learning!” . .

[@rootstechnology]

Ha! I completely feel you on that, because I had to learn this on my own too through trial and error. Thanks for watching and subscribing to my channel!

[@OrangeBagzz]

I'm very new in this channel.. I'm a beginner in coding i work as a caregiver for now but i want to keep up to the system so I want to code learn and teach

[@rootstechnology]

Welcome to the channel! I’ll keep making videos so make sure to subscribe. I also have a website with free materials, so make sure to check it out rootstechnology.info/ I also teach people how to code

[@3rdSalimo]

i'm also a beginner coder and i work as a caregiver now too. best of luck on your coding journey!

[@AnimalsIsEverything]

This reminds me of Dreamweaver, you could play around with it and see what's going on. But if you use the css file to play around with it, you have to go back and forth unless you split it and it won't tell you much details about what's going on in the background. I feel like the inspecting/debugging really helps. It lets you see what could happen before you make a change.

[@rootstechnology]

Exactly! Spot on, Harry! Never used Dreamweaver but that's a great comparison! Thanks for tuning in and subscribing!

[@LeahStorm]

Thank you. This helped a lot. I got halfway to solving my problem. I now know WHAT to change, but I don't know where to find the element on the back end to edit my woocomerce button, or if i can set custom CSS to change it. Clearly, I'm new at this. :)

[@rootstechnology]

Idk much about Woocommerce, but you’re on the right track! You can check out Fiverr.com for an affordable woocommerce consultant to help you solve your issue. Good luck 🙏🏿

[@Tech-Dev]

Cheers for this.

[@rootstechnology]

Thank you!

[@josephjefferson6368]

Wonderful. You break things down so that a fifth grade can understand them, the mark of an effective teacher. joe.

[@rootstechnology]

Thank you so much for this comment Joe! I’m glad you found the tutorial helpful!

[@toobaashraf25]

I learned so much all the way until the end of this video. Thank you!

[@rootstechnology]

That's awesome, Tooba! Glad you found it helpful! Check out my website for more free resources to help you on your coding journey: rootstechnology.info/resources/

[@ripchacotacos]

Really helped me prep for a tech assessment! Thank you so much for making this!!

[@rootstechnology]

Ayyee!!! I'm glad this video helped you prep for your technical assessment, hope you did well!

[@ripchacotacos]

@@rootstechnology and I passed it!! Thanks a million 🙏

[@Flangobeast]

This guy should just change his channel to a unintentional coding ASMR channel lol. Love man! I work for IBM

[@rootstechnology]

Hi! Thanks for tuning in and subscribing to my channel! Stay tuned for more tutorials and insights!

[@EndhaChristian]

Short, but very clear explanation. Thank you so much :)

[@rootstechnology]

You’re welcome, Endha!

[@souleater0815]

OMG I learned so much in just 10 minutes! Thanks!

[@rootstechnology]

That’s good! Glad you found this helpful!

[@nickbydon5258]

Just what I was looking for! Thanks much!

[@rootstechnology]

Glad you found this helpful, Nick! Thanks for tuning in and subscribing!

[@freddyj4108]

you are an awesome instructor. Thanks

[@rootstechnology]

Thank you Freddy J! Appreciate you for tuning in and subscribing to my channel 🙏🏿

[@chessoptics]

honestly i love what coding produces but as a visual person and photographer I cant seem to sit still for long periods when attempting to watch videos that teach things like python, HTML etc. any suggestions. I love your channel by the way I just found it surfing.and trying to understand everything on the inspect tool.

[@rootstechnology]

I suggest doing interactive coding tutorials where you’re typing along as you’re learning. You can use my curriculum as a guide and do the tutorials there: rootstechnology.info/resources/

[@ElijahSule-gp6cx]

very detailed. much love man

[@rootstechnology]

Thanks for watching Elijah!

[@excel4u2]

Good Job, Very Clearly Stated.💗

[@rootstechnology]

Thanks for watching! Glad you found it helpful!

[@saeidvaygani]

Thank you so much for explaning.

[@rootstechnology]

You are welcome! Thanks for tuning in and subscribing!

[@mikegher879]

I realy like it u r Gr8 Teacher

[@rootstechnology]

Thank you! I’m glad you found the video helpful 💪🏿

[@jasminfranklin9291]

Very helpful! I need more lol. I need a walk through as I am trying to change the logo on our company's website, however, I am not the original person who created the website in the first place.

[@rootstechnology]

Hi Jasmin! Thanks for watching! Just emailed you back!

[@hananfadah]

Very well explained.Thank you so much.

[@rootstechnology]

You’re welcome! Glad you found it helpful!

[@imbatido]

Thanks buddy . Keep producing great content.

[@rootstechnology]

Thank you!!

[@sushantnaik9595]

Hey TJ super tutorial. Just wanted to know like css, it tells us which line the code is present. what about HTML code? how to find while file will contain that html or php code?

[@rootstechnology]

Hi Sushant! When you’re using the inspect element, the thing you’re inspecting IS the HTML file so you can just look at the same line in your code as the kind you’re inspecting.

[@dalilabouamama148]

this was very helpful, thank you

[@rootstechnology]

Awesome! Glad you found it helpful!

[@husnamert477]

I like this video and its meet my expactation.!

[@rootstechnology]

That’s good! Glad you found the video helpful!

[@excel4u2]

Great teaching technique. You explain the same way that I think. Thanks.

[@rootstechnology]

Oh wow, that's perfect! I'm glad my videos have been helping you learn!

[@AontheArtist]

I understand how to edit the CSS style sheet but where would I find the file path for the HTML Element?

[@rootstechnology]

Hi! I don’t fully understand this question, the file party for what HTML element? What are you trying to do? Can you paste the sample code?

[@excel4u2]

You're Great. Very understandable!

[@rootstechnology]

Thank you Lloyd! Glad you found it helpful!

[@mild5817]

Thank you so much! helped a lot!

[@rootstechnology]

That's good! Glad you found it helpful!

[@VilleRantanen-s5h]

Super helpfull tips, Thanks!

[@rootstechnology]

You’re welcome! Thanks for watching!

[@messirve2308]

Keeeeeepp making more videos

[@rootstechnology]

I will! Thank you for watching and subscribing

[@ArshdeepSingh-ex5wi]

useful video bro...keep it up!

[@rootstechnology]

Thank you, Arshdeep! Thanks for tuning in and subscribing!

[@fufad-1080]

Good

[@rootstechnology]

Hi! Thanks for tuning in and subscribing to my channel! Stay tuned for more tutorials and insights!

[@hadassahodagbu6782]

Can the inspect element be used to detect answers to questions??

[@rootstechnology]

Ha! In a way, depends on the questions. The inspect element is used to inspect, your HTML elements, so you can see how your CSS code is impacting them. Does this help?

[@hadassahodagbu6782]

@@rootstechnology Thanks so much

[@JANKTOME]

Thanks TJ. that was awesome man..

[@rootstechnology]

Glad to be of help, man! Thank you for tuning in and subscribing to my channel. Stay tuned for more tutorials and insights!

[@Dcat-h8k]

Great stuff TJ thanks for sharing!

[@rootstechnology]

Glad you appreciate it, Daoud! Thank you for tuning in and subscribing to my channel. Stay tuned for more tutorials and insights!

[@solomonfesshaye6366]

Thank you man

[@rootstechnology]

You're welcome! I'm glad it helped you!

[@meredithhurston]

Super helpful! Thank you!

[@rootstechnology]

Glad you found this helpful! To help you on your coding journey, check out the Free Resources on my website: rootstechnology.info/resources/ Thank you for tuning in and subscribing to my channel, stay tuned for more tutorials and insights!

[@JeremyAgner]

Is it possible to add a key in click element?

[@rootstechnology]

Hi! I would need more information to accurately answer this, but if you’re writing JavaScript, you can create an object with a key-value pair and use that.

[@abeni107]

It was helpful. Thank You Bro !!

[@rootstechnology]

Glad to be of help, Abenezer! Feel free to grab the sample curriculum to get you started under the "Free Resources" tab at www.ROOTsTechnology.info Also, check out my Coding Tutorials: kzbin.info/aero/PLSfWIdYZl6qcI4mKuRV4ViQyPzM38JPy7 Thanks for tuning in and subscribing to my channel!

[@gwapingz29]

Can you make condition in inspect element?

[@rootstechnology]

Hi James! No, the inspector lets you inspect HTML elements, but you can write conditionals in the console tho.

[@kronicomubiito102]

Hey iam from uganda I wish you wud give us a tutorial on how to use the Google chrome development tools like inspect to edit an existing website by copying the html n css n JavaScript files into a text editor then editing the html n css to come up with a completely different website and then how to upload that new edited website on the internet or browser to be viewed globally,,thank you please

[@rootstechnology]

Hello! I've always wanted to visit Uganda! Okay, so you basically want a video showing you how to publish a website onto the internet? I can teach you right now for free, you can use Github Pages to do it: pages.github.com/ You can check out my Git and Github tutorial to help you get started here as well: kzbin.info/www/bejne/fJaWc6ObmJ2eatU&pp=gAQBiAQB That should give you an idea of how to do it, I'll make sure to add a tutorial video in the future.

[@alinaciobotaru7030]

This is soooo useful! Thank you 👍

[@rootstechnology]

Glad you found this helpful, Alina! Thank you for tuning in and subscribing to my channel. Stay tuned for more tutorials and insights!

[@marketzillaseo]

Subscribed! good video

[@rootstechnology]

Thank you!!

[@alliswell8317]

👍❤️

[@rootstechnology]

Appreciate the support! To help you on your coding journey, check out the Free Resources on my website: rootstechnology.info/resources/ Thank you for tuning in and subscribing to my channel. Stay tuned for more tutorials and insights!

[@viniciusschutt7798]

Man you helped me a lot, thanks!

[@rootstechnology]

Glad you found this helpful, Vinicius! Thank you for tuning in and subscribing to my channel! Stay tuned for more tutorials!

[@viniciusschutt7798]

@@rootstechnology For sure I will! I'm starting layout validations now, as people said in other comments you explain things very clearly. Keep up the good work Tj, see you

[@ripchacotacos]

Thanks, again!

[@rootstechnology]

WHOAAA!! Hey, thank you so much! This warms my heart that you got so much value from this enough to send me a superthanks! I really appreciate you, wishing you continued success!

[@ripchacotacos]

And I got the job! Thanks so so much and keep doing what you're doing! Love seeing black folks doing great things.

[@jessevega2391]

What If you trying to find the person's email or password on a webpage I'm only asking because some one made a fake pocket stars of my sister and I wanna try to take it down or find email pass word

[@rootstechnology]

Hi Jesse. I don't have any experience with that, but hopefully you can find some information searching on Google. Sorry about your sister's info! Hope you get it sorted out soon.

[@jessevega2391]

@@rootstechnology you I actually just picked up on using open bullet to to access it with certain credentials and cookies only doing it for self educational purposes

[@agbajiochayi3411]

thanks man

[@rootstechnology]

You’re welcome!

[@TheGaming100]

Hey, so, I was actually looking for a guide on how to use Inspect Element in Visual Studio Code not how to use Inspect Element in a Web Browser Is there any such guide that exists? Because I have not found a single one that exists, so I am currently led to believe that there is no such guide that has ever existed.

[@rootstechnology]

Hey! There's no feature like this in VS Code because it's built into the browser. So, you can just kick off your server in VS Code and open the Inspect element in the browser, there's no plugin to do this directly inside of VS Code tho.

[@sheahmed]

Cool stuff dude !!!

[@rootstechnology]

Thanks man! And thank you for watching and subscribing

[@dahsin9812]

Thanks man

[@rootstechnology]

Glad to be of help, Dahsin! Thank you for tuning in and subscribing to my channel. Stay tuned for more tutorials and insights!

[@jonasmadu1940]

hey boss i created a new website and just one post that i want to send people to as a landing page from google(youtube Ads), after setting it up the ads started running but my money is charge and i have gotten 205 views out of 1000 impressions, but the google analytics i instuled on the website said it just 13 visiits from the ads, when i previewed the ads on youtube i noticed that people don't go to my landing page direct, but this is what shows up==> This is an intermediate preview page that confirms your click can be successfully recorded by Google. This preview page will not be seen when served live on publisher sites. Instead, a click will be recorded by our servers and then immediately redirected to the destination page. Destination URL: my website name. please how can i solve this issue sir

[@jonasmadu1940]

this statement lasts for like 1 minute before it redirect them to the landing page, please any solution to this sir?

[@rootstechnology]

Hi Jonas, I don't provide consultation on issues with ADS. You can check out fiverr.com/ to find a freelance to help you with this digital marketing issue.

[@auto-diciplime237]

I love the content, please i need you help i'm a begginer on mobile develope application and watching video on you tube bet i'm confuse need help please

[@rootstechnology]

I'm glad you're enjoying my videos! If you need individual help I'd love to have you as a student in my Coding and Career Prep Program. When you become a student I can help you. Check out www.ROOTsTechnology.info! Thanks for tuning in and subscribing to my channel!

[@auto-diciplime237]

Ok thanks

[@anil_kumar_]

Can you make a video on how to detect nbsp element?

[@rootstechnology]

Hi Anil! You'll have to use JavaScript to do that. Try Googling that question and you might find resources to help you, so Google "how to detect nbsp element"

[@anil_kumar_]

@@rootstechnology yeah i Googled but no use. I successfully detected other tags like br, strong,a,img but when it comes to nbsp it became impossible. So could you make a video on that please 🥺

[@rootstechnology]

Sure, I’ll add it to my backlog of videos ideas. Thank you for the suggestion!

[@anil_kumar_]

@@rootstechnology that would be great. Will wait for the video

[@tiefsoftwarelab]

Sounds Good to me!

[@rootstechnology]

Thank you for watching and subscribing!

[@Ghanshyam_k_p]

How to save code after changes?

[@rootstechnology]

You can't save code changes in the Inspect Element, you have to make those changes in your actual code/text editor in order for the changes to save. The purpose of the Inspect Element is to help you troubleshoot.

[@tabaraksohail7764]

Can you please tell how can i search the html like there is no search bar to search something specific in html section can you please help me?

[@rootstechnology]

Hi Edward! This is a tough situation, but I'd say the best course of action before spending money you don't have, is to check out some web development videos and see if you actually like coding, then try some free online tutorials like the ones on CodeCademy. Here's my Coding Tutorials playlist to help you get started: kzbin.info/aero/PLSfWIdYZl6qcI4mKuRV4ViQyPzM38JPy7 And, check out my website www.ROOTsTechnology.info under the "free resources" to check out the sample coding curriculum of what I teach my students, to help you on your coding journey.

[@learnmore890]

how i cant inspect the website

[@rootstechnology]

Interesting. I'm not sure what the issue is, but you can set up a video consultation is if you'd like me to help you with this: rootstechnology.info/contact/

[@MichaelBeloved]

Keep teaching ~ You do it!

[@rootstechnology]

Will do! Thank you!

[@hyllaf]

hi sir - wow. what a great teacher...are you on instagram?

[@rootstechnology]

Thank you, glad you found it helpful! Yes, you can find me here on Instagram: instagram.com/rootstechnology.info

[@hyllaf]

@@rootstechnology fantastic ...will you accept the odd question on it? im totally new - enjoyable but sometimes difficult. thanks