Learning to Build a Car Using Chrome's Inspect Feature

When my papa bought a new car, I got too excited. We went for a long drive and visited some religious places. Visiting temples and getting our new vehicle worshipped and blessed is a ritual in every Indian home. We were feeling in need of some snacks and on hard request, the car took a halt at a nearby restaurant. There lived Sharma uncle a long-lasting friend of papa, a garage owner. He joined us and blessed us for our bright academic records, a very Indian ritual on meeting elderly personalities!

Meanwhile, out of curiosity, I went to his shop when family members were engaged in typical weather and economic conversation. There I found Bablu Bhaiya, an assistant mechanic repairing a vintage car! I inquired about how he still manages to do so. I replied by inspecting its elements! I was having thousands of more questions and curiosity to know more. I bombarded Bablu Bhaiya with my thoughtful, weird and all type of questions. At some point, he got dumbstruck.

“Do you want to build a new car?” I heard from the back. It was Sharma uncle with my father. He explained some basic concepts and functionality of a motor car. Still, those theories were was too much for my child’s brain! He asked if I got everything, and I nodded yes. Overall, I remembered only one thing, “inspect element”.

Thank you so much for reading till here, kindly allow me 2 mins more to wrap up this introduction!

In childhood, I kept thinking about making a car by inspecting its functionalities and features. But, as you can easily guess, I couldn’t build my car.

Later, while learning the web development, I found inspect feature in chrome! I wondered if this feature works for creating a stunning website and getting inspiration for UX and UI. To my utmost surprise, it has as many features as Bablu Bhaiya might have.

Since then, I’ve been using all of inspect (Ctrl+Shift+I) features for creating my HTML-CSS projects. Believe me, it works like a charm!

Lets explore some handy features:

Inspection of elements (Ctrl+Shift+C)

Here you’ll find, what is under the hood of the website you’re surfing! The best feature of this section is, “Select an element in the page to inspect it” The cursor icon in the top left corner. Activated by click or Ctrl+Shift+C. Now, hover the cursor around the page and inspect the desired area or the page in full!

2. The Box view

When you hover over with mouse after activating active inspection, it brings boxes of different colours in life. Those boxes are nothing but graphical view of position, margin, border, padding and element space. It is a soul saver feature, you’ll need it so hard while analysing responsiveness of the website.

3. Styles

The most sought after and useful feature of this section! Styles section let you review the styling properties of an element and set you free for examining live effects on the website. This feature liberates us when we look after certain styling inspiration.

4. Edit as HTML

In the Elements section when it comes to editing come classes and its effects on the website live, there is no better option than doing this was. You’ll enjoy this feature in creating a bootstrap website.

5. Mobile View (Ctrl+Shift+M)

70% of the users are surfing the web by their smartphones. And hence, responsive and mobile-first sites are new normal! I use this feature always to see how it looks in different size of screens. There are two ways to find out the small screen responsiveness. One- set the exact height and width in the given input field, Another-adjust the size freely. Hack: you can post pictures on Instagram using this feature. Instagram thinks you’re browsing with your mobile! Hint: Reload page after activating mobile view!

6. Console

Most loved developer tool to check the effect of a particular script on the website. It is used in developing a feature as well as checking the security of the website.

7. Lighthouse

A website is nothing until it gets noticed and serves its purpose of existence! Lighthouse is a powerful feature which provides a quick and free report of your website performance in Mobile and Desktop.

There are other cool features too which make development accessible to everyone. Do you know, you can uncover the saved password by the inspect tool! Explore this feature by yourself and let me know if you find it!

Thank you for reading! Stay Safe, stay healthy!

Credits: Google Chrome Dev Tools, Instagram for hosting the pic and Hackernoon.