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

Поділитися
Вставка
  • Опубліковано 26 сер 2024

КОМЕНТАРІ • 144

  • @rootstechnology
    @rootstechnology  Рік тому +3

    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:
    ua-cam.com/users/rootstechnology

  • @alireza7633
    @alireza7633 2 роки тому +9

    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
      @rootstechnology  2 роки тому +3

      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
      @alireza7633 2 роки тому +1

      @@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
    @zoechristian840 3 роки тому +24

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

    • @rootstechnology
      @rootstechnology  3 роки тому +3

      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
    @ramchillarege1658 Рік тому +3

    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
      @rootstechnology  Рік тому +1

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

  • @OrangeBagzz
    @OrangeBagzz 3 роки тому +4

    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
      @rootstechnology  3 роки тому +1

      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
      @3rdSalimo 2 роки тому +1

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

  • @sparksays7247
    @sparksays7247 2 роки тому +2

    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
      @rootstechnology  2 роки тому +2

      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!

  • @LeahStorm
    @LeahStorm 10 місяців тому +1

    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
      @rootstechnology  9 місяців тому +1

      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 🙏🏿

  • @anyastewart4565
    @anyastewart4565 2 роки тому +1

    UX designer here. Super helpful video, thank you!

    • @rootstechnology
      @rootstechnology  2 роки тому +1

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

  • @christineleko1876
    @christineleko1876 2 роки тому +3

    Thank you for explaining Inspect element so clearly and simply!

    • @rootstechnology
      @rootstechnology  2 роки тому +1

      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!

  • @Flangobeast
    @Flangobeast 3 роки тому +1

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

    • @rootstechnology
      @rootstechnology  3 роки тому +1

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

  • @josephjefferson6368
    @josephjefferson6368 7 місяців тому +1

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

    • @rootstechnology
      @rootstechnology  7 місяців тому +1

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

  • @storm_trouble
    @storm_trouble 11 місяців тому +1

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

    • @rootstechnology
      @rootstechnology  11 місяців тому +1

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

  • @AnimalsIsEverything
    @AnimalsIsEverything 2 роки тому +1

    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
      @rootstechnology  Рік тому +1

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

  • @toobaashraf25
    @toobaashraf25 2 роки тому +1

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

    • @rootstechnology
      @rootstechnology  2 роки тому +1

      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/

  • @chessoptics
    @chessoptics 9 місяців тому +2

    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
      @rootstechnology  9 місяців тому +1

      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/

  • @excel4u2
    @excel4u2 4 місяці тому +1

    Good Job, Very Clearly Stated.💗

    • @rootstechnology
      @rootstechnology  4 місяці тому +1

      Thanks for watching! Glad you found it helpful!

  • @EndhaChristian
    @EndhaChristian Рік тому +1

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

  • @ElijahSule-gp6cx
    @ElijahSule-gp6cx 4 місяці тому +1

    very detailed. much love man

  • @ripchacotacos
    @ripchacotacos Рік тому +1

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

    • @rootstechnology
      @rootstechnology  Рік тому +2

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

    • @ripchacotacos
      @ripchacotacos Рік тому

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

  • @saeidvaygani9709
    @saeidvaygani9709 Рік тому +1

    Thank you so much for explaning.

    • @rootstechnology
      @rootstechnology  Рік тому +1

      You are welcome!
      Thanks for tuning in and subscribing!

  • @mikegher879
    @mikegher879 Рік тому +1

    I realy like it u r Gr8 Teacher

    • @rootstechnology
      @rootstechnology  Рік тому +1

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

  • @souleater0815
    @souleater0815 11 місяців тому +1

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

    • @rootstechnology
      @rootstechnology  11 місяців тому +1

      That’s good! Glad you found this helpful!

  • @messirve2308
    @messirve2308 3 роки тому +4

    Keeeeeepp making more videos

    • @rootstechnology
      @rootstechnology  3 роки тому +2

      I will! Thank you for watching and subscribing

  • @jasminfranklin9291
    @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
      @rootstechnology  Рік тому

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

  • @Tech-Dev
    @Tech-Dev 9 місяців тому +2

    Cheers for this.

  • @husnamert477
    @husnamert477 9 місяців тому +1

    I like this video and its meet my expactation.!

    • @rootstechnology
      @rootstechnology  9 місяців тому +1

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

  • @freddyj4108
    @freddyj4108 Рік тому +1

    you are an awesome instructor. Thanks

    • @rootstechnology
      @rootstechnology  Рік тому +1

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

  • @nickbydon5258
    @nickbydon5258 Рік тому +1

    Just what I was looking for! Thanks much!

    • @rootstechnology
      @rootstechnology  Рік тому +1

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

  • @excel4u2
    @excel4u2 2 роки тому +1

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

    • @rootstechnology
      @rootstechnology  2 роки тому +1

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

  • @ArshdeepSingh-ex5wi
    @ArshdeepSingh-ex5wi Рік тому +1

    useful video bro...keep it up!

    • @rootstechnology
      @rootstechnology  Рік тому +1

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

  • @hananfadah
    @hananfadah Рік тому +1

    Very well explained.Thank you so much.

  • @imbatido
    @imbatido Рік тому +1

    Thanks buddy . Keep producing great content.

  • @sushantnaik9595
    @sushantnaik9595 2 роки тому +2

    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
      @rootstechnology  2 роки тому +1

      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.

  • @marketzillaseo
    @marketzillaseo Рік тому +1

    Subscribed! good video

  • @user-hr9ck6uf3g
    @user-hr9ck6uf3g 11 місяців тому +1

    Super helpfull tips, Thanks!

    • @rootstechnology
      @rootstechnology  10 місяців тому +1

      You’re welcome! Thanks for watching!

  • @excel4u2
    @excel4u2 Рік тому +1

    You're Great. Very understandable!

  • @solomonfesshaye6366
    @solomonfesshaye6366 Рік тому +1

    Thank you man

  • @AontheArtist
    @AontheArtist Рік тому +1

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

    • @rootstechnology
      @rootstechnology  Рік тому +1

      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?

  • @mild5817
    @mild5817 2 роки тому +1

    Thank you so much! helped a lot!

  • @alliswell8317
    @alliswell8317 2 роки тому +2

    👍❤️

    • @rootstechnology
      @rootstechnology  2 роки тому +2

      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!

  • @abeni107
    @abeni107 2 роки тому +1

    It was helpful. Thank You Bro !!

    • @rootstechnology
      @rootstechnology  2 роки тому +1

      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: ua-cam.com/play/PLSfWIdYZl6qcI4mKuRV4ViQyPzM38JPy7.html Thanks for tuning in and subscribing to my channel!

  • @JANKTOME
    @JANKTOME 2 роки тому +1

    Thanks TJ. that was awesome man..

    • @rootstechnology
      @rootstechnology  2 роки тому +1

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

  • @meredithhurston
    @meredithhurston 2 роки тому +1

    Super helpful! Thank you!

    • @rootstechnology
      @rootstechnology  2 роки тому +1

      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!

  • @Dcat-h8k
    @Dcat-h8k 3 роки тому +1

    Great stuff TJ thanks for sharing!

    • @rootstechnology
      @rootstechnology  3 роки тому +1

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

  • @ripchacotacos
    @ripchacotacos Рік тому +1

    Thanks, again!

    • @rootstechnology
      @rootstechnology  Рік тому +2

      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
      @ripchacotacos Рік тому

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

  • @alinaciobotaru7030
    @alinaciobotaru7030 2 роки тому +1

    This is soooo useful! Thank you 👍

    • @rootstechnology
      @rootstechnology  2 роки тому +2

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

  • @agbajiochayi3411
    @agbajiochayi3411 3 місяці тому +1

    thanks man

  • @viniciusschutt7798
    @viniciusschutt7798 3 роки тому +1

    Man you helped me a lot, thanks!

    • @rootstechnology
      @rootstechnology  3 роки тому +2

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

    • @viniciusschutt7798
      @viniciusschutt7798 3 роки тому +1

      @@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

  • @TheGaming100
    @TheGaming100 Рік тому +1

    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
      @rootstechnology  Рік тому +1

      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.

  • @kronicomubiito102
    @kronicomubiito102 Рік тому +1

    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
      @rootstechnology  Рік тому +1

      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: ua-cam.com/video/Fe3Bpec8k4s/v-deo.html&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.

  • @fufad-1080
    @fufad-1080 3 роки тому +1

    Good

    • @rootstechnology
      @rootstechnology  3 роки тому

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

  • @sheahmed
    @sheahmed 3 роки тому +1

    Cool stuff dude !!!

    • @rootstechnology
      @rootstechnology  3 роки тому

      Thanks man! And thank you for watching and subscribing

  • @user-of7mk1qu5g
    @user-of7mk1qu5g 7 місяців тому +1

    Is it possible to add a key in click element?

    • @rootstechnology
      @rootstechnology  7 місяців тому +1

      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.

  • @gwapingz29
    @gwapingz29 2 роки тому +1

    Can you make condition in inspect element?

    • @rootstechnology
      @rootstechnology  2 роки тому +1

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

  • @hadassahodagbu6782
    @hadassahodagbu6782 Рік тому +1

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

    • @rootstechnology
      @rootstechnology  Рік тому +2

      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
      @hadassahodagbu6782 Рік тому +1

      @@rootstechnology Thanks so much

  • @dahsin9812
    @dahsin9812 2 роки тому +1

    Thanks man

    • @rootstechnology
      @rootstechnology  2 роки тому +1

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

  • @jonasmadu1940
    @jonasmadu1940 3 роки тому +1

    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
      @jonasmadu1940 3 роки тому +1

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

    • @rootstechnology
      @rootstechnology  2 роки тому +1

      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.

  • @jessevega2391
    @jessevega2391 2 роки тому +1

    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
      @rootstechnology  2 роки тому +1

      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
      @jessevega2391 2 роки тому

      @@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

  • @tiefsoftwarelab
    @tiefsoftwarelab 3 роки тому +1

    Sounds Good to me!

  • @Ghanshyam_k_p
    @Ghanshyam_k_p 2 роки тому +1

    How to save code after changes?

    • @rootstechnology
      @rootstechnology  2 роки тому +2

      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.

  • @learnmore890
    @learnmore890 2 роки тому +1

    how i cant inspect the website

    • @rootstechnology
      @rootstechnology  2 роки тому +1

      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/

  • @tabaraksohail7764
    @tabaraksohail7764 2 роки тому

    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
      @rootstechnology  2 роки тому

      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: ua-cam.com/play/PLSfWIdYZl6qcI4mKuRV4ViQyPzM38JPy7.html
      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.

  • @anil_kumar_
    @anil_kumar_ Рік тому

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

    • @rootstechnology
      @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_
      @anil_kumar_ Рік тому +1

      @@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
      @rootstechnology  Рік тому +1

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

    • @anil_kumar_
      @anil_kumar_ Рік тому +1

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

  • @auto-diciplime237
    @auto-diciplime237 3 роки тому +1

    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
      @rootstechnology  3 роки тому

      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
      @auto-diciplime237 3 роки тому

      Ok thanks

  • @MichaelBeloved
    @MichaelBeloved 5 місяців тому +1

    Keep teaching ~ You do it!

  • @hyllaf
    @hyllaf Рік тому +1

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

    • @rootstechnology
      @rootstechnology  Рік тому +1

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

    • @hyllaf
      @hyllaf Рік тому

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