A (productive) rant on learning web design. Please tolerate, you vets will at least get a laugh.

[serquhart]

This may get closed down for being off topic – here’s hoping otherwise. I’m a (noob) freelancer and the more I learn, the more I realize how inadequate my skillset is for the task of solid, standards compliant, beautiful web development and design. Maybe I should have started my own blog just to write this. Maybe. I’ve been following CSS Tricks for about a month now – invaluable resource, and I think its the only vibrant forum that may be willing to tolerate this rant. I swear it’s meant to be productive – I can’t be the only one going through this.

A little background. I had the privilege of receiving a great first freelance gig way ahead of schedule – just as I was gearing up to develop a couple of freebies to get my feet wet. Being married with a toddler and another on the way, I’m certainly not complaining about the additional income; but man have I spent countless hours trying to make this thing work. Check it out if you want. The look and feel were dictated by the client, so my influence there has been limited.

As my only programming experience is VBA in Access (did some incredible stuff with that) and a bit of Java, I went crazy with the JS & JQuery in the initial design phase. I was so excited. 50 man-hours later, I had my first personal rule as a web developer: only use Javascript when the functionality is absolutely necessary, and only after all other options have been exhausted. That thing was a mess, I would have been thrilled to spend the following six months without touching another script. This is exemplary of my many hard, fast lessons as an absolute noob developer under a deadline – from a well paying client, no less. It has been about a month now. I’m ready to crack. I ended up completely destroying that 50+ hours of work and starting from scratch.

Soooo many questions…what in the world is the difference between inline and block display? What about inline-block? Why does Microsoft hate web developers? How come so many authoritative voices on web design and development have such horrendous websites? How am I to take them seriously? Am I really supposed to rewrite an entire site for the remnant of poor souls who for whatever reason do not have javascript enabled? (I know there are valid reasons for this, just venting.) Can I really ever hope to master (yes, master) (X)HTML, CSS, the DOM, XML for its various uses, PHP, MySql, AJAX, JSON, Ruby on Rails, Javascript, Jquery….really?

WHERE’S THE DEFINITIVE MANUAL?!?!

Want to know how I got my chops so far? W3Schools. Some of you are shaking your heads. I am too. But for what it’s worth, who can recommend a more straightforward resource? If I really want to understand web development literally from the ground up, where can I get that? I did find an excellent resource that I cannot wait to tear into, but even that was written in 2008. There has to be a current, comprehensive resource somewhere whether on paper or the web – and I disagree with the thought that reading through reference documentation (MDN, etc) is equal to actual learning material. There’s no streamlining there, no prioritizing one referenced item over another, no feel for practicality and ‘real-life development’.

My question: how do you guys learn this stuff? Are CSS Tricks (awesome, but no replacement for actual training) and Stackoverflow (and all the others) really it? I even understand that universities aren’t all that reliable in this area. Books, websites, whatever – any and all recommendations are highly welcomed and greatly appreciated.

Chris: if you delete this within 30 minutes of me posting it, I won’t blame you. I did check your bookshelf, and you have some great titles, half of which I’ll probably read (especially ‘Don’t Make Me Think’). But the books you recommend push thought – I need half thought, half code, completely comprehensive and ground-up for web developers. Start to finish. Again, any help would be amazing, and again-again, I can’t be the only one looking for this answer.

Thanks,
Shawn

[joshuanhibbert]

This post topic is fine for the forums, albeit a bit long

The best way to learn is by doing. The more mistakes you make the better, that’s the best way to learn. I am entirely self taught, all from experimenting, creating, and fiddling. I read the odd book here and there, keep an eye on forums, read articles of interest, but I cannot speak highly enough of actually getting your hands dirty.

I haven’t used this site (I think it is fairly new) but it looks pretty awesome for learning the basics: http://www.css-101.org/

Also, make the most of these forums. There are heaps of regulars that give awesome help/advice.

[furrball1383]

I totally agree with @sl1dr on the experimenting and fiddling end of things. I am still in the fiddling stage but anything I have learned I’ve taught myself. First I used html primer to learn html and then I went to the w3c webpage to learn css and after that it was all fiddling. If you go through chris’s videos on building a website, it really gives you a good understanding of how to plan your website and layout as well as the format for your css etc. before anyone messages about w3c being a bad resource, I didn’t know that at the time and have since learned from other pages. If you need to learn css check out the links on this page http://w3fools.com/

