In graphic design, we are called on to perform all sorts of tasks. Some are artistic; others are technical. You may find yourself needing to learn web development basics. This falls on the “technical” end of the scale. For many students, this is a completely new way of thinking. Learning HTML, CSS, and code-editors seems pretty far removed from the end-product (websites). It is also quite different from the “What You See Is What You Get” applications you may have experienced to this point.
Web development technically is not a part of Graphic Design, but designers work with developers. They do need to understand some of what goes on in that world. Here then are six ways learners go wrong when learning development. And, I’ll illustrate it with a minimum of code. Avoid these, and you might avoid a lot of the pain of learning this stuff.
#6: Overlooking HTML structure basics
Computers are picky. Your browser needs to understand the code you are giving it. This requires you to be precise. You will probably have to go back and check to make sure that your code follows the rules. We tend to “borrow” code here and there and paste it together into a finished page. But you need to be sure that you “close” tags and you are pasting things in the right place. Be methodical. Think about what order different elements need to be in, and what goes inside what. Use elements that make sense. You can find a very good summary semantic markup and HTML structure on HTML.com.
#5: Using inline CSS
Once you find out about the power of CSS, the last thing you want to do is format everything on the site locally. It is possible, but not practical. Work with an external style sheet and link it to all your pages. This will make editing so much easier. If you want to change the colour of all the main headings on the site, simply change one rule. This is much better than hunting through all your pages to make changes. It is more efficient and will result in a more consistent design.
#4: Using absolute paths or links
What is a site anyway? Well, it is a collection of interrelated files. When referencing those files in your code, find the shortest path to them. This will be the relative path. If you are on a page and want to put in an image located in the images folder in the same directory, write:
<img src="/images/my-image.jpg">
On the other hand, an absolute path takes you to an exact place in a network or individual computer. The problem is that you may not have control over these images. They may disappear at some point out of the blue. If you must link to external places (such as in the example below) then just know the risk. If your link is a long path within your own computer disk, something is definitely wrong.
<img src="https://i2.wp.com/pbs.twimg.com/profile_images/675021767384035329/tzxhzHS8_400x400.jpg?zoom=2&resize=400%2C400&ssl=1">
#3: Displaying distorted or pixellated images
This usually results from poor planning. Plan out your layout. Know how big your images need to be. Adjust them – proportionally. Use image editing software (like Photoshop or Affinity Photo) before adding them to your layout. Learn to optimize images manually. Yes, you can adjust sizes using CSS, but be mindful if you do.
#2: Not keeping your directory organized
O.K., this one follows on from #4. More generally, you need to keep your site files organized. Don’t just pile everything haphazardly into one folder. Don’t keep your site materials and pages all over your local drives. This will help you when linking to the various files in your code. Follow proper naming conventions for files and folders (keep them lowercase). Start as a neat-freak, and your hard work will pay off with fewer headaches later.
#1: Forgetting the <title>.
This is by far the most common mistake by beginners. It might not seem like a big one, but users need the title of the page to bookmark it. You want people to bookmark it, don’t you? It is also used by search engines to display your site in search results. You want people to find your site, don’t you?
It is easy to forget, because it is in the <head> section of your HTML document. Everyone wants to jump into building that website and making it look great in the browser window. Just make sure things are all set up there in the <head> before you get ahead of yourself!
Conclusion
So there you have it. There are many ways to go wrong when learning development. Most of the solution comes down to having the patience to plan, organize and check your work. If you can think of more examples or questions, feel free to discuss.
