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

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.

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

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 as a wrapper?

- is there any HTML like 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

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

By 2015 I had it pared down to this: 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:

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, and JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Reference

- HTML5 Specification for HTML reference: https://www.w3.org/TR/html5

- You Might Not Need jQuery for learning JS: http://youmightnotneedjquery.com

- Ditching jQuery for learning JavaScript basics: http://gomakethings.com/ditching-jquery

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

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Some tips.

Keep your layouts flexible: * Avoid specifying widths and especially heights of individual elements unless really necessary. Allow the content to determine dimensions. * Set percentage based widths on overall containers (columns / grids). Allow these to constrain the dimensions of elements within. (Simplify your page structure as much as possible and don't overuse these.) * Use max-width to prevent elements from exceeding the dimensions of their containers: img {max-width: 100%;}