What Skills Do You Need to Build a Website?

Posted by Corey Smith on Apr 17, 2017 8:22:00 AM

Web Developer

I had a neighbor ask to pick my brain about what it takes to move into the web design and development field. She is starting her degree program and still has a couple of years but is wise to start working toward her career now. I was originally just going to respond to her directly but I figured I’d write a blog post because I think it might be helpful to others, too.

One thing to note: the answers I give here are based on how we do things at Tribute Media but we are a little unique… mostly in how we work with our employees. Our office is closed on Fridays and we encourage our employees to work remotely every Friday. Most agencies/companies will expect their employees to work on site but allow contractors to work wherever. There is something positive creatively about working on-site with your team that you can’t get remotely.

Oh, and a little, not-so-humble brag here.

If you run an agency or have differing opinions on some of these answers, I would love to hear your perspective.

Web Design vs Web Development

In the beginning of the internet, these two terms were synonymous… mostly because it was so technical. At that time you usually found IT companies/individuals that built websites. And most of them were ugly. It was okay because we sort of expected it.

Then, about 13 years ago we started working on Web 2.0. I’m not sure anyone really agrees totally on what Web 2.0 is, but the Wikipedia entry on the subject is mildly interesting.

There is a difference between web design and web development. Web design is usually what makes it pretty but web development is usually about making it functional. I figured I’d talk about the tools and skills required for each of these categories.

Web Design or Front-End Development

This is a big category of skills. At the minimum, you’ll need to be artistic. You might be a good illustrator, but drawing on a piece of paper as an illustrator is not generally a skill of a great front-end developer. But it certainly is helpful.

HTML & CSS

I think this is the first skill any front-end developer should learn. Well, it’s really two skills. You should understand HTML & CSS well enough that you can design a site on paper or a white board before ever putting fingers to keyboard. Start learning HTML 5 as well. Even if you aren’t fully embracing HTML 5, use as much as you can for now.

This is where 95% of your mobile responsiveness on websites come in to play. We build our websites using the Materialize CSS Framework. That helps quite a bit but doesn’t absolve you of the responsibility to learn it dead cold from scratch.

JQuery

Flash was a thing 15 years ago. 10 years ago we tried to get people to stop using Flash. It’s mostly gone away now. JQuery replaces Flash where HTML 5 is not understood or practical. Use HTML 5 and CSS Transitions where you can but JQuery adds the little pop that people expect and can simplify things quite a bit.

PHP/TWIG/ASP.NET ETC

I can’t tell you which language or shorthand language to learn well without knowing the direction you want to take your career. If you are going to work at the corporate level or with IT companies you are more likely to encounter Microsoft Server technologies so SQL/ASP.net are going to be important. If you work with an agency, you are more likely to run into open source technology like Wordpress or Drupal (we prefer Drupal for a whole host of reasons). In that case you need to learn PHP and TWIG. You won’t have to understand this as well as a back-end developer but you should understand some basics here.

Adobe Illustrator

My preferred tool is Adobe Illustrator but I also am a businessman first, developer second, designer third. When you are designing any type of line art, vector style design, this is the rockin’ way to go. Especially since you can save the files as SVG which make displaying on the web super smooth.

Adobe Photoshop

This is the go to design application. Most front-end designers use this for mock-ups but it’s not the best tool for that. Not by a long shot. This is best for creating web images and saving them as images. FYI. Google is not fond of PNG so avoid those if you can.

Mockup / Wireframing Tools

This falls in another skillset that we won’t really discuss. That is the user experience designer. I put it here because we have found that using Photoshop to create mockups is more time consuming and less effective than a tool specifically designed for this. Oh, and Adobe understands that Photoshop is the wrong tool for this job.

We use Sketch for all our wireframes and mockups. We can do them faster and make them better.

How do I know that Adobe knows that Photoshop is the wrong tool? First, they are losing a lot of market share to Sketch. Second, they are putting extensive effort into Adobe Experience Design. We aren’t far from making the shift. It’s still in beta so we aren’t in a huge hurry. I haven’t found great Windows tools but if you design on a Windows machine, post a comment for the tool you prefer.

Web Development or Back-end Development

This category requires much less creative skill as your job will usually be to take the designs from a web designer and implement them. Usually a rock start at one will be okay at the other.

Your focus here will be on the languages mentioned above (PHP, TWIG, etc.) as well as the markup skills (HTML & CSS) but you’ll have to get deep into them. You’ll need to create templates, integrations, API calls, etc. You’ll need to understand GIT workflows (or similar). You’ll have to figure out how to make the pretty designs work. You’ll get deeper into JQuery and Javascript. You must be a miracle worker.

In addition, you’ll likely have to understand server technologies. While you might have server support to do the more technical elements, you should be able to do a fair bit on your own. You should understand how to troubleshoot a Wordpress or Drupal install on a server and know how to get the server to support it.

Other Tools

There are so many tools out there and some you’ll find useful. One skill that my neighbor is learning now is Adobe InDesign. While I think that InDesign is a great tool, it’s purpose is to create publications. Usually a web designer or web developer doesn’t have a need for this tool. In our agency, we only use InDesign when we are creating a long-form e-book or downloadable. If you are in a traditional agency, you might use it but not usually for web work.

What Did I Miss?

I’m sure I missed a few things. I based this mostly from the questions my neighbor asked me but I’m sure there are more questions that people might have. I’m also curious of what other agencies do and what’s important to them. Let me know!

Corey Smith

Written by Corey Smith

Corey Smith is the founder of Tribute Media and serves as the Digital Marketing Strategist. He is also the author of "Do It Right: A CEO's Guide to Web Strategy" and "Tweet It Right: A CEO's Guide to Twitter."

Please Leave a Comment: