Boost your web design skills these 6 useful Developer tools and techniques.

If you are a regular user of inbuilt Developer tools then the word indispensable may come to mind. The tools talked about in this article are those released by major browsers like Chrome and Firefox. These are tools built  right into the browser itself and are designed to help a web designer with many tasks from testing out ideas, gathering information and debugging problems in their code.


You can access web developer tools by clicking on almost any element on the page, like a link, and find out information about that item. A link, for instance, will display a panel with information about its attributes. Further information can be found about the different states like active or hover and what CSS styles are applied in these situations. 

Many front end developers will already be familiar with the idea of right clicking on an element on the page and then clicking inspect from the menu, but if you’re just getting started then getting to know core techniques listed below will help get you familiarised. 

Make edits to a web page in the Elements panel

This can be a lot of fun, click a title, or paragraph on a web page and view it’s attributes then take it one step further and right click again to see a menu of editing options. What you’re doing here is making changes to the Document Object Model (DOM), experimenting with these editing options will allow you to change the text on a page to anything you want. Don’t worry, it won’t be saved. All the same, it can be really useful just trying to work out what controls what so you can edit the correct markup in your code editor. 

Another useful feature is figuring out what division an element is positioned in, and even that elements parents, you can infect see the entire tree of where this element originate from right back to the body tag. 

Play with CSS styles

The CSS styles panel gives direct access to CSS styles
applied on the web page, from here you can make changes just the same as when working in the elements panel. Again this is really useful to try out ideas in CSS without committing to them and uploading to a live website. What’s more, if you’re happy with any experiments you make you can copy-paste the CSS directly from this panel to use in your code editor. 

Box Model

A tricky thing to work with in CSS is the box model, this is the space that is taken up by each element. The styles panel is home to where this box model of a given element is displayed with its descriptions of its margins and padding. From here you can experiment by changing those value. Do this by clicking on them and seeing how it alters the page. Normally this is used to make an element fit into the correct space. Understanding its box model values can be vital to this. 

Once you have familiarity with the essentials its time to get started with more advanced, but not necessarily difficult, techniques: 

Picking Colours

Something major browsers all have in common is the ability to change the colour of an element from the styles panel, if a colour has already been defined in the original CSS you will see a colour box that you can click on and alter the colour to your pleasing. If no colour has been defined you can define by adding style rules like color or background-color, this will then allow you to see that box and make a selection. Of course, if you know the colour code you can type it in directly. 

Move elements

Back in the elements panel, did you know that you can click and drag any element and position it anywhere in the DOM? give it a try, find a title tag, a paragraph or list on a web page, view this in the elements panel by clicking inspect, Left click the element you want to move and drag, in chrome a blue line will appear allowing you to position it anywhere in the DOM and make your decision without risking the original code. 

Checking The Console

Have you got a Javascript error? If so Console is the first place to look, clicking on the console panel will help you debug and figure out problems with your javascript in an environment often devoid of feedback.  The console is about the best place to gain feedback about your javascript code, anything incorrectly defined or not present when it ought to be will display here. 

You can even write and test out your javascript right into the console, run it and see the instant feedback of the input. 

The development tool techniques mentioned above will get you quite far with examining your layout in the browser, especially if you are new to this but these are by far not the only uses of inbuilt browser Development tools. You may be interested to know you can use them for anything from inspecting HTTP requests to debugging a CSS animation. You can even check out how your layout will work on multiple screen sizes like mobile and tablet size. It’s well worth getting familiar with browser tools on your favourite browser, the best way is to experiment and introduce them incrementally into your workflow. 

Once familiar you will soon be using the word indispensable.  

Check out these links for major browsers guides to their own tools 

Chrome –

Firefox –

Edge –

Opera –

Read more

Is it time to break out of the browser: 3 alternative ways to make use of your web development skills

For years web developers wanting to develop cool new applications for the internet have been mostly restricted to what they can build in the confines of the web browser. Developers wanting to expand their projects onto other platforms, like mobile apps, have found themselves having to learn new languages from scratch, sometime multiple languages need to be understood to reach the widest audience.


Read more

Top 100+ Resources for WordPress Tips, Tricks, and Tutorials

Updated June 30, 2013

WordPress is by far the most common blogging platform online. It powers 22% of sites on the Internet; no other content management system comes close to its widespread usage. It’s free. It’s robust. It’s highly extensible, making it a developer’s playground for plugins, so site owners can customize and tweak blogs in a thousand different ways to create a useful and unique site experiences for visitors. And WordPress is so widely used, that web hosting providers bend over backwards to offer cheap, reliable WordPress web hosting with features like “one-click WordPress install” (click the link to see WHDb’s entire list of WordPress hosts).

Read more