Writing

So You Want to Become a Web Designer/Developer

Note: I wrote this for both programmers and non-programmers. I wanted web developers and designers to know that someone feels their pain. They are not alone. I wanted non-programmers to see what web developer and designers have to deal with. If you are not a programmer, feel free to gloss over some of the technical terms that you’re probably not familiar with, but try to take the time to read everything else so that you can feel empathy for those who spend their days and nights dealing with all this. At the end, you should feel lucky that you don’t.

*****

“Building a website is easy,” some people will tell you. “All you need is a text editor, and you can do it from scratch, without spending a penny!” With a simple HTML layout, and the knowledge of a few basic html tags, you can create all kinds of pages. Format them with CSS and you’re good to go.

Or maybe you’ll use a content management system (CMS) like Wordpress, Drupal, or Jooomla. They’re all free, and you don’t even have to learn HTML or CSS. All of that is taken care of for you behind the scenes. You just have to follow instructions, navigate your way around menus, and, probably, install a plugin or two. Each CMS platform has its own active (and sometimes very passionate) user group that can help you out.

You might also choose to build your site with one of the billion WYSIWYG editors out there. WYSIWYG is pronounced “wiziwig,” and it stands for “What You See Is What You Get.” In such an editor, you can drag boxes and text fields around the screen, and click on buttons to get yours desired colors, fonts, alignments, etc. The editor creates the code for you. Most WYSIWIG editors will allow you to see the page as it will appear online and see the underlying code at the same time.

As you can see, there are multiple ways to create a website. Of course, if you want people to be able to actually visit your site, you’ll also have to get a domain name, something like “letsshopforbuttons.com” and a hosting service. The hosting service shouldn’t cost you too much depending on what you want to do. You should also be able to find an inexpensive domain name ($20 dollars a year or less), if you’re creative, as well as flexible, when looking for one. So much for everything being free, but hey, you’re on your way.

Let’s say that now you’ve built a site, put in online, and shown it to friends and family. Great! Congratulations! Wouldn’t it be awesome if you could build sites for other people and start making money as a web developer? Maybe you’re thinking about web development and design as a new career. After all, you’ve heard there’s good money in it. So you go for it.

Here’s what you may not know: if you decided to build your first website with a CMS like WordPress, and you want to continue building sites that way, then you’ve set yourself on a different trajectory than someone who decided to build their site from scratch, which is also a slightly different approach from someone who uses a WYSIWYG editor. You can always change your course, if you wish, but people tend to go in the direction they’re already going. We each have our own inertia.

You’ve already made some choices about where you’re going with web development, but there are more to be made. Many more. You have just entered a vast forest where every bush, tree, and shrub is an option. Also, every animal—each insect, mammal, and bird, from the beetle to the squirrel to the eagle high above—is also a choice. It’s a crowded damn forest with choices in every direction.

The reason for this is because the industry is it’s infancy. It’s still sorting itself out, and you’re in the middle of it. People are coming up with new web development ideas every day. The forest full of choices just happens to be sitting on a volcanic fault line and the ground is constantly shifting underneath. Don’t be surprised if one of the bushes or trees you chose as something to learn goes up in flames because its creators have abandoned it.

One of the choices you’ll have to make is whether you want to be a web designer, a web developer, or both. Web designers do graphics, layout, font choices, etc. Web developers do coding. In some organizations, there is a clear-cut line between the two. A web designer will envision a layout and create a Photoshop file that shows what the page will look like and what it is supposed to do. This will be passed off to the developer who takes the image and creates the actual site as envisioned by the designer.

With that said, here are some of your choices in the web design/development field:

Let’s take our forest analogy from earlier and run with it. The options listed above are the trees, shrubs, and bushes of the forest. Now let’s talk about the animals—the vast array of programming languages, tools, and concepts that you can learn to accomplish the above. I’ll list a fraction of them.

HTML – Hypertext Markup Language is the framework for modern web pages. Regardless of what else you learn, HTML is fundamental. HTML is constantly evolving. New features are being added to it, like the canvas element, for example. These features will enable HTML to perform functions that were previously only possible by using a number of other different technologies.

