What I’d Tell My Younger Self About Learning Development As A Web Designer

Posted: 25 Aug 2014 05:30 AM PDT

You understand the fundamental principles of design and you know how to build web pages with html and css. Now what? Where do you turn next to expand your design and development skills?

The last few weeks I’ve been offering advice to my younger self on how to go about learning web design. I talked about the graphic side of web design and then talked about learning html and css.

Today I want to look at what comes next. I’ll share some thoughts about learning JavaScript and then server side languages and databases. I’ll offer what I can about a few additional things I think worth learning, before finishing with some closing thoughts on this series.

Please know in advance that my expertise isn’t really in what I’ll be talking about today. It’s not that I know nothing about today’s topics, but I’m hardly an expert. I do think I know enough to help my younger self or someone like my younger self, but we can find out together.

JavaScript

At some point in your web design career, you’ll either want or need to add some behavior and interaction. You’ll want to explore what JavaScript can offer.

Everything starts with real world problems and not with the technology

Stay away from libraries like jQuery at first. Learn some basic JavaScript before jumping into a library. Learn how to do a few things like using JavaScript to modify the classes on an html element.

A library like jQuery is easier to learn and use initially, but you’ll be better off understanding the basics of the JavaScript language itself.

Once you understand the basics of the language and programming in general you can learn and use whatever library you find useful.

Libraries handle low level details that can be a pain to code. The thing with a library is the more you use it, the more dependent you are on using it again and again. The way to break that dependence is to understand the basic language. You may never want to code those low level details, but it’s good to know you can if you have to.

There are also plenty of things that can be written more simply without using a library. A library is another asset for the browser to request and you don’t always need a 50kb library to write what might be a half dozen lines of code.

I know any programming language can be scary, but JavaScript will make it easier to jump in because it compiles in the browser. That means you can see your code or changes to your code near instantly. It’ll feel more like learning html and css than learning to program.

You can pick up a book on JavaScript (I recommend JavaScript: The Definitive Guide) or find some tutorials online. If you prefer you can find some example code online, make it work on something you’re developing and then modify it to suit your needs. You don’t need to be a JavaScript expert to be a web designer, but it’s worth knowing the basics and it’s worth being able to read the code of others.

Some concepts will be common to most programming languages. Concepts like:

Programming structure
Variables
Operators (+, -, etc.)
Boolean logic (and, or, etc.)
Comparison operators ( ==, <, <=, etc.)
Conditional statements (if then else, while, for, etc.)

Most important you’ll learn how to think logically and create algorithms for accomplishing a task. Combined with the concepts above, an understanding of algorithms will apply to any programming language you later want to learn. The main thing that will change from language to language is the syntax.

It’s similar to how learning a new spoken language doesn’t affect your ability to think. Every language will help you express your thoughts. They’ll do it using different words and a specific language could even impact the thoughts you have, but in general the language is just a new syntax for expressing the same thing you could express in other languages.

Keep in mind that css can do some behavioral and interactive things. For example you can change css on hover or when an element has focus. You can also simulate click events through several techniques.

I’d look to css before JavaScript where you can, as it’s usually a performance benefit to choose the css way. Look to JavaScript when you need more control or more granular control than what css offers.

Server Side Programming and Databases

There will come another point in your web design career where you want more functionality than html, css, or even JavaScript can provide and you’ll turn to server side languages and databases.

There are several server side languages from which to choose. I made the choice by paying attention to the job listings I was looking through at the time and noticing different companies were looking for skills in different languages.

My longer term goals were to be a freelancer so I paid more attention to the skills being asked of contract workers. That path suggested php as the server side language and mysql as the database.

The language you choose will impact which database you also choose. Most languages should be able to work with most databases, but some are naturally paired. For me (and likely you) the choice will be php and mysql. Much of the web is powered by their combination.

While my guess is your choice will also be a php/mysql combination, it doesn’t have to be. Identify which languages tend to be used with which databases and pick a pair to learn. Again you aren’t limited to php and mysql, though you’ll notice the two stand behind much of the web as it exists today. You also aren’t limited to learning one pair. You can learn more combinations later.

There’s only so much detail I can suggest here as I know less about backend development than front end development, but I will tell you that a server side language is the first step toward creating templates and themes and together with a database they’re a step toward content management systems, and ecommerce solutions, and more advanced site features in general.

With databases learn how to read from and write to tables in the database. Learn how to read and write from multiple tables at once. Learn how to structure data in different, but connected and related tables. Learn how to do it all more efficiently.

