Frontend to Backend: Tips & Tools for Learning Web Development

UI design is a relatively straightforward skillset compared to development. If you know how to make textures and style typography then you can do it for websites, mobile apps, even software. But development is a different subject broken down into many unique areas of study. Web development in particular is quite large but also rewarding as you learn to build interesting projects from scratch.

Whether you’re a designer hoping to learn development or just want to build more advanced web applications, this guide will help you find the way. I’ll be talking explicitly about development for the web covering all areas from HTML/CSS to JavaScripting and eventually backend programming.

The only thing you need is time and patience. Nobody is ever good at anything on their first try. But the ones who succeed are those who come back for a second time, and a third, and keep coming back until failure morphs into mastery.

Mastering the Frontend

Every web developer should at least understand the frontend before moving onto backend structure. Crafting an interface in the browser seems like an easy task once you learn the basics. Just keep that hubris in check and remember that some developers are paid only for frontend development – it really is an extensive topic.

This field really covers 2 main languages: HTML and CSS. These are like electricity and magnetism because they can be used separately, but they really are one unified thing. Every standards-compliant website needs HTML for structure and CSS for layout.

Backend web developers do programming for a frontend interface. This interface is created through HTML and styled with CSS. Given enough practice you’ll realize these two languages are inseparable in the field of web development.

One other piece to frontend development is scripting which I’ll cover in the next section.

For those who want to delve further into HTML/CSS I would highly recommend the following links.

• HTML & CSS Beginner’s Guide
• Shay Howe – Learn to Code HTML/CSS
• Building Webpages with HTML5
• The Best Way to Learn CSS
• Modern CSS3 and HTML5 Techniques

Basic Techniques of Scripting

JavaScript is the most popular and highly-supported language for scripting. It’s technically part of frontend development because it runs in the frontend(ie. you don’t need a web server).

Those who wish to learn backend programming can learn a lot by starting with JavaScript. It behaves like a typical programming language with variables, functions, classes, methods, and other similar features. However JS code doesn’t need to be compiled or run anywhere special other than a web browser.

You can even practice JavaScript online for free with cloud-based IDEs such as CodePen or jsFiddle.

Using JavaScript it’s possible to animate and manipulate any element on the screen. If you have no interest to manipulate website elements then just skip JS and focus on what you like.

However if you study the basics of JS and want to learn more I’d recommend jQuery. It’s the best library for advanced coding and still supports a wide range for browsers. jQuery allows developers to create plugins that run on top of the library which creates a layer of abstraction.

JS is not for everyone, but learning the basics may help you ease into backend development. If you want to get started check out these online tutorials.

• MDN JavaScript Basics
• The Best Way to Learn JavaScript
• jQuery and Ajax
• Getting Started with the Basics of jQuery

Choosing a Backend Language

The real meat & potatoes of web programming starts on the backend. Most developers prefer to specialize in either PHP, Python, or Ruby(Ruby on Rails for web).

If you have an itch for computer science then you could jump into many languages and compare the differences. But professionally it’s recommended that you become a master of one language.

Companies prefer specialists over generalists and you’ll be in much higher demand if you stay focused on a particular skillset.

Each backend language requires a different server environment so you’ll need to do some research and see what setup you like best. I can’t give a definitive answer because there isn’t one “correct” choice.

At the moment it seems like Rails is growing in popularity for its speed and support. But PHP is still more widely used because of open source scripts like WordPress(PHP/MySQL).

Your choice of language depends on preference and career trajectory. But ultimately you can only learn 1 language at a time so pick your favorite and stick with it.

Build your own Test Projects

Frontend and backend developers learn through practice. Actually so do artists, magicians, and break dancers. Every skill/talent is acquired through repetition and continual practice.

But there’s a difference between copying the same techniques vs. pushing yourself to new heights.

When practicing development you’ll learn the most by simulating real-world situations. Make up different project ideas and try to build them. Pretend that you’re working for a client and do your best to deliver the highest quality possible.

Some ideas to consider:

• Image upload & resize form
• Ajax editable user profile
• Signup form tied to a database
• Threaded comment system

You’ll be more willing to learn if you build something that interests you. With continual practice you’ll bump into the same topics again and again. At first you’ll be pretty confused, but in time each topic will become internalized and you’ll see how everything fits together.

Get into CMS Development

Once you’ve attained some knowledge of a particular language it’s worth moving into customization. Some websites offer APIs or release their source code for free.

When you have a bit of confidence you should then try to learn from others’ work. For example, it’s great to learn PHP but even more useful to learn WordPress. The entire WP script is written in PHP but it uses special functions, classes, and variables that require familiarization before anything can be customized.

If you’re looking for work it’s a good idea to study popular frameworks that may land you a job. Rails has Refinery, Python has Django, .NET has Umbraco and Orchard.

Think of CMS frameworks as training wheels for programming. Once you learn the techniques(how to ride a bike) you can start with training wheels. Then once you learn about concepts like MVC structure you might take off those training wheels and build your own system from scratch.

You can probably find dozens of tutorials related to any CMS online, but here are a few particulars that go into great detail.

• A Beginner’s Guide to Using WordPress
• Intro to Drupal: Build a Simple CMS
• An Introduction to Refinery CMS
• Ultimate Guide To Fork CMS

Practice Makes Perfect

I can offer advice, tutorials, and sample projects ’till the cows come home. But the only way to see growth for yourself is with practice.

Set aside time each day or week to practice. Have an objective in mind so you know when a project is “done”. When you bump into questions post them online. When you need to learn something new search Google. Everything you need is out there waiting – all you need to do is act.