6 ms·

Any recommendations for a backend web developer who knows the basics of HTML and CSS but not much more?

by tsm 12y ago

throwaway12357 12y ago
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 https://developer.mozilla.org/en-US/docs/Web/Tutorials
- UUMMUU 12y ago
  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.
- deleted 12y ago
  [deleted]
- hugozap 12y ago
  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.
UUMMUU 12y ago
https://www.bento.io/ 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.
- reinhardt 12y ago
  Too bad bento requires signing in with Facebook or Google.. ugh
  - UUMMUU 12y ago
    well some of the tracks do but most of the links at the bottom are purely just links to the resources.
S4M 12y ago
I'm in a similar situation as yours. Have you checked code academy (http://www.codecademy.com/ http://www.codecademy.com/)?
mguterl 12y ago
I really have enjoyed reading through Shay Howe's guides: http://learn.shayhowe.com/html-css/ http://learn.shayhowe.com/html-css/ http://learn.shayhowe.com/advanced-html-css/ http://learn.shayhowe.com/advanced-html-css/
vonklaus 12y ago
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-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.
Enzolangellotti 12y ago
Get Jon Duckett's books. http://www.amazon.com/Jon-Duckett/e/B001IR3Q7I http://www.amazon.com/Jon-Duckett/e/B001IR3Q7I
JimmyM 12y ago
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 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 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/ http://lea.verou.me/). *"seen" as in "made myself"
- tsm 12y ago
  This was incredibly helpful, thanks!
- bcg1 12y ago
  upvoted for "bloody-minded Googling" (and good information)
- yllow 11y ago
  Thanks as well!
sfeng 12y ago
Take a look at Magic of CSS: http://adamschwartz.co/magic-of-css/ http://adamschwartz.co/magic-of-css/
dominotw 12y ago
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.
yodsanklai 12y ago
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?
- eropple 12y ago
 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.
- grimgrin 12y ago
 I use vim with a few plugins to support newer CSS3/HTML5 related syntax. https://github.com/othree/html5.vim https://github.com/othree/html5.vim https://github.com/hail2u/vim-css3-syntax https://github.com/hail2u/vim-css3-syntax Chrome Developer Tools are invaluable in my workflow. https://developer.chrome.com/devtools 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?
- McRask 12y ago
 Quality text editor (Sublime often) + Emmet goes a long, long way
- Raphmedia 12y ago
 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> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> </table> Edit: Except that there would be indentation too, which HN removes.
- dylanvalade 12y ago
Yhippa 12y ago
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.

Any recommendations for a backend web developer who knows the basics of HTML and CSS but not much more?

by tsm 12y ago

Any recommendations for a backend web developer who knows the basics of HTML and CSS but not much more?

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 https://developer.mozilla.org/en-US/docs/Web/Tutorials

UUMMUU 12y ago
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.
deleted 12y ago
[deleted]
hugozap 12y ago
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.

UUMMUU 12y ago

https://www.bento.io/ 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.

reinhardt 12y ago
Too bad bento requires signing in with Facebook or Google.. ugh
- UUMMUU 12y ago
  well some of the tracks do but most of the links at the bottom are purely just links to the resources.

S4M 12y ago

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

mguterl 12y ago

I really have enjoyed reading through Shay Howe's guides: http://learn.shayhowe.com/html-css/ http://learn.shayhowe.com/html-css/ http://learn.shayhowe.com/advanced-html-css/ http://learn.shayhowe.com/advanced-html-css/

vonklaus 12y ago

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

Enzolangellotti 12y ago

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

JimmyM 12y ago

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 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 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/ http://lea.verou.me/). *"seen" as in "made myself"

tsm 12y ago
This was incredibly helpful, thanks!
bcg1 12y ago
upvoted for "bloody-minded Googling" (and good information)
yllow 11y ago
Thanks as well!

sfeng 12y ago

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

dominotw 12y ago

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.

yodsanklai 12y ago

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?

eropple 12y ago
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.
grimgrin 12y ago
I use vim with a few plugins to support newer CSS3/HTML5 related syntax. https://github.com/othree/html5.vim https://github.com/othree/html5.vim https://github.com/hail2u/vim-css3-syntax https://github.com/hail2u/vim-css3-syntax Chrome Developer Tools are invaluable in my workflow. https://developer.chrome.com/devtools 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?
McRask 12y ago
Quality text editor (Sublime often) + Emmet goes a long, long way
Raphmedia 12y ago
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> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> </table> Edit: Except that there would be indentation too, which HN removes.
dylanvalade 12y ago

Yhippa 12y ago

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.