
Ask HN: Best way to learn HTML and CSS for web design? - dpapathanasiou
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.<p>Which books and&#x2F;or online resources would HN recommend for a person with a non-technical background?
======
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/](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/](http://flukeout.github.io/) and
[http://flexboxfroggy.com/](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?

~~~
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/](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.

------
sergiotapia
[http://htmldog.com](http://htmldog.com) \- Hands down the best way to learn
HTML and CSS. It's free!

[http://htmldog.com/guides/html/beginner/gettingstarted/](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.

------
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/](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/](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.

------
jxm262
I've always recommended Mozilla's Developer Network (MDN) -
[https://developer.mozilla.org/en-US/](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.

~~~
Excavator
There's a whole subsection dedicated to learning on MDN.

[https://developer.mozilla.org/en-US/Learn](https://developer.mozilla.org/en-
US/Learn)

------
revorad
I recommend the following:

1\. Check out Jennifer Dewalt's project 180 websites in 180 days -
[http://jenniferdewalt.com](http://jenniferdewalt.com)

2\. Free Code Camp is quite good (but the focus is more on coding rather than
design) - [http://www.freecodecamp.com](http://www.freecodecamp.com)

3\. Nathan Barry's books are great -
[http://nathanbarry.com/books](http://nathanbarry.com/books)

4\. [Plug] - I'm starting a new site for online courses and need beta testers
for some HTML and CSS courses which go from scratch to pro level. Happy to
give your friend early access for free -
[http://learnetto.com](http://learnetto.com)

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

~~~
jordanlev
You might like this one: [http://learn.shayhowe.com/html-
css/](http://learn.shayhowe.com/html-css/)

~~~
travmatt
I powered through this tutorial in two days and would highly recommend it to
anyone - I feel like as though I took quite a bit away from his teaching.

------
thomasjbradley
I teach web development in a graphic design program. You’re welcome to check
out my resources: [https://learn-the-web.algonquindesign.ca/](https://learn-
the-web.algonquindesign.ca/)

All the tutorials & videos are available there as well as the curriculum and
assignments for each week.

------
jonhmchan
Take a look at Bento. [https://www.bento.io/](https://www.bento.io/)

[https://www.bento.io/tracks/front-end](https://www.bento.io/tracks/front-end)
\- front end track

[https://www.bento.io/grid/](https://www.bento.io/grid/) \- all their tutorial
recommendations

They hand-pick some of the best free tutorials for each of the technologies
you might need (including the other ones mentioned here) and even have curated
tracks for front end.

------
mcbetz
Best book for non-technical persons: John Ducket, Web Design with HTML, CSS,
JavaScript and jQuery Set. [http://www.amazon.com/Web-Design-HTML-JavaScript-
jQuery/dp/1...](http://www.amazon.com/Web-Design-HTML-JavaScript-
jQuery/dp/1118907442/ref=sr_1_1?ie=UTF8&qid=1454777537&sr=8-1&keywords=Jon+Duckett)

Best online resource: [http://learn.shayhowe.com/](http://learn.shayhowe.com/)

~~~
n0us
Ducket is a little dated these days but it is a great intro in my opinion.

~~~
mcbetz
Agreed. It's strength is the visual presentation, not so much the technical
details.

------
superplussed
My girlfriend is teaching herself to code, and her favorite resource is
[http://codeschool.com](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.

------
AdmiralAsshat
Mid-level web student here.

I've read several HTML/CSS books and gone through half a dozen courses. I'm
comfortable with your basic HTML/CSS page, have a basic handle on Javascript
(assuming I'm not doing anything more complicated than using getElementById to
change some attributes on a click), and I can use jQuery/Bootstrap when I need
to.

Right now the biggest hump for me is figuring out how to make mobile-friendly
sites WITHOUT resorting to a framework. I feel like the vast majority of books
or e-courses right now will go the following route:

1) Teach basic HTML/CSS for barebones basic and legacy pages

2) Introduce HTML5 syntax

3) Briefly show how to do a "pure" mobile-friendly page using viewports,
flexbox, and media queries.

4) Spend fifteen minutes on the above, and then say, "But that's too much
work. So now we're gonna use Bootstrap and never do Step #3 again!"

That above has happened consistently, and it disappoints me. I can do
Bootstrap, but frankly I hate writing it. I feel like I have to go five or six
div's in deep before I'm actually writing any text that's going to be visible
to the end-user.

I'd really like to find more resources on making a mobile-friendly webpage
that doesn't rely on Javascript to resize itself. In particular, I've got a
few webpages that I built as past projects or coding exercises that I
otherwise think look fine, and I'd like to figure out how to easily retro-fit
them so that, say, the images don't stretch more than 100% of the screen width
without having to rewrite the entire page using jQuery.

Anyone have any suggested resources for building mobile-friendly pure HTML/CSS
sites?

~~~
abustamam
The only thing you really need to know is how to use media queries.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/Media_Queri...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Media_Queries/Using_media_queries)

[http://www.w3schools.com/css/css_rwd_mediaqueries.asp](http://www.w3schools.com/css/css_rwd_mediaqueries.asp)

~~~
jordanlev
It's not just about media queries... one also needs to understand the concept
of "fluid layouts" \-- that is, declaring your widths in percentages instead
of pixels. Media queries can help tweak a design to change/respond to
different screen widths, but the first step is making sure your widths are
fluid and flexible (otherwise you'd basically need separate media queries for
every single pixel from 300 to 1000).

------
d0m
For non-technical, head first html/css is great: [http://www.amazon.com/Head-
First-HTML-Elisabeth-Robson/dp/05...](http://www.amazon.com/Head-First-HTML-
Elisabeth-Robson/dp/0596159900/)

It's not always the case but for html/css, learning by doing is amazing.

------
TheAceOfHearts
One year ago I was working as a frontend engineer and although my JS skills
were good, my CSS skills were pitiful. Over the course of the year, I sat down
and implemented most of material design. Now I can take a look at basically
any mockup and wire it up.

I found it very helpful to look at how other people implemented certain
components.

------
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](http://www.lynda.com) has a really wide
variety of beginner tutorials to get your feet wet in many different
categories.

------
SerLava
Not a designer but much of my job is styling web content and working with
designers and devs. I'm paying for a couple months of "team tree house" which
has pretty good videos, little quizzes, and a wysiwyg editor so can you follow
along and code.

The videos spell things out nice and slow, sometimes a bit too slow but you
can fast forward if you already know a section.

It's meant for web designers, so I'd imagine it would work for your friend.
The site also has courses for a few web programming languages and Wordpress
etc.

Anyone else used this?

------
baby
Check [https://thimble.mozilla.org/](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.

------
jonesb6
I would just like to point out that people tend to take the most practical
approach possible when learning HTML and CSS. So they learn JQuery, Bootstrap,
Wordpress, Rails, etc. because it's the fastest way to get things done.

It is my opinion that this leaves a large gap in ones education, and so
supplemental / lower-leveled resources should be sought out if one wants to
have an "expert-level" understanding of HTML and CSS.

------
petecooper
[https://www.codecademy.com/learn/web](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...](https://www.codecademy.com/courses/web-beginner-en-
HZA3b/0/1?curriculum_id=50579fb998b470000202dc8b)

"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](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.

------
ausjke
While not a perfect site,
[http://www.w3schools.com/](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/](https://developer.mozilla.org/en-US/))
and [http://www.webplatform.org](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.

------
tremendo
A comprehensive guide, including in downloadable e-book format:
[https://frontendmasters.gitbooks.io/front-end-
handbook/conte...](https://frontendmasters.gitbooks.io/front-end-
handbook/content/index.html)

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

------
pen2l
Here is perhaps a controversial suggestion:

don't! Just use boostrap studio (
[https://bootstrapstudio.io](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.

------
fibo
See also my web Development resources list [http://g14n.info/2014/01/web-
development-resources](http://g14n.info/2014/01/web-development-resources)

------
err4nt
I graduated graphic design in 2009, I worked from 2009-2011 building Joomla
and WordPress websites for companies, then went freelance and I’ve been doing
responsive front-end web stuff for about five years now. Here’s how I got from
where you’re at to where I am now.

The web is built using three technologies: HTML, CSS, and JavaScript.
Literally every other technology that gets used with the web has to interface
to one or more of these three, so focus your learning on the foundational
technologies. If you try to learn React and Bootstrap and Flux and Grunt and
Parse and Node and SASS and everything else you’ll get worn out just trying to
get started. By learning the foundational technologies you can quickly adopt
any tool you truly need to use, but you could never keep up with all the tools
available out there.

Here are some simple rules and attitude changes I adopted in my own discipline
that resulted in rapid learning in CSS, then HTML, then JavaScript:

\- when building new projects, don’t automatically include bootstrap, or other
libraries. Only include what you need AS you need it

\- don’t look at other people’s code before trying to write your own solution
first, this helps you clarify your needs!

\- when you do look at other people’s code, NEVER copy/paste it, read and earn
and rewrite what you need

\- only ever copy/paste code you have personally written in the past

\- don’t be afraid to rewrite code at any time

\- code is expendable, and the more code you write the better you will write
code

\- avoid preprocessors and compilers, they create extra work

\- anything that can be built depending on a library can be built more
efficiently without it

 __HTML Questions for Learning: __

\- can I still do it without that containing <div> as a wrapper?

\- is there any HTML like <div style=clear:both></div> trying to solve CSS
problems using markup?

\- how could this be rewritten without using any classes at all?

\- what’s the fewest amount of tags I would need to mark up this design from
scratch?

\- what’s the most relevant or correct HTML5 tag for this ([and there are a
lot of them!)
[https://developer.mozilla.org/en/docs/Web/HTML/Element](https://developer.mozilla.org/en/docs/Web/HTML/Element)

 __CSS Questions for Learning: __

\- how could I write this CSS without using any classes at all?

\- if I remove this line, does anything break?

\- what styles can this element inherit from other CSS rules?

 __JS Questions for Learning: __

\- if jQuery does this, what regular JavaScript does jQuery use internally to
do this?

\- if jQuery didn't exist, what would the solution designed to meet my needs
look like?

And in addition to that, all I can say is that the more you do it the better
you will get! Create some basic templates and get used to creating throwaway
HTML pages to test one thing, or check something. Don’t get invested in and
finesse and polish every project or page you build or you’ll have a very
shallow level of skill and spend too much time on too few pieces.

One good habit would be to start pushing code to Github. You can view the
traffic there, so if people are viewing and using your code you can be
motivated by that.

Also, CodePen is like a social front-end coding playground. I would highly
recommend you check that out and get the habit of testing and trying things
out in the open.

The other last thing I will say is this: simplify! in 2013 my idea of a
barebones HTML page was a whole site template like this:
[https://github.com/tomhodgins/5keleton](https://github.com/tomhodgins/5keleton)

By 2015 I had it pared down to this:
[https://gist.github.com/tomhodgins/c09dd6f9485d77d14e55](https://gist.github.com/tomhodgins/c09dd6f9485d77d14e55)

But that was still so heavy it was slowing down my learning. Now when I want
to test something here’s the HTML snippet I pop into a new text file:

    
    
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset=utf-8>
          <title></title>
          <style></style>
        </head>
        <body>
          <script></script>
        </body>
        </html>
    

Only when you distill it down to the basics can you do it at the scale you
need to really experiment and learn.

 __Resources: __

\- Mozilla Developer Network for CSS:[https://developer.mozilla.org/en-
US/docs/Web/CSS/Reference](https://developer.mozilla.org/en-
US/docs/Web/CSS/Reference), and JavaScript: [https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Refe...](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference) Reference

\- HTML5 Specification for HTML reference:
[https://www.w3.org/TR/html5](https://www.w3.org/TR/html5)

\- You Might Not Need jQuery for learning JS:
[http://youmightnotneedjquery.com](http://youmightnotneedjquery.com)

\- Ditching jQuery for learning JavaScript basics:
[http://gomakethings.com/ditching-jquery](http://gomakethings.com/ditching-
jquery)

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

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

------
trumbitta2
For all the "just go to W3Schools" people in this thread:
[http://www.w3fools.com/](http://www.w3fools.com/)

------
hypertexthero
Check out [Simple &
Useful]([https://s3.amazonaws.com/simpleuseful/index.html](https://s3.amazonaws.com/simpleuseful/index.html))
and [Mozilla
Thimble]([https://thimble.mozilla.org/](https://thimble.mozilla.org/)).

Here's a blog post I wrote about learning web design:
[http://hypertexthero.com/logbook/2012/04/web-design-where-
to...](http://hypertexthero.com/logbook/2012/04/web-design-where-to-begin/)

------
deepakkarki
I would suggest [http://www.freecodecamp.com/](http://www.freecodecamp.com/)

Plus the website is also open source :)

------
chetanahuja
Interesting suggestions all around. I've been looking for appropriate
tutorials for a high schooler. Many of these suggestion seem to fit the bill.

------
hanniabu
My opinion on best to worst codeschool(paid, ~$500/year) codecademy
freecodecamp or googling tutorials for what you want to learn to do

------
walterstucco
studying