CSS – Cascading Style Sheets are used to format HTML, and is used to do things like center images, change font sizes, and add colors. In the old days, such formatting was often included in a web page along with the HTML, but current standards state that CSS should be separate from the HTML, providing a clear-cut line between content and presentation.

As a result, CSS is typically included in a separate style sheet, so you have to flip back and forth between your CSS, your HTML, and the actual display of your website to get things formatted correctly.

Standards for CSS, as well as HTML, are set by an organization called the World Wide Web Consortium, also know as the W3C. The W3C was formed because all the different web browsers (Opera, Safari, and Internet Explorer, to name three) were handling HTML and CSS differently, creating a major headache for developers. Of course, we all know that the perfect way to make thing work right is to have a committee or an even larger organization assigned to it. Then everything automatically gets better. (That was sarcasm.)

Getting your CSS right can become surprisingly complicated and difficult. It does not behave intuitively, and the names of CSS attributes can be deceiving. You have not really done CSS until you’ve spent hours of your life trying to get an image to re-size correctly, make several divs line up, or to simply reformat text that refuses to behave the way it should. “Wait!” you’ll find yourself saying. “How did it get to be midnight?”

Browser Compatibility – Despite the efforts of the W3C, none of the web browsers are fully compatible, and, you, as a web developer, will undoubtedly spend time compensating for this. One method that some developers use to make your CSS appear uniformly across browsers is to use a style sheet, called a CSS Reset, which does it for you.

In interviews, employers may ask you to list some major differences between how browsers handle different CSS attributes. It is ridiculous to expect you to memorize any of that. Especially when you can use sites like caniuse.com.

Internet Explorer is notoriously bad when it comes to having the latest features in comparison to the other browsers. Internet Explorer is the bane of the Web Developer’s existence.

JavaScript – JavaScript is the main programming language for making things happen on a web page. It gives you interactivity. If you click on a button and something changes on the screen, chances are, JavaScript is involved.

JavaScript is a quirky language, due in part to how quickly it was originally written, and the fact that it is loosely typed (meaning that variable types are not predefined). Again, if you’re not a programmer, it is okay if that didn’t mean a hill of beans to you.

JavaScript is thought of as a front end programming language, but JavaScript applications like NodeJs have made it possible to use JavaScript for back end functionality as well, so that JavaScript can be used as the primary language for an entire site or application. As I result of this, it is my opinion that JavaScript has a huge role to play in the future of web development. I love JavaScript. I would marry if I wasn’t already married and if it was possible. (As of this time, marriage between a man and a programming language does not fit into the legal definition of a marriage in any state.)

jQuery – jQuery is a JavaScript library. Somebody took JavaScript and wrote a bunch of functions that make JavaScript much easier and enabled JavaScript programmers to do some cool effects and animations with only a line or two of code. jQuery makes JavaScript so easy that it feels like cheating.

API’s – Everyone has an API these days. An API is an Applications Programming Interface that allows you to use certain features of another company’s larger application, like Google’s mapping API for example. Some API’s are little more than a method of data sharing, and this is often accomplished via JSON.

JSON – JSON stands for JavaScript Object Notation, which is a simple data format that was originally only for JavaScript. It is so easy to understand and use that it became a method for transferring data between a vast array of different applications.

Java – Java is the program with the cute little coffee cup icon. It is entirely different from JavaScript. The similarity in names is unfortunate because of the confusion it causes. Java is used to create web applications, but unlike JavaScript, it requires you to install a plugin. Java is also widely used for mobile apps.

PHP – PHP stands for PHP Hypertext Preprocessor. That’s right, it is an acronym that includes its own name. In the programming world, we refer to this as being recursive. Elsewhere it is referred to as being ridiculous. When you deal with a website where you have to complete a login or a registration, the odds are relatively high that you are dealing with PHP.

RDBMS and Databases – RDBMS is the acronym for Relational Database Management Systems and applies to programs like MySQL and SQL Server. These programs store all the information used to websites, like User logins, high scores, statistical data, etc.

Databases are often used in conjunction with PHP. A user enters information into a form, the data is checked using PHP, and then PHP pushes it into the database.

