95% of the more complex errors I've seen* in CSS have been some combination of a misunderstanding of positioning (https://developer.mozilla.org/en-US/docs/Web/CSS/position) and the box model (https://developer.mozilla.org/en-US/docs/Web/CSS/box_model). The other 5% of relatively complex display errors are actually due to unfortunate choices when writing the HTML.

I think once you understand those, the rest is really quite simple. Media queries, clever nonsense with things like ":target" or ":not([class]) > div > img", it's all ultra-simple because there are no logic bugs you can introduce once you know the syntax – the only logic you need to think about is in the positioning of elements on the page.

As a backend web developer, you will find it all very simple. A bit of bloody-minded Googling will solve the majority of your problems, and the CSS answers on StackOverflow are more helpful & polite than they are in many other areas.

For HTML, some features I have found useful include definition lists, dfn, nav, header, section and article elements. It may also be useful to check out Schema.org.

So I guess my recommendation is to get the box model and positioning down pat for CSS, and get semantic elements down for HTML5.

If you like genuinely clever and awesome tricks, check out Lea Verou (http://lea.verou.me/).

*"seen" as in "made myself"

This was incredibly helpful, thanks!

upvoted for "bloody-minded Googling" (and good information)

Thanks as well!

I really have enjoyed reading through Shay Howe's guides:

http://learn.shayhowe.com/html-css/

http://learn.shayhowe.com/advanced-html-css/

https://www.bento.io/ is pretty good for a list of teach-yourself-technology.

I would also check out Codeschool (although they're not free) because they have some really great classes on everything from Rails to jquery and CSS.

Too bad bento requires signing in with Facebook or Google.. ugh

well some of the tracks do but most of the links at the bottom are purely just links to the resources.

I'm also very interested in this. I'm a SW engineer who has worked mostly with C, C++, Java and Python. But now I would like to learn web development.

Although I suspect learning HTML and CSS to be manageable, with CSS having some weird corner cases.

However when it comes to JS and all its frameworks things get more complicated. Especially when deciding which JS framework to choose from. It's of interest to bet on something that will still matter in the next 3 to 5 years.

edit: This resource was posted some weeks ago on HN. Although it's more of a set of tutorials from different sources than an ebook.

https://developer.mozilla.org/en-US/docs/Web/Tutorials

Time spent on learning frameworks is mostly wasted. Except when there is an interesting concept behind. In 3-5 years things like web components will be mature enough so it may be worth to learn/use from now. Having a strong understanding of JavaScript, CSS, SVG/Canvas/WebGL will be much more valuable than learning a framework api.

If you're interested in getting your feet wet with JS, not in a web developer sense, Codewars.com has some cool coding challenges that can be done in JS. When it comes to frameworks, I've found that AngularJS is probably the most entry-level friendly but I absolutely love using React in my projects.

I made this journey recently. For css pick a framework(something small like pure/skeleton) and study the source code and read about each attribute you don't know about on MDN.

Take a look at Magic of CSS: http://adamschwartz.co/magic-of-css/

Related question: how do "pros" write web pages. Do they do it by hand or do they use some type of wysiwyg editor?

I know the basics of HTML/CSS too (I suppose all programmers do), but still I don't feel qualified to make a web page. It seems to me that it's more a designer than a programmer task, am I wrong?

I use vim with a few plugins to support newer CSS3/HTML5 related syntax.

https://github.com/othree/html5.vim

https://github.com/hail2u/vim-css3-syntax

Chrome Developer Tools are invaluable in my workflow.

https://developer.chrome.com/devtools

I can't speak to what the majority of designers use. I would guess that Dreamweaver is less popular today than it was before. I might be wrong, though?

For sites created by an agency, making a web page is still a combination of designer and programmer tasks. Some people do both task types but it's usually a division of labor.

Generally, each page type (template) is drawn at a desktop and mobile resolution to dial in the responsive experience and visual elements on the page. Designers have personal app preferences but it's always something from the Creative Suite - Photoshop, Illustrator, InDesign or Fireworks. Some people tinker with wireframing or prototype apps but I've found them distracting.

We sketch wireframes on a paper and go right to coding for something small or internal. When client approval is needed there is always a polished design presented in PDF or PNG with notes explaining the intended functionality.

I like editing in Coda (paid) and Brackets (free). Classic WYSIWYG programs like Dreamweaver are being replaced with interactive apps like Adobe Muse or hybrid custom-hosted templates like Squarespace.

There are so many good CSS frameworks available that you can learn one and make an excellent page in a day. We use Bootstrap for the full blown responsive CSS/HTML/JS framework and Susy for a CSS-only Sass system.

Our new interns start by learning these paid HTML Foundations and Bootstrap courses. https://www.codeschool.com/paths/html-css

Grunt, Bower and Yeoman are the command line tools we use. Grunt helps you automate tasks like minifying your code to save file size or update your browser live while writing HTML, CSS and JS. Brackets has Grunt built in so local page refreshing already works. Bower lets you install lots of well tested CSS and JS (with version dependencies). Yeoman lets you create the shell of that "pro" web page or app from the command line, leveraging Grunt and Bower.

YMMV, but everybody I know uses a text editor of some flavor. Some use specialized text editors like Espresso or Coda, but the most common I see is Sublime Text.

Raw html? I use Sublime + Emmet.

I can do something like "table>(tr>(td>p{$}) * 3) * 4" and then press tab, which would generate for me:

<table> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> </table>

Edit: Except that there would be indentation too, which HN removes.

Quality text editor (Sublime often) + Emmet goes a long, long way

I'm in a similar situation as yours. Have you checked code academy (http://www.codecademy.com/)?

I'm currently doing the Udacity Frontend Nanodegree. It's somewhat expensive but I'm learning a ton. The best part about paying for it is that you get graded exercises while building an actual portfolio along the way. As for the courses themselves I feel like I'm learning best practices and not just syntax.

Get Jon Duckett's books. http://www.amazon.com/Jon-Duckett/e/B001IR3Q7I

this free course teaches you almost everything you need to know about basic html and css:

http://webdesign.tutsplus.com/courses/30-days-to-learn-html-...

There is about 5 hours of material, you can work through it in about a week if you put a couple hours in a day. It is a good way to quickly pick up responsive design and html/css fundamentals. The videos are really good and functional. It is really good from an efficiency standpoint.