30 Chrome Extensions for Web Developers

Google Chrome is a popular web browser with huge extensions library. This is a list of 30 useful extensions for web developers and designers.

1. Web Developer

The popular tool for web developers with comprehensive tools for develop website.


2. Web Developer Checklist

For web developers who wants to make sure they follow best practices. This extension allows you to very easily discover problem areas in your website.

Web Developer Checklist

3. CSS Shapes Editor

With this tool, you can create and adjust CSS Shapes values with an interactive editor overlapping the selected element.

CSS Shapes Editor

4. Responsive Web Design Tester

Nowaday, responsive web design is popular. This tool will help web designer to test website in size of smartphone, tablet or you can create custom size of devices.

Responsive Web Design Tester

5. PageSpeed Insights (by Google)

Google use page speed in web search ranking. To measure your site speed, you can use this extension created by Google. The PageSpeed Insights browser extensions allow you to evaluate the performance of your web pages and to get suggestions on how to improve them.

PageSpeed Insights (by Google)

CSS Properties Viewer Extension for Google Chrome

If you’re a web developer or web designer who working with CSS. There’s a free extension for Google Chrome that will help working with CSS easier.

CSSViewer is a simple CSS properties viewer extension for Google Chrome. When you use this tool, the CSS properties windows will show up on screen and show the detail of element on web page that was selected like the blue button in the image below.


You can download CSSViewer at no cost from the link below.

Free Tool For Create Web Prototype With Bootstrap

Bootstrap is a very popular framework for web development. Web developers and web designers use Bootstrap for their web development project sush as creating WordPress theme.

Pingendo is a free tool for protitping with Bootstrap easier. It’s a desktop application that provide useful tools for prototype website with just drag and drop.

When you start Pingendo, you can select stater templates form default empty page, landing page or participate and submit your own.


Create Pure CSS Dropdown Navigation Bar (Video Tutorial)

CSS navigation is very popular, some websites use CSS and javascript to create dropdown navigation and some just use only CSS without javascript.

In this video tutorial, you’ll learn how to create pure css dropdown navigation bar. The tutorial use only css code without javascript.

Free Online PDF Tool (Convert, Compress, Merge, Split and Unlock)

Smallpdf is a free online tool that you can use to convert, compress, merge, split and unlock pdf file.

With this tool you can convert pdf to word, excel, powerpoint and vice versa.


With this tool you can…
Compress PDF
Dramatically reduce the file size of your PDF

Convert images to PDFs exactly the way you want

Convert pages to images or extract pictures from your PDF

PDF to Word
Convert your PDFs to Word files in the best quality possible

PDF to Excel
Convert spreadsheets in PDF to editable Excel files

Convert slides in PDFs to Powerpoint presentations

Word to PDF
Convert your Word documents to PDF format

Excel to PDF
Excel spreadsheet conversion to PDF

Converting PPT presentations to PDF files

Merge PDF
Combine several PDF files into one single file

Split PDF
Create a new document from selected pages

Unlock PDF
Unlock password-protected files

Create Simple PHP Pagination (Video Tutorial)

When you select data from database and you want to divide records into multiple pages. You can do it with PHP pagination technique. In this video tutorial, you’ll learn how to create a simple PHP pagination include the ability to customise how many results are shown per page.

The tutroial suggests you should have more than 50 records in your database or you can generate fake data from this site

5 Common Mistakes in SEO (Video)

Mistake #1: No value proposition
Why would a user select my site in search result?

Mistake #2: Segmented approach
Instead approach online strategy holistically — aligned with larger business goals

and every department communicating.

Mistake #3: Time-consuming workarounds
Avoid rel=”canonical” from each component page in a series to page one.

Instead, use new rel=”next” and rel=”prev” makeup for paginated content!

Mistake #4: Caught in SEO trends
What’s the optimal keyword density for my content?
– Not a great focus, just write compelling stuff!

Mistake #5: Slow iteration

Aim to be agile.
1. Define metrics for success
2. Implement improvements
3. Measure impact
4. Create new improvement
5. Prioritize improvements based on market and personnel.


What Is Version Control (Video Tutorials)

If you’re a web developer or software developer and want to know “What is version control?” There is a step-by-step course for the complete beginner.

Learn version control with Git is a website where you can learn what is version control. There’re 3 ways to learn, ebook, video course or learn from webinar and it’s all free.

When you develop software or web application, version control is really useful. You won’t find a top programmer, web developer, or web designer who doesn’t use version control. Because it helps you produce better results and makes collaboration easy. And because it can save your life when things go wrong.

What is version control?

For more tutorials, please visit the link below.

Atom – Free Hackable Text Editor

Atom is called itself as hackable text edtor, a tool that you can customize to do anything. Atom comes with Node.js integration, modular design, composed with over 50 open source packages.

Atom is free and open source, you can download from the link below.


Google Web Designer – Free Tool For Creating Interactive HTML5

Google web designer is a free tool from Google for creating interactive websites, banners, slide presentations with interactive HTML5 based design and motion graphic that can run on any device.

You can use Google web designer to create stunning animated websites using WYSIWYG tool or you can write your own HTML and CSS code.

The tool is a free download and available for Windows, Mac and Linux.

The interface of Google web designer.

Google Web Designer

Google Web Designer

A Google Web Designer Thought Experiment

Tutorial on how to use Google web designer (Text tool demo)

For more Tutorial, please visit Google web designer tutorial channel on Youtube.