WebPages: Looking Behind the Scene in Firefox

posted by: Mr. Bergquist 20 April 2014 No Comment

Ready to see how WebPages work?  Well we will start with a cool tool that shows you the code and details of a website as you browse it in the Firefox (click here for similar details in Chrome).  Start by watching the Video on this webpage, note: you will have to hit the play button to start the video
http://www.dontfeartheinternet.com/03-the-browser/

Similar to the instructions of the video, go to Mozilla Firefox’s “Tools” menu, go to “Web Developer” and click on “Inspector” to see all the details of WebPages.  To do this:

  1. Go to the Mozilla Firefox browser, and open this page: http://www.dontfeartheinternet.com/example/1/ by copying it and pasting it in the browser’s navigation bar at the top (where the URL for the current page appears).
  2. In the Menu items on the top, click on “Tools”, it will expand…
  3. From the pull down under “Tools” select the “Web Developer” and then click on “Inspector”
  4. Check out the pane of the window that opens up below the current webpage.  This shows you all the details of its HTML code on the left and its styling (CSS) on the right.  In the HTML pane, you can open up the different section using the triangles next to each – try it out.  You can use this tool to figure out the details of how your favorite websites are created, so you can use them yourself!
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.75 out of 5)
Loading ... Loading ...

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>