Ask HN: Best way to learn HTML and CSS for web design?

Someone suggested bootstrap below, which I disagree with for a beginner but has a strong usecase for a programmer who needs to wrap their backend in something presentable. I would consider learning by using something like milligram or skeleton grid or even something much more opinionated like zurb foundation or bootstrap.

This is because, at least for me, most of the difficulty was around 3 things:

* modularity and structure

* actually positioning things

* terms and concepts

The browser is a processing engine which I think is in c++ or C but the point I am getting at is the big issue with onbboarding new programmers/designers is that they have a massive amount of peripheral knowledge to gain.

So, I personally liked envato http://webdesign.tutsplus.com/courses/30-days-to-learn-html-... which as a complete beginner took me 10 days. A competent programmer could probably finish in a day and get the relevenet bits, then use a grid and be pretty good.

tl;dr you can learn 90% of html/css in ~24-48 hours, that other 10% will take years.

My only gripe on the subjects covered is that they do jQuery before JavaScript. But if you're already competent, then let me just tell you jQuery is just a JavaScript library a lot of websites use instead of "pure JS" because it handles a lot of cross-browser issues and makes for a simplified/unified API. Instead of having to write one native DOM API method call for Chrome and another for IE inside an if (browser is IE) { ... }, you can just use jQuery's corresponding method and it'll do the right thing automatically. At least, that's the argument a lot of people use. That and the jQuery API just being more concise

However, jQuery is largely considered very cumbersome by more experienced devs, owing to being slow in performance and to being a large file include that slows page load times, and a lot of people try to avoid it for that reason. It's worth studying this link to see how you can do all common jQuery things with normal JS.

http://blog.garstasio.com/you-dont-need-jquery/

There's also "smaller" versions of jQuery, which provide the same/similar API without being huge, like Zepto. Zepto is 9.1kb, jQuery is 95. 95 is a lot.

So yeah, long speech on one little gripe, but I feel like it needed saying because that site is probably good for teaching most other stuff you'd need to know.

- choose a small project. Something that creates discomfort but not crippling anxiety (this will require self-awareness - too small, you won't learn much, too big, you may give up and take a confident hit).

- split the project into parts so you have a bunch of questions. 'How do I build a site in HTML/CSS?' is fairly broad. Perhaps "how do I build a header?" is too. Break it down until you either know how or you can find the answer quickly, i.e 'how do I insert an image?' or 'how do I set a width, background colour and consistent space inside the edges of a box?'

- have someone who you can call upon to answer questions or help convert what you are trying to do into a phrase that uses industry terminology for which you can find ample resources. Forums/IRC can help here - there are some jerks who will kick off about you not using google but many will be understanding if you explain you are new and still need to pick up terminology to make searching easier

- repeat the above endlessly, expanding your skills and integrating new discoveries

An interesting example of this is of someone who built 200 or so Rails projects over a year. I may have got the numbers wrong.

Good books can help get started and reading certainly helps but making the process multi-modal by reading from many sources, listening (such as videos or a local web meet), doing via projects and experiments and seeing your results will be most effective.

I don't have recommendations for books - the only thing about HTML I read in a book was a small section of a cheap internet guide that got me started when I was a kid. This wasn't required when training an apprentice but probably useful.