26 ms·

Newcomers to web design, don't be put off

51 points by benhowdle89 14y ago

scottmagdalein 14y ago
Good stuff man.
jurre 14y ago
Nice read, but I would consider removing the link to w3school, they're notoriously bad and you wouldn't want to steer newcomers in that direction.
- warfangle 14y ago
  w3schools is the absolute worst reference for anything css or javascript related. It's filled with antipatterns, unclear descriptions, flat-out inaccuracies, et cetera. I have it blacklisted from goog results (similarly, experts-exchange)
  - PetitPrince 14y ago
    For reference, here's a list of what is reproached about W3Schools: http://w3fools.com http://w3fools.com .
  - hackerboos 14y ago
    Pro-tip: If you end up on an experts exchange page for whatever reason. Scroll to the very bottom to avoid signing up and to view the content you searched for.
    - warfangle 14y ago
      Thing is, stackoverflow information is generally more accurate and less stale.
- jdavis703 14y ago
  MDN (https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/) seems to be a pretty solid source when needing a reference to browser-based based web technologies.
  - jurre 14y ago
    Yeah their docs are excellent!
- fourstar 14y ago
  Everyone should be aware of http://webplatform.org http://webplatform.org. Most of the stuff from MDN is being imported to webplatform (I contributed to a doc sprint for this very purpose), and soon that will hopefully be the go-to resource guide for web developers.
- bitsoda 14y ago
  Eh, I feel like hating on W3Schools is the cool thing to do. I can't speak for their other language refs, but their HTML5 refs are pretty solid. Just today I was searching for a way to force a form to autocomplete. 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 https://developer.mozilla.org/en-US/docs/HTML/Element/form [W3S] http://www.w3schools.com/html5/att_form_autocomplete.asp http://www.w3schools.com/html5/att_form_autocomplete.asp As with most things in life, pick what works best for you and shun dogma.
sjclemmy 14y ago
I did the same; taught myself css, php, javascript and quit my FTJ last Christmas. Best thing I ever did. 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/ 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-Construction/dp/0735619670 http://www.amazon.co.uk/Code-Complete-Practical-Handbook-Con... http://www.amazon.co.uk/Mythical-Month-Essays-Software-Engineering/dp/0201835959 http://www.amazon.co.uk/Mythical-Month-Essays-Software-Engin... http://www.amazon.co.uk/The-Pragmatic-Programmer-Andrew-Hunt/dp/020161622X/ref=pd_sim_b_3 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."
jakobe 14y ago
During the last 10+ years I've tried to stay on top of all the latest trends in web design, but I realized the most important things never change: 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.)
ansgri 14y ago
You don’t want to cloud your learning 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.
nolok 14y ago
If people weren't put off ten years ago, I don't see why they should be now. Everything is easier, and we have way more and better tools for our needs. Debugging javascript in ie 6 will be hard to equal in terms of insanity (and think about html/css in ie6 before the various "hacks" were discovered)
- callmevlad 14y ago
  The fact that we have way more tools is great, but I've found that it can lead to a paradox of choice for those that are just getting started. 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.
  - Chris_Newton 14y ago
    The fact that we have way more tools is great, but I've found that it can lead to a paradox of choice for those that are just getting started. 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!
Boldewyn 14y ago
I wrote something similar as a StackOverflow answer once: http://www.manuel-strehl.de/dev/learning_html.en.html http://www.manuel-strehl.de/dev/learning_html.en.html
dorkrawk 14y ago
Though I'm sure this is a sentiment held by many as they mature in their fields, I almost feel bad for people just getting started with web development today. When I first started most web development was pretty bad. I hacked around with HTML and CSS and a little JS for mouse rollovers and that wasn't too far away from being on par with the average site out there. Now there is a much richer ecosystem of tech to use (which is awesome!) and much higher design expectations. It's a more mature field which means newcomers will need to grow up much quicker. I suppose, to balance that out there are better learning resources and better OOTB tools/libraries to get people started.

