HN Explorer

Navigating the switch between being a backend dev to frontend work

2 points by wsetchell ↗ HN
I'm a software engineer. So far I've only worked on backend parts of systems. I want to start doing front end engineering work.

What skills should a front end engineer possess that most backend engineers don't? What can I do to build that skill set?

Here is where I'm at now - I don't know HTML/CSS very well. How should I pick that up? (I found most tutorials online aren't written for someone very technical so they can be frustrating)

- I can tie together mediocre javascript. I can make things work, but I can't write very cleanly or quickly.

- I have no UX design experience or training (other than common sense).

- I can't (yet) turn ideas into mocks via fancy software (eg photoshop, illustrator, ...) Should I learn a tool to do this? Which one? How should I go about learning it?

1 comment

[ 4.5 ms ] story [ 11.8 ms ] thread
kvnn
It really depends on why you are doing this, but I'd recommen separating any desire to become a good designer from your desire to become a good front end developer.

I suggest you forget about photoshop, illustrator and UX and use your common sense with some engineering paper for mockups unless there is a designer on board (there usually should be).

CSS is the most important. Standard HTML is incredibly easy and you can learn everything from experience and obsvervation. For CSS, pick up The Missing Manual from O'Reilly.

Don't listen when people say "CSS is easy, just find some tutorials". CSS syntax is incredibly simple, but understanding and designing for inheritance is not easy.

For Javascript, use jQuery for front end stuff. Its already cross-browser, it has incredible docs and its popular. You shouldn't need a book about jQuery but you should get The Good Parts by O'Reilly so you understand Javascript better.

A) With both of those books next to you, draw something that you want to build. A single page with some modals, some fade ins and some drop downs.

B) Use a single html file, a single css file, jquery-newest.js, and a single javascript file and build the mockup. You have an objective and you have resources, so all thats left are the countless failures you will learn from.

Repeat.

Repeat.

Repeat.

Repeat.

Repeat.

Repeat.

Repeat.

Repeat.

Repeat.

Repeat.