[metasean]

I run a group with almost 600 JavaScript learners. With this many people, we've been through the vast majority of self-study resources. My goto recommendation for learning HTML, CSS, & JavaScript is http://www.freecodecamp.com/ This has consistently had the best results for our learners!

It (a) assumes no knowledge coming in, (b) provides a linear progression from no knowledge to a portfolio of web applications, (c) lets you move as fast or slow as you want, (d) lets you skip lessons and topics you're already familiar with, and (e) has phenomenal online support. (EDIT: and it's free)

Once your friend has the fundamentals, I'd also suggest checking out http://flukeout.github.io/ and http://flexboxfroggy.com/ . They're fun little games to introduce lots of css and flexbox features.

[sadok]

+1 for Freecodecamp, also something that helped me a LOT was actually doing projects. Specifically, Envato Tuts+ has a lot of PSD to HTML conversion courses that helped a lot.

[dookahku]

Say I'm already a competent programmer in C++/Python. would these also work out?

[aerovistae]

I have your background and am a front-end web developer now; that being said I looked it over and it looks like it covers most of the stuff you'll want to know, judging from map (table of contents).

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.

[Can_Not]

> 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.

I whole heartedly disagree. Experienced devs consider jQuery a tool and know when to use smaller frameworks like vanillaJS or something heavier such as React/Aurelia. Also, in terms of web libraries/frameworks, 100kb is not that big.

[vonklaus]

If you have a solid fundamental understanding of programming you can jump in to most tutorials. The problem is that many tutorials assume knowledge like this, which is good in your case, but bas in others.

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.

[seivan]

Just want to point out that http://flexboxfroggy.com doesn't work properly on Safari Version 8.0.8 (10600.8.9)(Mac OS)

On a side note, is it okay just to know Flexbox, or would a requirement be that you can manage without? Without ready made grid classes as well?

[metasean]

I'd definitely recommend learning the traditional css (i.e. not flexbox) because that is what most existing sites are written in and most front-end developers know, so you're likely to need it.