HN Explorer

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

156 points by dpapathanasiou ↗ HN
A friend is a graphic designer who specializes in print (e.g., product packaging) but wants to learn html and css to get into web design.

Which books and/or online resources would HN recommend for a person with a non-technical background?

67 comments

[ 4.2 ms ] story [ 185 ms ] thread
sergiotapia
http://htmldog.com - Hands down the best way to learn HTML and CSS. It's free!

http://htmldog.com/guides/html/beginner/gettingstarted/

He will get context on what HTML is, and how it interacts with the browser. It's much easier to internalize knowledge with this website than it is elsewhere.

dpapathanasiou
Great, thank you for the link.
EvanPlaice
w3schools.com

Keep the link as a reference but it also provides some good quizzes to learn and practice basic concepts. 8 years ago that's where I started learning HTML/CSS/PHP.

petecooper
https://www.codecademy.com/learn/web
sergiotapia
Personally I think CodeAcademy is just a bad meme. They offer cheap tutorials such as:

"To save your name type:"

   var name = "Sergio";
"Good job! Now you know what a variable is. What? I have yet to see one person learn something useful using CodeAcademy except paste what the terminal is telling them to paste. I would stay away from this site.
petecooper
>Personally I think CodeAcademy is just a bad meme.

Respectfully, OP was asking for resources related to learning HTML and CSS from a non-technical point of view. From a standing start, JavaScript is a way down the line in the web development part -- not the beginnings of HTML and CSS for web design.

Sure, Codecademy is not the be-all solution, but they're accessible enough to get started for a broad section of non-technical folks, hence my recommendation.

Edit: italics.

sergiotapia
Same problem: https://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1...

"Copy paste this to pass this lesson" - No context given, just do this to pass. That's not good learning.

mcbetz
Codecademy has hundreds of little exercises. Often, first they introduce you to a concept where you just read through the example and press Pass if you got it. After that you always have to write or correct code yourself. Pointing out at one particular exercise can not prove that the approach itself is bad.
imh
I've only just started down this path, but http://www.theodinproject.com/courses seems pretty good so far. It's more a curated, guided collection of other resources than a resource itself, but that works for me.
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.

dookahku
Say I'm already a competent programmer in C++/Python. would these also work out?
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.

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.

[deleted]
(comment deleted)
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.
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.
superplussed
My girlfriend is teaching herself to code, and her favorite resource is http://codeschool.com. I've watched pieces of some of their lessons and they definitely spend more time going over programming (or even computer science) basics, whereas codeacademy seems to skip that and just throw jquery at the students. And they have a nice mix of well-produced video content to go with some interactive repl exercises.
jxm262
I've always recommended Mozilla's Developer Network (MDN) - https://developer.mozilla.org/en-US/

It has alot of good resources and a wealth of information. As a seasoned web developer, this is still one of my go-to sites for documentation on web related stuff.

jordanlev
I think MDN can be a good reference when you want to find out details about something, but I don't think it's very helpful to newbies who don't even know what it is they're supposed to be learning.
dolguldur
Anchoring onto this, but with different requirements: Are there tightly condensed resources to learn the most important bits of HTML, CSS and plain JavaScript really fast for somebody who otherwise knows how to code and has written some HTML a long ago.

Or is it like with LaTeX that you just start and on-demand google the pieces?

jmagaro88
There is truly no substitute to just jumping into the thick of things, learning by doing, and looking up how to do things as you go along. However, I know that it's intimidating when you are starting out and don't know where to turn first. For that first kick-starter course to form some basic knowledge, I have found that http://www.lynda.com has a really wide variety of beginner tutorials to get your feet wet in many different categories.
ausjke
While not a perfect site, http://www.w3schools.com/ is my to-go place whenever I need check something. Its content might not be all fully correct, but strangely it gets to the point very efficiently for me.
jlas
Please try to support free and open resources like MDN (https://developer.mozilla.org/en-US/) and http://www.webplatform.org instead of w3schools
abustamam
I like to use both. Sometimes MDN gives an excellent technical description of something, but W3Schools tends to give a bit more examples, and lets me play with the code.

Once I know how it works, I can look at the technical description and fill in any gaps that W3S had.

vonklaus
If yo use chrome, google has released an extension called personal blocklist which allows you to create just that. You may find, as I have, that blocking w3schools allows MDN to often become the first result and things get dont much faster.
throwaway420
W3schools is arguably the best quick reference guide for experienced developers to quickly find an answer to a question like "what's that one function called and what's the argument order?", but due to its history of promoting bad code practices is probably not the most trusted resource for somebody just learning.
blisterpeanuts
I've found w3schools very useful when I forget fundamental little HTML and Javascript things.
S4M
I liked codeacademy.com for css and html. Thanks to it I managed to get a grasp of how html, styles, and css work. I was already a technical person so his/her mileage may vary.
pen2l
Here is perhaps a controversial suggestion:

don't! Just use boostrap studio ( https://bootstrapstudio.io ) or something (there exist free alternatives if you don't like paying 25 bucks) :)

seivan
I think the friend in question is trying to get a job. At that point, knowing flexbox or using grid classes might not be enough for an interview. Naturally, I'm guessing on both accounts.
jwdunne
I would do this:

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

saluki
I would recommend getting started with Head First HTML and CSS.

http://headfirstlabs.com/books/hfhtml/

It will give them a good foundation and confidence to setup a website from scratch.

http://headfirstlabs.com/books/hfhtml/

Have them purchase a domain and setup a simple shared hosting account to publish a website. Shared hosting like hostgator is good enough to start, learn the basics, use FTP (recommend, MAMP/WAMP, sublime text, filezilla).

Then they can move on to more advanced topics.

baby
Check https://thimble.mozilla.org/

Imo it is the best editor you can use to learn HTML and CSS.

mod
That's pretty cool, but I couldn't use it as it doesn't support even basic keyboard movements like Ctrl + (right arrow).
baby
this is to learn rather than building an entire project. And I really advise you to try it more as you learn.

Also, are you on OSX? I never use Ctrl + → but rather emacs shortcuts like option + f, option + b, ...

mod
I'm a professional coder, and I code in vim. I didn't expect the IDE to have vim bindings, so I didn't mention that, but I use the others in the command line or text fields in the browser, etc. Anywhere there's no vim bindings.
Theodores
Wordpress. Add theme. Change what you don't like by Googling stuff. Get site built.

There is not a lot of utility in HTML + CSS on its own, unless you want 1996 style web pages that are static.

Knowing HTML is one thing, being able to build something in Wordpress will be far more CV worthy.

jcoffland
As with any tech the best way to learn it is to use it. Work on a small project that you are interested in. Skim tutorials, other people's code and manuals to figure out how to do so.