Newcomers to web design, don't be put off
benhowdle.im
benhowdle.im
1) Test browser compatibility. 10 years ago that meant IE and Netscape. Today there are a a lot more browsers, but luckily there are standards now and the browsers mostly stick to them. But you have to test on desktop now, on mobile, and on tablets.
2) Test page load speed. While average broadband speeds have increased considerably in the last 10 years, there are still a lot of users stuck with slow lines. And when you're on mobile, you will have slow connections even if you live in a large city. If you have a Mac, use Network Link Conditioner to test how your website performs on slow or unreliable networks.
3) Progressive Enhancement. Don't rely on Javascript, Flash, Java, HTML5 video etc. Make sure your website is usable with everything turned off. If you want to use awesome animations and videos to present your content, make sure that you provide a simple textual description as an alternative. That's important for search engines, but also for users who can't view your interactive content for whatever reason (missing plugins, slow connection, e-ink display, no speakers connected, etc.)
I have it blacklisted from goog results (similarly, experts-exchange)
Now, imagine you are a beginner, which of these two pages do you find more useful for teaching you how to use the autocomplete attribute?
[MDN] https://developer.mozilla.org/en-US/docs/HTML/Element/form
[W3S] http://www.w3schools.com/html5/att_form_autocomplete.asp
As with most things in life, pick what works best for you and shun dogma.
I also sent the following as advice to someone wanting to get into web dev:
"I was just thinking of 'easy ins' to the world of web development and a good source of information is http://news.ycombinator.com/ there's a lot of information from people who work in the world of tech startups and it's good information.
Also - if you are wanting to do php dev the key things to learn are: Software engineering techniques and practice - object oriented development and abstract patterns are key to how to think about good development. Database design and development (1st normal form, third normal form etc) Learn SQL. (SQL for dummies or similar is good for the basic commands and syntax etc.) Stackoverflow.com - it's the best source of help for software development on the internet. read books, the ones that come up again and again when people talk about learning to program:
http://www.amazon.co.uk/Code-Complete-Practical-Handbook-Con... http://www.amazon.co.uk/Mythical-Month-Essays-Software-Engin... http://www.amazon.co.uk/The-Pragmatic-Programmer-Andrew-Hunt...
also - look at github.com - that's where programmers keep their source code.
Learn about Object Oriented Programming, Design Patterns, MVC (which is a design pattern) is specifcally useful for web development.
Also - demand for javascript programmers will increase over the coming years because of things like jQuery and Ajax.
That's my starter for ten - if you are interested in a career as a web programmer.
If you want to focus more on the html/css design side you could do worse than focusing on one CMS - such as wordpress and learning it inside out - you could then offer that to clients and it's a good way to provide web sites cheaply with very little effort."
I suppose, to balance that out there are better learning resources and better OOTB tools/libraries to get people started.
And you probably shouldn't start learning with 'the cloud'. Better start with a shared host and learn the foundations than to get spoiled by Heroku's 'easy deployment' and then get hit by Leaky Abstractions.
Do I start with vanilla JS? jQuery? Backbone? Spine? Angular? Knockout? Ember? I need to make my site responsive - how do I write that from scratch? How can I test in all browsers? Should I use Bootstrap? Foundation? Skeleton? What's a CSS compiler and which should I use? LESS? Sass? Scss? Stylus? Plain CSS? Should I still use PHP? Or is Node the new thing? My friend said something about Ruby on Rails. What the hell is a grunt? What's an asset pipeline? How do I gzip/minify/concatenate/compress/compile files? On and on...
When I got into web development ~12 years ago, I don't remember having to make many choices besides HTML and CSS. After that, it was a gradual learning process as web technologies developed. It seems that beginners today have a lot more tools at their disposal, but they also have a much broader set of technologies and practices to navigate.
There is definitely an element of analysis paralysis, but on top of that, there is the dirty little secret that many web developers don’t like to talk about: you don’t need to use any of these new tools to make a decent web page. Vanilla HTML, CSS and JS work as well as they ever did.
In fact, they are significantly better in many ways, because of course they have also moved on in the past decade. The arrival of simple but effective tools like querySelector in JavaScript negates one of the main reasons we started adopting frameworks like jQuery. There are widely supported elements of CSS3 that mean we don’t have to rely on awkward image-based techniques for basic graphic effects like rounded corners any more. We have web fonts that can handle many simple cases of headings and presentation text where again image replacement techniques used to be the only viable option.
So personally, I’m not sure introducing any novice web developer to all those other tools early on is even a good idea. Everything ultimately comes down to HTML, CSS and JS on the client side, and if you understand how those work, you can already achieve a lot. With experience, you’ll find that some things become repetitive, and others would take a prohibitive amount of effort to implement even if you understand how you would do them. Then you start to understand what kinds of tools you would find useful for your projects, and you can explore what’s out there from an informed starting point and with practical goals in mind.
Without that perspective, I think there is a very real danger of putting the cart before the horse, or in this case, the tools before the results. I’ve lost count of how many blog posts I’ve read in the past year or two advocating this combination of 12 “essential” tools or that “robust, repeatable” development process. It’s remarkable how many of them are hosted on sites that take several seconds to display the home page, struggle to scroll that page up and and down once you get there, use absurdly large fonts on my desktop screen (because they’re responsive, darling[1]), have all the design and typographical sensitivity of inch-high red Vivaldi on a bright green background, and have all the usability of a 2003 e-commerce site.
[1] What do you mean I have no idea what I’m talking about and I’ve completely missed the point of responsive design? I’ve got my responsive object-oriented dynamic grid plug-in library framework right here!