Education, Tips & Tricks, Web

Top 6 problems for new web development learners

In graph­ic design, we are called on to per­form all sorts of tasks. Some are artis­tic; oth­ers are tech­ni­cal. You may find your­self need­ing to learn web devel­op­ment basics. This falls on the “tech­ni­cal” end of the scale. For many stu­dents, this is a com­plete­ly new way of think­ing. Learn­ing HTML, CSS, and code-edi­tors seems pret­ty far removed from the end-prod­uct (web­sites). It is also quite dif­fer­ent from the “What You See Is What You Get” appli­ca­tions you may have expe­ri­enced to this point.

Web devel­op­ment tech­ni­cal­ly is not a part of Graph­ic Design, but design­ers work with devel­op­ers. They do need to under­stand some of what goes on in that world. Here then are six ways learn­ers go wrong when learn­ing devel­op­ment. And, I’ll illus­trate it with a min­i­mum of code. Avoid these, and you might avoid a lot of the pain of learn­ing this stuff.

#6: Overlooking HTML structure basics

Steel frame construction
Struc­ture is impor­tant.

Com­put­ers are picky. Your brows­er needs to under­stand the code you are giv­ing it. This requires you to be pre­cise. You will prob­a­bly have to go back and check to make sure that your code fol­lows the rules. We tend to “bor­row” code here and there and paste it togeth­er into a fin­ished page. But you need to be sure that you “close” tags and you are past­ing things in the right place. Be method­i­cal. Think about what order dif­fer­ent ele­ments need to be in, and what goes inside what. Use ele­ments that make sense. You can find a very good sum­ma­ry seman­tic markup and HTML struc­ture on HTML.com.

#5: Using inline CSS

Once you find out about the pow­er of CSS, the last thing you want to do is for­mat every­thing on the site local­ly. It is pos­si­ble, but not prac­ti­cal. Work with an exter­nal style sheet and link it to all your pages. This will make edit­ing so much eas­i­er. If you want to change the colour of all the main head­ings on the site, sim­ply change one rule. This is much bet­ter than hunt­ing through all your pages to make changes. It is more effi­cient and will result in a more con­sis­tent design.

#4: Using absolute paths or links

What is a site any­way? Well, it is a col­lec­tion of inter­re­lat­ed files. When ref­er­enc­ing those files in your code, find the short­est path to them. This will be the rel­a­tive path. If you are on a page and want to put in an image locat­ed in the images fold­er in the same direc­to­ry, write:

<img src="/images/my-image.jpg">

On the oth­er hand, an absolute path takes you to an exact place in a net­work or indi­vid­ual com­put­er. The prob­lem is that you may not have con­trol over these images. They may dis­ap­pear at some point out of the blue. If you must link to exter­nal places (such as in the exam­ple below) then just know the risk. If your link is a long path with­in your own com­put­er disk, some­thing is def­i­nite­ly 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

stretched photos
Hor­ri­bly dis­tort­ed spring pho­tos.

This usu­al­ly results from poor plan­ning. Plan out your lay­out. Know how big your images need to be. Adjust them – pro­por­tion­al­ly. Use image edit­ing soft­ware (like Pho­to­shop or Affin­i­ty Pho­to) before adding them to your lay­out. Learn to opti­mize images man­u­al­ly. Yes, you can adjust sizes using CSS, but be mind­ful if you do.

#2: Not keeping your directory organized

Keep­ing orga­nized.

O.K., this one fol­lows on from #4. More gen­er­al­ly, you need to keep your site files orga­nized. Don’t just pile every­thing hap­haz­ard­ly into one fold­er. Don’t keep your site mate­ri­als and pages all over your local dri­ves. This will help you when link­ing to the var­i­ous files in your code. Fol­low prop­er nam­ing con­ven­tions for files and fold­ers (keep them low­er­case). Start as a neat-freak, and your hard work will pay off with few­er headaches lat­er.

#1: Forgetting the <title>.

Don’t for­get the title!

This is by far the most com­mon mis­take by begin­ners. It might not seem like a big one, but users need the title of the page to book­mark it. You want peo­ple to book­mark it, don’t you? It is also used by search engines to dis­play your site in search results. You want peo­ple to find your site, don’t you?

It is easy to for­get, because it is in the <head> sec­tion of your HTML doc­u­ment. Every­one wants to jump into build­ing that web­site and mak­ing it look great in the brows­er win­dow. Just make sure things are all set up there in the <head> before you get ahead of your­self!

Conclusion

So there you have it. There are many ways to go wrong when learn­ing devel­op­ment. Most of the solu­tion comes down to hav­ing the patience to plan, orga­nize and check your work. If you can think of more exam­ples or ques­tions, feel free to dis­cuss.