Web Development Using Chrome Extensions For Smart Schools!

In this post, I will introduce the readers to web development extensions tools in chrome browser, which assist in your web development. Weather it is development or practices these quick tools will help you get going in no time. And the best part is there is no complex installs and setups are involved. Everything is done inside the browser ecosystem and is best suited for school labs and introductory summer camps and boot camps.

Goto Google Chrome extension https://chrome.google.com/webstore/category/extensions, which google chromes own distribution medium for an extension. And other 3rd party extensions are not allowed to be downloaded and used since it will cause privacy and security issue. Other than chrome distributed extensions, we can run local development extensions for testing our own extensions, which are developed and later uploaded to chrome extensions website.

Without further ado let’s look at how to install chrome extensions.

The first step in order to access the google extensions, we have to log in with our Google account credentials.
Goto https://chrome.google.com/webstore/category/extensions, and selected the search bar which is located in the upper left corner.
And in the upper left corner, there is a search bar, it has the support for Google search suggestion
Now search for the extension we are looking for. Which usually displayed on the right side of the page

Web Maker:

The first and important extension we are going to look at is Web Maker. This is basically a code editor with features. And the main advantages are the ease of editing HTML, CSS, and Js on the same page using split windowed areas and save and load option for later updates and changes. The output screen is to the right by default. We can take screenshots, export our source code and also download our source code for offline integration. And the best part is that we can use this extension offline.

Features:

Fast loading, with save features
Auto code completion
Supports multi stylesheet (CSS, LESS, SASS, SCSS, Stylus) and script (JavaScript, Coffee script, Typescript, ES6) formats.
Able to run in offline mode.
Support for screenshot image and source code exporting

Color Zilla:

Color Zilla as the name suggests is primarily used for picking colors from the page. And is one of the important tool for the web development. It features a color picker, color mixer, pallet browser and CSS color gradient generator.

Features:

Clean interface, does what it says.
Does not take much space or resource.
Does not need an internet connection.

Page Ruler:

Page Ruler application is a screen pixel ruler calculator, used for calculating the width and height of a rectangular area in pixels. It’s simple and elegant interface makes it easy to be used while developing from design (Note: Design-files are given as image files, where developer uses these tools to calculate the height and width between each element). It got width and height assistive tool, where we randomly draw a rectangle grid using the tool. And with the help of the assistive tool which is small squares on the four ends of the main rectangle, we arrange the X and Y coordinate square grid for our required area.

Features:

Easy and simple interface
Assistive tool for precise placement of the grid calculation box

Chrome Web Debugger:

Chrome Web debugger is an advanced debugging tool, and it features CSS editor, various viewpoints renderer, debugging for media content and a whole bunch of other advanced tools. This tool is bundled with google chrome by default. And can be accessed by pressing F12 button or, by right-clicking and selecting inspect option.

Final thought:

Jumpstarting HTML and CSS development for a novice seems to be a lot of work, and using these tools make the workflow easier to a certain extent. Which assist us in the practicing the code and get ourselves familiar, but on longer-run and on real development an IDE is a preferred approach where certain complexities do exist. Whatever the scenario, maybe it development or practice in the school lab, the final word is Practice! Practice! Practice!