51 points by benhowdle89 14y ago

Good stuff man.

jurre 14y ago

Nice read, but I would consider removing the link to w3school, they're notoriously bad and you wouldn't want to steer newcomers in that direction.

warfangle 14y ago
w3schools is the absolute worst reference for anything css or javascript related. It's filled with antipatterns, unclear descriptions, flat-out inaccuracies, et cetera. I have it blacklisted from goog results (similarly, experts-exchange)
- PetitPrince 14y ago
  For reference, here's a list of what is reproached about W3Schools: http://w3fools.com http://w3fools.com .
- hackerboos 14y ago
  Pro-tip: If you end up on an experts exchange page for whatever reason. Scroll to the very bottom to avoid signing up and to view the content you searched for.
  - warfangle 14y ago
    Thing is, stackoverflow information is generally more accurate and less stale.
jdavis703 14y ago
MDN (https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/) seems to be a pretty solid source when needing a reference to browser-based based web technologies.
- jurre 14y ago
  Yeah their docs are excellent!
fourstar 14y ago
Everyone should be aware of http://webplatform.org http://webplatform.org. Most of the stuff from MDN is being imported to webplatform (I contributed to a doc sprint for this very purpose), and soon that will hopefully be the go-to resource guide for web developers.
bitsoda 14y ago
Eh, I feel like hating on W3Schools is the cool thing to do. I can't speak for their other language refs, but their HTML5 refs are pretty solid. Just today I was searching for a way to force a form to autocomplete. 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 https://developer.mozilla.org/en-US/docs/HTML/Element/form [W3S] http://www.w3schools.com/html5/att_form_autocomplete.asp http://www.w3schools.com/html5/att_form_autocomplete.asp As with most things in life, pick what works best for you and shun dogma.

sjclemmy 14y ago

I did the same; taught myself css, php, javascript and quit my FTJ last Christmas. Best thing I ever did. 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/ 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-Construction/dp/0735619670 http://www.amazon.co.uk/Code-Complete-Practical-Handbook-Con... http://www.amazon.co.uk/Mythical-Month-Essays-Software-Engineering/dp/0201835959 http://www.amazon.co.uk/Mythical-Month-Essays-Software-Engin... http://www.amazon.co.uk/The-Pragmatic-Programmer-Andrew-Hunt/dp/020161622X/ref=pd_sim_b_3 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."

jakobe 14y ago

During the last 10+ years I've tried to stay on top of all the latest trends in web design, but I realized the most important things never change: 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.)

ansgri 14y ago

You don’t want to cloud your learning 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.

nolok 14y ago

If people weren't put off ten years ago, I don't see why they should be now. Everything is easier, and we have way more and better tools for our needs. Debugging javascript in ie 6 will be hard to equal in terms of insanity (and think about html/css in ie6 before the various "hacks" were discovered)

callmevlad 14y ago
The fact that we have way more tools is great, but I've found that it can lead to a paradox of choice for those that are just getting started. 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.
- Chris_Newton 14y ago
  The fact that we have way more tools is great, but I've found that it can lead to a paradox of choice for those that are just getting started. 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!

Boldewyn 14y ago

I wrote something similar as a StackOverflow answer once: http://www.manuel-strehl.de/dev/learning_html.en.html http://www.manuel-strehl.de/dev/learning_html.en.html

dorkrawk 14y ago

Though I'm sure this is a sentiment held by many as they mature in their fields, I almost feel bad for people just getting started with web development today. When I first started most web development was pretty bad. I hacked around with HTML and CSS and a little JS for mouse rollovers and that wasn't too far away from being on par with the average site out there. Now there is a much richer ecosystem of tech to use (which is awesome!) and much higher design expectations. It's a more mature field which means newcomers will need to grow up much quicker. I suppose, to balance that out there are better learning resources and better OOTB tools/libraries to get people started.