What Skills Do You Need to Build a Website?

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.

But First: 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.

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. Let's talk about the skills you need for both of them. 

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.

To be a successful front-end developer, you should possess the following basic skills:

1. HTML/CSS: A solid understanding of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) is crucial for front-end development. These languages are used to structure and style web content.

2. JavaScript: JavaScript is the programming language used for front-end web development. It is used to create interactive and dynamic websites and web applications.

3. Responsive Design: Responsive design is the process of designing websites that can adapt to different screen sizes and devices. A front-end developer should have a good understanding of responsive design principles and techniques.

4. Cross-Browser Compatibility: Front-end developers should be able to ensure that their code works correctly and looks consistent across all major web browsers, including Chrome, Firefox, Safari, and Internet Explorer.

5. Version Control: Version control systems, such as Git, are used to track changes to code and collaborate with other developers. Front-end developers should be proficient in using version control.

6. Web Performance Optimization: Front-end developers should have a good understanding of web performance optimization techniques, such as reducing file sizes, minimizing HTTP requests, and optimizing images.

7. Problem-Solving: As a front-end developer, you'll encounter various issues and bugs that require creative problem-solving skills. You should be able to identify problems and come up with effective solutions.

8. Communication: Front-end developers need to communicate effectively with designers, back-end developers, and other team members to ensure that the final product meets the client's requirements and is delivered on time.

Overall, front-end development is a constantly evolving field, and it is essential for developers to stay up-to-date with the latest technologies and best practices.

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.

To become a successful back-end developer, you should possess the following basic skills:

1. Programming languages: Back-end developers typically work with programming languages such as Java, Python, PHP, Ruby, or C# to create server-side applications and manage data.

2. Databases: Knowledge of databases such as MySQL, Oracle, MongoDB, or PostgreSQL is essential for back-end developers to store and manage data. You should understand how to write queries to retrieve and manipulate data from databases.

3. Web servers: Back-end developers should have knowledge of web servers such as Apache or Nginx. They should understand how to configure and manage servers and have a good understanding of server-side scripting.

4. APIs: Back-end developers should have knowledge of APIs (Application Programming Interfaces) and how to create and consume them. APIs are used to allow communication between different software systems and applications.

5. Security: Back-end developers should be familiar with security concepts and techniques to protect data and applications from cyber threats such as hacking, phishing, and malware.

6. Version control: Knowledge of version control systems such as Git is essential for back-end developers to manage code changes, collaborate with other developers, and keep track of different versions of code.

7. Testing and Debugging: Back-end developers should know how to test and debug their code to ensure that it works correctly and is free of bugs.

8. Problem-solving: Back-end developers should have strong problem-solving skills to identify and troubleshoot issues with applications.

9. Scalability: Back-end developers should be able to design applications that can handle high traffic and can scale easily as the user base grows.

In summary, becoming a back-end developer requires a solid understanding of programming languages, databases, web servers, APIs, security, version control, testing, debugging, problem-solving, and scalability. You should also be willing to continuously learn and stay updated with the latest technologies and best practices in the field.

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!