I am primarily a backend software developer, who occasionally has to work on front-end development. But I really suck at front-end design. Are there some good online resources/courses/videos that I can follow to develop decent front-end design skills?

From my experience, Front-End design is split into the programming part (which I find tedious and unintelligent) and the creative design part where you bring your ideas to reality. Let's get the programming part out of the way. You need to invest your time in learning HTML/CSS/JS, which can be picked up from http://w3schools.com or any youtube channel that talks about web development. If you're already familiar with the basics, go to http://getbootstrap.com/ and dissect one of their themes and understand it completely. I also suggest you learn a Javascript based front-end framework like AngularJS (http://codeschool.com has an amazing introduction to getting you started) which makes your life infinitely easier. Now, coming to learning design, I'm assuming you are an engineer like me and you try to apply logic to almost everything in life. Luckily, design can be learnt that way. The trick is to completely immerse yourself in design. Go to websites like http://dribbble.com or get an account on Pinterest and consume copious amounts of current design trends. The more you see, the more your brain learns to separate good design from bad and you start to form opinions. Once you have formed a personal preference and are fairly good at using javascript and html/css to create basic templates and themes of webpages, read this article https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda#.s22dkts0k . Remember that you are not a designer and are not required to sketch and color the next design trend. Just ensure you learn enough to create web pages that implement the functionality of your backend in a way ANY user can easily understand and use. It's really only about that. Some other resources you could use are, https://design.google.com/ https://material.angularjs.org/latest/ PS: I'm a big fan of Material design and AngularJS so my answer is biased. The reason I chose them is because they are popular and design-focused. I suck at design as well and it's nice to have the developers behind these tools do all the work while my website looks amazing. ;) A quick google search of their alternatives will give you a good idea of what's out there.

Learn design principles in tiny doses with Hack Design. Hack Design will give you just enough design skills to be "dangerous". This actually doesn't take much time. Their entire curriculum is only about 20 hours worth of reading. You can sign up to get one lesson emailed to you each week for about one year. Or if you want, you can blaze through https://hackdesign.org/lessons There are plenty of easy things you can do to quickly improve your design sensibilities. And http://hackdesign.org/ is a good, free place to start.

Yes, there are many resources available, but it depends upon your level of Knowledge about FE-design. if you have a little experience of writing css and html you may update yourself by trying pre-processors for both HTML and CSS. There are many tools available such as http://jade-lang.com/ Jade (pre-processors for HTML) Stylus https://learnboost.github.io/stylus/ less, Sass for CSS, you have many options for writing CSS. I personally use and recommend you to try stylus because it is simple and easy. For more you may check   http://webdesign.tutsplus.com/articles/why-i-choose-stylus-and-you-should-too--webdesign-18412 Good Luck Note: You have to use node.js NPM and Grunt for installation process.

You do need to learn HTML/CSS, but luckily those are some of the easier languages to pickup. Also luckily, since all of the design is frontend, you can read through the HTML and CSS of sites that look the way you want to design with view source and pick up the styling that you want to implement. Front end design is always changing and everyone has an opinion of how things should be done. These days, every site either looks like Quora/Twitter/Facebook or like Wordpress blogs. Screen resolution sizes keep updating and mobile browsers keep getting smarter and smarter. For a basic philosophy of following current trends, I'd say go with a 700px max-width body with left and right side navigations for desktop browsers and a position:fixed;top:0px; for a top navigation bar. 100% width body for mobile users with a hamburger menu. Use San Serif, Verdana and Arial fonts. Pick a color palette. The web is currently based on a lot of reds whites and blues (American flag colors) and greys. Use border: 1 px solid; on a lot of your content and always put most of your text on a white background, even if the html background is a different color. Try to add dimensional shading to your design if possible. A trend going forward is supposed to be for objects to appear textured based on shadows and shade. Certain containers are supposed to pop out visually if possible. There's 3 dimensional shading on Quora's layout.

Hello brother. I was in a similaar situation similar to yours about 4 years ago. Wasted 4 years of college in alcohol and women. Finally passed out and got a job as a .net developer in a small firm and got pretty good with C# and Sql, along with other framework components. But I wanted to be a full stack developer with skills in UI design as well. Enough beating around the bush. Here is how I did it: 1. HTML and CSS: Took around a month to learn HTML with css. Yes, a month. A lot of people will say you could do it in a week. But trust me, give it time and play with css attributes and stuff until you know what's what. That's when the visualization in your head starts. 2. Javascript: To implement These visualizations you need JavaScript. Don't jump directly into jQuery. That's a classic mistake. If you know JavaScript, jQuery will be a piece of cake. 3. Learn about callbacks. Asynchronous..Asynchronous everywhere. Another sweet feature of JavaScript that will help you manage your ui animations in a collaborated manner. 4. UI frameworks: Start with bootstrap framework. Don't just use it, study it. Check out the js and css file that you download and study the css classes and js methods. Try to fiddle with the code and see what happens on the HTML page. It's quite well written and you will get to know how the experts do it. 5. Don't use Bootstrap: Yes bootstrap is awesome. But almost every website uses bootstrap controls these days. It's like Nicolas cage of web development. Use the bootstrap grid system, but make your own controls. 6. Making your own controls: You may come across a lot of developers who use web controls straight out of github and other resources. But seriously, wouldn't you prefer to use something that you made yourself? And finally, practice and trial&error. Trust me there is going to be a lot of it. You are going to need a lot of it. I hope I have been of help. Good luck to you!

I haven't had a need to read books about design. You must remember that design is just the perspective of the average person. By making good "design" you are meaning to appeal to the average user. Most people like good color schemes, easy user interface, good functionality (a few more). Color schemes are generally pretty easy. Just pick some colors that match. Compare colors together and find some that look good. There are plenty of free applications available to help you find good colors. I use Colormania which is simple, free, and does the trick for me at least. As far as an easy-to-user interface, simplicity is always better. The more simple, the better. No need to have more buttons or controls than absolutely necessary. Keep your content neat and organized. Good functionality means that it functions well: no adds that bog down the user's computer, no poorly coded algorithms that freeze the user's computer. Here are some quotes to leave with you from Steve Jobs. “Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.” Design is not just what it looks like and feels like. Design is how it works. That last sentence strikes 'functionality' with me, but I'll leave that for you to decide. Hope this helps you. I don't recommend looking at books or videos because they will just indoctrinate you and take away your creativity. Cheers to the code :)

Try recreating designs you like. There is no can't in development. Learn how, and then learn how to do it better. The same goes with design, or really anything you want to apply it to. Learn different technologies in front end development like SASS, LESS, Angular... Learn Git. Look at other front end code to figure out the "how" and the "why". Practice, practice, practice. You'll see progression, and your skills will improve.

I love the YouTube channel Dev Tips for Designers. The creator, Travis Neilson, talks a lot about his design thought process. He has a whacky, fun-loving sense of humor and his live coding examples are excellent. The channel has well organized playlists and new content is added weekly. I recommend watching his videos on ideation and wire framing. https://m.youtube.com/user/DevTipsForDesigners

Go to http://codepen.io, find a design that you think is beautiful but aren't entirely sure how they built it, then implement it while trying, for the most part,  to avoid looking at their code. After you've done that wait a day and do it again. Between looking through large quantities of pens and actually implementing your favorite ones you'll begin to pick up on various design paterns.