The tricky part about databases is extracting the information from them. This is accomplished through queries, which are, basically, logical statements. A simple query might ask the database to cough up all the data that belongs to group A and group B, or it might ask the database for database entries that only contain a specific field. However, they tend to get complex very quickly.

Responsive Design – The advent of mobile phones and tablets, has forced web designers and developers to adapt to a variety of screen sizes. This is frequently accomplished with html tags called media queries. The queries tell the browser to check the size of the user’s screen and use a different style sheet based on that size. It is your job to come up with the appropriate layouts and CSS. Your work just tripled.

Fluid Design – It would be nice if you could just do 3 layouts: one for phone, one for mobile, and one for desktop, but there are so many different screen sizes and screen resolutions out there that doesn’t cover everything. Instead, you are much better if you make your web page fluid, which means that as the window resizes, the content flows along with it to adapt from large to small or vice versa. It’s not like CSS was complicated enough to begin with.

Responsive Delivery – For a short period, between the time when computers became fast enough to handle large web graphics and video, to the time when mobile phones started accessing the Internet, web developers were allowed to get lazy and fill the screens with graphic-intensive content. Cell phones changed all that. They have much less memory than computers, so developers and designers had to get stingy with content again. The best sites actually load smaller, lower-resolution graphics for smaller screens. This is called responsive delivery, and it means that the designers have to create at least two, if not three graphics, instead of one.

Frameworks – HTML, CSS, and web programming, such as JavaScript or PHP, should be kept separate whenever possible. The Model, View, Controller (MVC) concept is similar. Web development frameworks have been created to separate projects into these three modes. It shouldn’t come as a surprise that there are other divisions of labor imposed on how programs work that include different modes or more modes. Some examples of frameworks include Rails (for Ruby), CodeIgniter, Backbone.js, and Underscore.js.

Adobe Photoshop – Photoshop is famous because of its role in making celebrities look better on the covers of magazines or maybe because your teenage son knows how to use it to create a picture of his sister’s head on a dog’s body. If you’re a web designer, it is an essential tool. If you’re a web developer, you will, at the very least, need to know someone who can use Photoshop. There’s an open source alternative called GIMP that is pretty darn good, although not as powerful.

Adobe Illustrator – Graphics, in and of themselves, create a number of problems for you to solve when working with web pages. One of the big problems with the most common graphic formats like .JPG, .BMP, .GIF, and .PNG (which are known as raster graphics) is that they don’t resize well. Start out with a graphic that’s really small, and it will become super-pixelated when you expand it.

The solution to this problem is to use vector graphics. Vector graphics are mathematically generated, so no matter how big or small you make them, they look the same. If you want to create vector graphics, your best bet by far is Adobe Illustrator. Do not expect it to be intuitive. Do not pretend that you can open it up like Photoshop and go to work manipulating images. Take a class. Watch some YouTube videos on the subject. You’ll need the help of a professional to aid you in finding the hidden menus, buttons, and features you’ll need in its unfriendly interface. And you just might need a psychiatrist to help you wrap your head around the way that vector graphics work before you can start creating them with any level of efficiency. To sum up: it’s a heavy learning curve.

There’s another caveat: check your browser for compatibility when using vector graphics, because they aren’t as widely support as vector images. Also, make sure to add $50 a month to your budget for the cost of Adobe’s Creative Cloud, which includes Photoshop, Illustrator, Flash and the full line of Adobe products.

The results are worth it, but holy crap, you have to go through a lot to get there.

Adobe Flash – This paragraph used to describe what Adobe Flash was for, but Flash just happens to be another technology that is quickly being made obsolete by new features of HTML5, CSS3, which, in conjuntion with JavaScript, can do many of the things that Flash used to do. As a result, Adobe has repurposed Flash under its new name, "Animate." If you fall in love with a technology, like many people did with Flash, don't be surprised if some day it leaves you behind with not so much as a note on the pillow.

