Active Learning HTML/CSS/JS with Google Chrome

Yo Geeks,

I am going to tell you MOST effective way to learn HTML,CSS or JAVA SCRIPT with the help of one of most famous browsers GOOGLE CHROME.

Most of us just take some tutorials for learning web designing and read some e-books but it doesn’t help too much as it not so practical so I am going to tell you most helpful way to learn such web designing languages which helped me a lot.Active learning is the best way to learn web developing not everything just a bit of that.


STEP 1: Go to W3SCHOOLS and take tutorial of any of you want.

W3SCHOOLS is providing very helpful tutorials.Their “Try it Yourself Editor” is my most favorite service from them.With their “Try it Yourself” editor you can experiment with HTML, CSS, XML, JavaScript, and see the result in your browser.

So get your self learned HTML/CSS/JAVA with W3SCHOOLS and don’t be BEGINNER…  

STEP 2: Get Ready To use GOOGLE CHROME.

So if you have taken tutorials well you are ready to learn ACTIVE HTML.I call this ACTIVE because you can see your results at the spot.

  • Open desired page you want to edit like TIP TO GEEK
  • Right click on the desired section of page or anywhere in page and click on “Inspect Element”
You will see something like this…
  • You will see HTML code;double click on it and you will be able to edit it.
  • Just make your desired changes in html code and look the changes on the screen.
  • In right sidebar you can edit CSS for the entire page.Make changes and view effect.
  • Lets see an example.In the first screenshot a normal page is shown…
  • Now lets edit some lines in CSS code and see what happens.
  • I removed background by deleting all its data and added a new parameter by double clicking near “}”
  • you will see something like this and when you will write first word u will get suggestions and its TOO helpful if you don’t know commands.
  • I added “background-color” and hitted enter and then write “lightblue”
  • If you liked that change you can know that from which file that line comes from in CSS sttyle box in TOP RIGHT so you can make changes in that file and make your changes permanent.
And the result was something like this…

Go and make your own site’s design using ACTIVE HTML;make changes in css and decide what to keep and what to remove.I decided colors and designing of TIP TO GEEK using this trick…

There are so many exciting features in INSPECT ELEMENTS which you have to still discover.Find’em and become a PRO in WEB DESIGNING

And if you don’t have Google Chrome than download this Google Chrome Offline Download. You better download the latest stable version.



One thought on “Active Learning HTML/CSS/JS with Google Chrome”

Leave a Reply