Demonstration: Use Google Chrome Inspect Element to Learn from the Experts

Web Developer Primer for PL/SQL


3. Demo: Use Chrome Inspect Element to Learn from the Experts


>> Patrick:  Let’s go to something like That’s the bank I deal with up here in Canada. As you can see, this is a very conservative website. But it has been put together by people who are experts at web development and these people are trying to sell you a lot of products that they’ve put a lot of time and effort on to this. You can use the web development tools to actually see how this page is constructed. 


Here we have a little menu here that says, “You are now in personal banking and business banking.” If you want to see how that’s actually built you can actually right-click on it. There’s an inspect element menu option down here. If we click on that, lo and behold, the Chrome development tool comes up. 


As you can see, it’s kind of busy. There’s lots of stuff here. There’s HTML here and Cascading Style Sheet over here. You could see here I’ve just highlighted this h2 which is the “you are now in” option. You can see that they’ve put unordered list below that to contain the list items. There’s a list item here for personal banking. 


Then over here on the right you can see how it’s actually styled. Font white bold, that has a little bit of effect. You could see that personal banking is clicking on and off if you look up here where it says “personal banking.” I can make that change here in real time. You can see the background color changing. Margin, it didn’t have any effect. Padding, you can see that has effect. 


The point is you can come into these professionally built websites and actually see how they’re constructed using these tools that we’re going to show you today. So let’s just put that down. 




So you can go to a very conservative site like this to inspect how the pros do it. I could show you something that’s kind of interesting here that I found actually on Twitter. A friend of mine actually put a link to this site up. 


You can see down here in the lower corner, Chris Ruppel has a blog and website and what not. He does all sorts of weird and wonderful stuff with Cascading Style Sheet. If you want to look at bleeding edge – I’m just going to press my right arrow key and you can see this unfolding the box model. 




This is kind of fancy stuff. This is bleeding edge stuff that is being done by somebody just with care and love. It shows you really fancy stuff. If I right-click on this, you could actually inspect this type of thing. Again, could I handle on exactly what Chris is doing here? He is sharing this on his blog. You can either go to an existing production website to get an idea of how to build things, or you can monitor things like Twitter and the various blogs to see what people are doing and find all sorts of inspiration for your own webpages.


Copyright 2017

Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!