Now just learning the commands doesn’t necessarily mean you’ll know what to do with em so I suggest taking a look at other sites using a plugin such as web developer for firefox so you can look at how they create different effects and then ofcourse there’s always the best way to learn albeit the most time consuming which is create the design for a website and then try to create the actual website and ofcourse post on the forums if you need help with things. Other people are very willing to help explain things and to help with the coding especially if you use js fiddle to present what you’ve coded. I would still suggest the videos section first though.

[joshuanhibbert]

@furrball1383 I assume you mean W3Schools where you say W3C? W3Schools can be a great resource but you just have to be careful using it as it isn’t always correct (remember this is true of anything on the internet).

[Brightonmike]

All I can say mate is just like you I have poured blood, sweat and tears into what I do and I’ve spent a lot of time being incredibly frustrated and angry with “lack of progress”.

I spent a full year learning how to do it AFTER I graduated from University with a degree. Turned out I’d spent £20k on a degree and graduated into a recession, and the worst graduate jobs market of all time. Quite literally, NO jobs.

So I had to work my silly socks off, learning web design and development, just like you. I had to do it whilst doing shifts in Tesco and a call center. Can you imagine how demotivated, demoralised and downright crap I would feel most of the time? I’d done what I thought was necessary to get a career, but there I was, trawling through lines of code, hoping that one day it would get me a job.

It did, in the end, and I’m glad of it, but the route to it was just as difficult and frustrating as, by the sounds of it, yours currently is. All I can say is you either have the tenacity, determination, ability and desire to make it work – or you don’t.

[Larry]

It’s a daunting road to decide to walk when you first realise the mountain of learning you have to first overcome, and then keep up with :)

I suggest compartmentalising it for yourself – small chunk what you want to be able to do, make sure you understand how that chunk works, and understand that that chunk will evolve! Focus intensely on a particular aspect until you’re confident to move onto something else, otherwise you may become overwhelmed!

• Make sure you understand the direction that HTML5 is taking the internet. Introducing HTML5 (Voices That Matter) would be a good place to start – Remy is a big name in HTML5, and for good reason!
• Obtain a deep understanding of CSS and the direction it is moving. This takes a lot of practise, and getting your hands dirty, but help on advanced concepts is often not far away. CSS: The Missing Manual is an excellent place to start to wrap your head around the fundamentals like inline and block elements, positioning, and everything else that is the foundation of CSS. Chris’ site is a wealth of information for many of the tricks that few people even know about.
• PHP would most likely be the next logical step, as you’ll begin to wonder why so many developers rave about WordPress. It REALLY is amazing O.o
• Some .htaccess knowledge goes a long way, too. htaccess-guide is a very useful resource in the security, redirection, and renaming features that can be taken advantage of in a .htaccess file.

It’s also important to make your life easier:

• Thoroughly research who is going to be hosting yours and your client’s sites! Hetzner is a company based in Germany, and have incredible support and a solid history.
• Associate yourself with companies who make your life easier, and who do it well; you want to focus on development, not the nitty gritty admin! Freshbooks is an incredible online invoicing service, with an unbelievable support team. Dropbox is great for keeping all your files sync’d in the cloud, and also provides an extensive API.
• Find what is making developers’ lives easier – Zen Coding makes writing HTML and CSS (I only recently discovered :/ ) super fast and painless. I use it coupled with Notepad++ as my text editor, while my colleague prefers Emacs for its extensive options in creating macros and shortcuts.
• Use development tools that come with Chrome, Firefox, Safari, or Opera to make sure your layouts look as they should – it won’t take long before a simple *right click* and ‘inspect element’ become your best friends as you build!
• Find what Virtual Machine software best suits your needs. You will undoubtedly have a lot of IE testing, and a VM such as VirtualBox can save your life.

I find it refreshing to look back at where I have come from, and to see where I now am. With a dedication to standards, semantics, efficiency, and progress, you’ll go a long way :)

[OniLinkCR]

Books. All I can say. Read them, understand them and then go with the sites you like. I started with books, I think they are the basic foundations and all the information is in there to get you started.

Sure there are TONS of site, but that’s the problem, they are scattered here and there and you see already some users saying go here, go there, etc and you go completely on “overload mode”. With books you will have the solid foundations in there and the information you see online (scattered one) only adds up to what you already know.

The start is hard, yes, but if you know programming languages, it shouldn’t be a problem to adapt to CSS and HTML. I do think though, that perhaps your weakness would be on the creative side of things, like choosing a color scheme, mastering Photoshop and it’s effects and typography which is very hard as it’s very subjective. For that, I recommend more books and articles :p

Best of luck, I don’t think there isn’t a guy who hasn’t learned the hard way in here, and in the end, I have to remember a quote made by Ghandhi “whatever we do in life will be insignificant, but it’s very important that you do it”.

[Author]

Posts