Routines for Practicing your Frontend Development Skills




Let’s face it – any skillset worth acquiring takes time and lots of practice. The most fitting yet ironic way to improve is by screwing up and learning from your mistakes. While this process may not benefit the aspiring counterfeiter, mistakes are often the quickest and most resilient teaching methods. Web development is perhaps one of the best skills to learn through mistakes and repetition.

I’d like to share a few tips that you can follow for improving your own frontend dev skills. You might start with a focus on the primary languages of HTML, CSS, and JavaScript, eventually moving onto 3rd party libraries such as jQuery or Node.js. Reading guides and tutorials can only help you progress so far. At some point you’ll need to buckle down and try building some challenging ideas.

Draft Personal Projects

This is how I learned when getting started in web design years ago. Following tutorials is often the first step, but you can only go so far by reading online articles and studying books. The process of working from your imagination forces you to solve little problems in order to complete the bigger project.

For example let’s say that you’ve never created a dropdown navigation with multiple sub-menus. But for a new project idea you want to fit a 3-tier link structure into the dropdown. You’ll either need to solve this on your own or give up and come back to it later. The process never gets easier so I find it’s best to keep yourself pursuing many avenues. Never let a dead-end street put a complete stop to your journey.

New HTML5 Frontend Dev Techniques

Some issues can get tricky if you have very little experience in that area. I’ve found Stack Overflow to be an immensely helpful resource for solving complex puzzles. Just post up your existing code with a description of what you want to create. You might even try searching in Google with the phrase site:stackoverflow.com to limit results and see if others have faced the same problem before.

Structure a Basic Layout

If you’re more interested to learn generic page design consider building a few sample wireframe layouts in HTML/CSS. It might be easier to start with a library such as Bootstrap to learn the fundamentals of a grid-based layout. But these libraries may eventually be too limiting for use in every project.

bootstrap v3 homepage redesign

Bootstrap is an excellent learning tool and it has plenty of uses when you need to rapidly prototype a new project or homepage. But there are many other libraries and CSS resets that you could try instead. The process of constructing a basic layout(2col, 3col, responsive, etc.) will get you into the habit of rapidly crafting websites from a blank page.

Speed and efficiency come with mastery and you’ll only reach mastery with loads of practice. A good starting point would be to consider how existing websites are formed. Also think about how to craft floated content so the page layout works in all browsers. This is a huge part of frontend development because more users than ever before are surfing the web on their laptop, tablet, and smartphone, potentially using different web browsers on each device.

Coding Design Mockups

Here’s a fun idea which expands from the basic layout practice. Instead of building your own projects or simple wireframes, why not try coding an interface from a PSD or mockup screenshot? Thousands of designers post up their work on Dribbble and most of these designs are simply phenomenal.

If you don’t think you’re creative enough to push yourself then try coding a simple UI from any Dribbble shots or graphics you find online. Search for things like form fields, buttons, or even full website mockups. Being able to translate a graphical representation into HTML/CSS is a very handy skillset worth practicing.

dribbble freebies search results

Again this process will force you to confront new problems that you’ve never solved before. You’ll find yourself bumping into walls and learning a lot both creatively(design) and logically(development). You can also find a handful of PSD freebies which are perfect for rebuilding into HTML/CSS. PSDs give you access to all of the little icons & graphics without struggling to cut them out from a flattened JPG or PNG file.

Demo New Technologies

So I hear you’re pretty good with CSS huh tough guy? Well have you ever used SASS with Compass before? What about CSS3 keyframe animations, transitions, or transforms? Also did you ever learn how to properly clear those darn floating divs?

CSS Practice: 20 Tutorials for Improved Skills

CSS is just one concept among many others that you could choose to learn about. If you don’t wish to excel at CSS then perhaps jQuery is something you’d rather study. It certainly doesn’t matter which new methodologies catch your interest, only that you keep studying and keep pushing yourself further.

compass sass homepage layout design

Also keep in mind that it’s primarily best to study utilitarian skills – things that you can actually use in project work. If you really love CSS3 and want to try some cool 3D effects then go for it! Just remember that newer effects may not always be supported in older browsers, so there might be an issue with compatibility and graceful degradation.

A good rule of thumb to follow is when something catches your interest then give it a shot. After 10-15 minutes of research you should know if that subject is worth your time or not.

Closing

You may notice each of these tips & routines point towards one main goal: practice! The more you can familiarize yourself with a certain language the more it’ll become like second nature. Once you get nice and cosy with the fundamentals it should be much easier to break out of your comfort zone into new uncharted territory. Try out some of these techniques and feel free to share any other suggestions you might have for self-studying frontend developers.

More great frontend dev tools:

26 Open Source Tools & Scripts for Web Developers





About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top