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.

23003828671_0823051111_z

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 – https://developer.chrome.com/devtools

Firefox – https://developer.mozilla.org/en-US/docs/Tools

Edge – https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/

Opera – http://www.opera.com/dragonfly/

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.

iot

Read more

Introduction to Common Security Vulnerabilities

Website security is a crucial and should not be over looked, in this article I’d like to introduce you to some of the most common security threats and what can be done to combat them.

SQL Injection

SQL injection can happen when users provide data which is not sanitised. The attacker’s hostile data can trick the website into executing unintended commands or accessing data without proper authorization.

Read more

Getting started as a web developer

The internet is a huge part of everyday life from online banking, checking what’s on at the cinema to running an online business. it’s no wonder web development is a huge industry, but how do you get started in the first place? Is college / university the best route or going out on your own as a freelancer or working your way up as an apprentice?

Read more

Learn Programming Online, For Free: 75+ Open Courseware Collections from the Ivy League and Beyond

Do you want to grow up to be a programmer? You have a choice. You can go off to one of the best computer science colleges, or you can learn the basics now at home. Whether you can learn those programming skills for free or not is the question. So, we went on a search for the most common and the most popular programming languages to see what we could find. We learned that you can learn every computer language known to mankind online through open source projects, free online tutorials, free eBooks and wikis.

Read more