Ali Jafarian
Ali Jafarian

Becoming a web designer today is a very popular (and lucrative) career. Many graphic designers choose to take the web path for a multitude of reasons – more money, more opportunities, more project variety, etc. But making the transition, or starting from scratch, is not always an easy process. This checklist covers a few of the “must have” skills and tools to get you started.

1) Photoshop

First, you’ll need to turn your ideas into designs by using graphic design software. Adobe has always produced the cream of the crop and the top 3 used for web design today are Photoshop, Illustrator, and Fireworks. All have their pros and cons, but if you had to choose one to start with [for web design] I would recommend Photoshop.

You should at least be comfortable with creating/manipulating layers, text and shape modification, the good ole’ crop tool, and applying basic layer styles. In other words, if you can’t make something look pretty and then slice ‘n’ dice it, you will have a hard time finding/keeping a good job as a web designer. And if you’re completely new to Photoshop, or want some tips, just Google whatever it is you’re trying to accomplish – ex: “web banner photoshop tutorial.”


Web designers used to get by with just their ability to design. Not anymore. If you’re not familiar with HTML/CSS you will get left in the dust, and most solid web designers today are even comfortable with HTML5/CSS3. At the end of the day, being able to code your designs goes a long way and makes you more valuable to whatever team you join. Additionally, more and more designers in our industry are inheriting front-end coding responsibilities that used to be handled by back-end developers.

The best way to get started is to just start coding. Fire up your code editor of choice (I prefer Coda), and hammer away at those divs and styles. Practice makes perfect, especially in web design. As you write more and more HMTL/CSS you’ll find what works and what doesn’t. You’ll also become faster and more comfortable turning static design comps into live web pages.

If you’re new to HTML/CSS I’ve listed a few tutorial sites below that will help you pick up the basics. The rest is up to you!

Code Academy


The New Boston

Net Tuts


*Note: these sites offer tutorials for other programming languages as well, which you may find interest in after dabbling into HTML/CSS.

3) jQuery

jQuery is hands down the most popular JavaScript library out there today, and for good reason. It allows designers to code JavaScript easier and faster. Pseudo JavaScript can be hard to pick up for a beginner designer and jQuery does a good job of providing built in methods for streamlined animations and JavaScript functionality. It’s also A LOT of fun once you start understanding it and using it on a frequent basis. Not to mention designers with jQuery experience make significantly more money than those without it =)

Learning jQuery from scratch can be tough, especially if you’re more of a designer than a coder. But fortunately for us, there are a ton of jQuery tutorials out there that make learning it a breeze. The best place to start is If offers the latest info on jQuery and plenty of examples/resources to help you use the library. Again, let Google be your guide if you get stuck or are curious on how to do something using jQuery.

4) Firebug

Firebug is a helpful little tool provided by the awesome folks over at Mozilla. It allows you to troubleshoot (or debug) HTML, CSS, and JavaScript issues in real-time, instead of constantly pushing new code and refreshing your web pages. For example, if your web page’s header looks like it’s too far down on the page you could right-click the area and “Inspect Element” to dig into the issue. Firebug will give a you variety of information including the pixel dimensions, computed CSS styles, and more. It also allows you to modify those values on the spot so you can test different things before changing your web page.

Once you start using Firebug you’ll wonder how you ever got by without it. Chrome has a similar dev toolbar that can be enabled by right-clicking and “Inspecting Element” as well. Even IE offers a developer toolbar for debugging, although I’m not a fan, and I rarely talk about IE in general 😉

5) Books

To keep up with industry trends you’ve gotta read! Books, articles, tutorials – they’re all good education to keep you sharp and competitive. I personally recommend A List Apart. They write excellent books that are great for all skill levels.


This list could go on and on, and I’m sure there’s plenty of room for debate on what to learn and what to use. This basic list has provided a lot of value in my career, and I definitely wish I would have known about them sooner than later. Furthermore, once you start playing with different tools you’ll find what you like, what makes you more efficient, and what saves you time. That’s what matters, and that’s what will help you become a better web designer.

Ali Jafarian

Ali is a father, husband and serial entrepreneur with a deep drive to create. He writes, records, codes and builds things to inspire the artist in all of us.

Did you find value here?

If so, jump on my email list to be notified of new posts.



1 thought on “Beginning Web Designer Checklist”
  1. I love your article! very interesting! I just started in the web design field and is amazing! I want to learn how to make live pages. There is tons to learn out there.

Leave a Comment

Your email address will not be published. Required fields are marked *

Latest Articles
2023 Retrospect

2023 was another amazing year! The Jafarian family chose challenge as our word for the year and we tested ourselves in new ways. We also mixed in a bit of…

View Post
Reflecting on 2 Years of Podcasting

I just passed my two year anniversary of podcasting. It’s been a journey. Here are some key reflections from being on the mic – 1. Creative Outlet First and foremost,…

View Post
Jafarian Adventure: Europe (2023)

The latest Jafarian adventure was 3 weeks in Europe. We visited 4 countries over a 23 day span including Norway, Germany, Italy and Greece. It was a full adventure with…

View Post