At the very least develop a reading level understanding of both a server side language and a database. You’re going to run into them whether you want to or not. Being able to understand what the code is doing is a valuable thing to understand, even if you have no intention of ever modifying the code of others or writing your own code from scratch.

Servers

We’re veering even further away from my expertise when talking servers, but it’s definitely something to know about, at least a little. You can’t be a web designer or web developer without interacting with servers.

From the start you learn to use FTP to move files to and from servers. Your server and your client’s server will go down at times. Often that will mean waiting on your host to fix things, but sometimes you can fix them yourself if you have the access and knowledge.

I’ve always been on Apache servers. I’m hardly one who’ll log into the server and interact with it through the command line, but I’m thankful I can create .htaccess files that redirect URLs (my entry point into servers), block suspicious IP addresses, give directives that improve performance and so on.

You will interact with web servers so learn something about them. Understand what happens when someone sitting in their living room calls up a web page in a browser. How do the browser and server communicate?

A Few Other Things Worth Learning

As you work your way through the basics of graphic design, building sites with html and css, learning a little front end and back end programming, and top it off with some knowledge of servers, you’ll reach a point where you don’t need to ask where to go next. You’ll have enough information to feel confident about your own choice of what to learn next.

However, there are a few additional things I think every designer/developer should at least explore.

css preprocessors—to do more with css
version control—for tracking and controlling changes in your work
performance—for a better running site
security—to protect site visitors

Another good thing to do is explore 3rd party tools. For example I typically build sites on WordPress. You might choose Drupal or Joomla or something else. You might find a go to shopping cart and ecommerce solution. Base your choice in 3rd party tools on the needs of your projects.

You should also work at writing modular code. Learning to program will help you here. Even if you only want to work with html and css, you’ll find it helpful to understand the basic concepts of programming. The concepts are finding their way into the work you’ll do with html and css.

Build libraries of common patterns. Collect 3rd party tools that solve different problems. Create your own patterns and tools.

Closing Thoughts

I hope you’ve enjoyed this brief series about learning web design and development. I also hope I answered the original question that started it all. I want to leave you with a few general thoughts.

Always remember that everything starts with real world problems. Your goal in learning graphic design, html, css, etc. isn’t just to learn the technologies. You learn them to solve problems that real people have. Let that knowledge guide your learning. Learn what will help you solve real problems.

I know the feeling of getting started in this industry and I know how overwhelming it can feel when you think about all the things you need to learn. Take a deep breath and relax. Accept that it will take time and get started. You aren’t going to learn everything overnight, but the sooner you start learning, the sooner you’ll have learned what you need to know.

When you don’t know where to start with a topic, look to a book or online course that covers the basics, the fundamentals. Look for information that helps give you a sense of context. Gaining context is usually a good first step. Try to gain context through multiple sources. Don’t limit yourself to the opinions of a single source. Learn from multiple sources and use your judgement where they differ.

The most important aspects of any subject usually aren’t hard to find. You know what they are. That’s where the overwhelming feeling comes from. Jump into any of them and learn a little. Then learn a little of the next and the next. You don’t have to or want master one subject before moving on to another. All these technologies work best when they work together.

You’re going to revisit some topics again and again. You learn enough html and css to do what you need or what you’re currently interested in and then you learn a little JavaScript or PHP or how to redirect URLs in your .htaccess file. Then you come back to css and learn a little more.

With each major revisit you’ll see a topic in a new way. First with the eyes of a beginner. Then through the eyes of someone with intermediate knowledge and skills. Eventually you’ll come back to the subject as someone who’s achieved advanced success.

You improve your skills and experience and get a little better with each iteration; each revisit to the topic. Another thing that will happen with each revisit is your interest in which subtopics to learn will become clearer. It’s hard to see the finish line when you’re still standing at the starting line, but with each step the finish line is closer and clearer.

Always be learning and practicing. Try to do something new on each and every project. Experiment and explore where you can. Do so within the boundaries of the project and not just to explore.

Keep in mind that the boundaries between web design and web development are getting fuzzier all the time. Which ever side of the boundary you currently sit on, you’ll advance your career much further if you pick up something of what sits on the other side of that same boundary.

I can’t emphasize enough that starting with real problems and building context should be your first steps. With so much to learn it can be very easy to get lost in the details of the technology. You can spend too much time solving technical problems that have little real world use. Web design doesn’t begin with the technology. The technologies are tools to solve problems that real people have. Never lose that context.

Download a free sample from my book Design Fundamentals.

The post What I’d Tell My Younger Self About Learning Development As A Web Designer appeared first on Vanseo Design.