Operating Systems – Do you know Windows, but not how to work on a Mac, or vice versa? If so, learn both. And then add Linux to your repertoire and master the command line. Why? Because no matter which one you know, someone is going to want you to know one of the other two. You’ll need to know those operating systems when using WAMP, MAMP, or LAMP. The first initials in those acronyms represent Windows, Mac, and Linux. The next three initials are for Apache, MySQL, and PHP. Apache allows you to run computer like a web server so you can program PHP web pages locally. We’ve already discussed MySQL and PHP.

SEO – Almost everyone has heard of Search Engine Optimization, but few people know what it entails. The goal of SEO is to make your web page show up at the top of the Google’s search page whenever people type in something relating to your product, service, or site. Two of the most common ways of doing this are through keywords and meta tags. The best way of doing it is making sure that your site has awesome content that makes people want to come back. If you pay someone to do SEO for your site and they never actually change anything on your site, you just got ripped off.

Visual Studio and the Rest of the Microsoft Gang – If you want to program in the languages of C#, Visual Basic, or Microsoft’s web platform, ASP.NET, then you will be programming in Microsoft’s Visual Studio. Of course, that’s all you need, more programming languages, each one with its own idiosyncrasies.

Data Structures – Data structures are exactly what they sound like, a way to organize data so that you can do the following to the data: access it, insert more data into it, delete data, sort the data, and find whatever you want in the data. Data structures include structs (or PODS), resizable arrays, lists, stacks, queues, associative arrays, trees, and graphs. Please explain each and give examples. Just kidding.

Algorithms – Algorithms are ways of solving problems. They can be simple, like a straightforward sorting algorithm, or they can be extremely complex, like Google’s algorithm for ranking websites. One of the first algorithms I ever learned was an algorithm for creating mazes. Being able to use that algorithm and see the results on the screen was one of the experiences that caused me to fall in love with programming.

GIT – GitHub.com is a place where you can backup your code and share it with others. It is an extremely valuable resource and tool, but it may take you a while to get used to the terminology of creating, pushing, and forking repositories. It’s sounds kind of rude, but it isn’t. They also have a cool mascot, the OctoCat, which is a combination of a cat and an octopus.

Does your head hurt yet? If not, then I have failed at what I am trying to do, which is to either make you proud of everything you have learned as a developer/designer, make you feel sorry for yourself as a developer/designer, or make you feel sorry for those of us who are developers and designers. Any of those will do.

Okay, so we’ve got a forest of job types, which is filled with a fantastic array of fauna (programming languages, tools, and concepts), and it is sitting on a volcanic fault line. Let’s complete the picture with the final element: the tornados that rip right through the forest, mixing everything into a whirlwind of vegetation and animal life, screaming and shrieking in mad chaotic circles. These tornadoes are a certain set of employers. Not all employers, mind you, just the ones that who are trying to hire people based on an unrealistic set of expectations. These uncomprehending employers do not care about the distinctions I made when talking about job types. If it is your desire to become a web developer/designer and to go to work for someone other than yourself, then you will probably encounter far too many of these people. Mind you, one is far too many.

You, as a prospective employee, will have learned six or seven of the subjects above and will be scrambling to cram even more knowledge into your overloaded brain without forgetting what you’ve already learned. At the same time, it will be your desperate hope that your set of skills will magically match an employer’s set of desired skills, some of which seem random or are based on the unique skill set of the first web developer they hired to work for them, which no one else should reasonably be expected to duplicate.

It can also be disheartening when you see requirements like those I’ve listed below, which make it clear that the items I’ve already listed are just the tip of the iceberg. I pulled these requirements directly from job descriptions sent to me by recruiters as well as from online job listings:

Job Requirements #1

Job Requirements 2

Job Requirements #3

Oops, wrong ad.

Here are a final few questions and answers:

Q: Can you build me a website for $100 dollars?
A: Hell no! Eat my shorts.

Q: Why don’t you think $15.00 an hour is an acceptable wage?
A: Please see all of the above.

Q: Why are you even bothering to do web design and development?
A: Because I can build some incredibly cool things. Even now, I can go back to projects I’ve built, stare at them in wonder, and say to myself, “I built that! I can’t even believe it. That is so awesome. I can’t wait to learn something else…”

© 2015-2017, Bruce A. Smith

Writing