Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I am a C# developer and had developed simple websites in regular asp.net(with asp.net controls) and a wpf application.

Nowadays, I am trying to learn Asp.net MVC3 and I have been exposed to HTML with the Razor view Engine. To be honest, my knowledge of HTML and CSS is limited. Therefore, I keep posting questions now and then on SO for very simple tasks.

This has made me very tired of the this Q&A development process. So, now i am thinking of learning the basics of HTML, CSS and maybe some Javascript. Therefore i would request you to guide me to become an efficient enough developer for these technologies. Something that won't take much time and get me up and running fast.

share|improve this question
1  
For tips on how to get better at designing things in general (may not help you specifically with learning CSS, HTML), go read The Design of Everyday Things: amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746 –  FrustratedWithFormsDesigner Nov 11 '11 at 20:34
    
If you can wrap your head around a programming language such as C#, HTML and CSS should be easy for you to pick up. –  The Muffin Man Nov 11 '11 at 23:39
1  
You should also start frequenting User Experience Stack Exchange. –  Yannis Rizos Nov 12 '11 at 2:49
1  
Design and implementing a design are different. As Nick has said, learning the technologies are trivial. But remember to learn some graphical design fundamentals, e.g colour wheel and golden ratio vs knowing how to use !important CSS. –  StuperUser Jan 16 '12 at 17:10
1  
Consider checking with ux.stackexchange.com –  Emmad Kareem Jan 16 '12 at 18:27
add comment

3 Answers

up vote 4 down vote accepted

I am not going to bother posting links to HTML and CSS tutorials because a quick Google search should turn up hundreds of good resources for this.

I will share with you a tool that was invaluable to myself for learning and debugging CSS in my browser. If you have Firefox, download an Add-On called Firebug. It is a neat console that provides amazing features for viewing and real-time editing of HTML, CSS, and JavaScript in ANY web page that you visit. Using this tool I can tinker with stylesheets and styles on specific DOM elements and immediately see the results in my browser.

It also has a built in JavaScript debugger that allows you to write JavaScript expressions as well. Furthermore I can traverse the elements and attributes of the DOM tree to find neat information that may be hidden. All of these features are invaluable when doing development in ASP.NET or JSF and you need to debug complicated problems with third-party server controls. They also help me find neat workarounds.

On top of that, there is a tab for viewing all HTTP requests and responses, allowing you to view the content of any individual request and response as well as headers.

share|improve this answer
    
I haven't used Firebug for a while, but I find that Opera has a great set of development tools already built-in. There are probably plug-in tools as well, but I have never had to look into them. –  FrustratedWithFormsDesigner Nov 11 '11 at 19:39
2  
1  
Firefox also has built in console and scratchpad and Chrome has developer tools built-in. But I would stick with FF & Firebug because it has everything and works great. –  Christian P Nov 11 '11 at 20:26
    
Thanks mate...you gave me something new...I always test my apps on Chrome..Will try to install firefox and check it out –  Pankaj Upadhyay Nov 12 '11 at 5:29
    
@FrustratedWithFormsDesigner , mate i haven't seen opera for year now. But, since you seem so confident with it's development tools, I will surely give it a shot. Thanks so much –  Pankaj Upadhyay Nov 12 '11 at 5:30
show 2 more comments

Learning a technology from scratch using boards is definitly not an idea I would encourage for non-trivial tasks.

Web page design is significantly different from windows design.

Web design sometimes mean one or more of the following:

A - Web page layout

B - Graphics design

C - User interaction design

D - HTML and CSS coding

E - Java Scripting!

F - Using supporting tools of the above

Each of the above is a different aspect and require special skills. So, identify your role in the project and your objectives from learning first.

I suggest you try a formal design courses. Start with a video course and then move to an instructor lead course.

If you are a programmer focus on the programming of the frameworks and leave the artistic design to other professionals.

If you want to just know about it, then the courses should do it. If you can't do HTML, don't give up. Consider using Silverlight. It is very similar to WPF (at least for the XAML part).

share|improve this answer
    
Silverlight ??, I thought it was basically for replacing flash related stuff. Anyways, thanks for reminding about it, I seemed to have forgotten it :-P . Will visit the website and see how can it help me. –  Pankaj Upadhyay Nov 12 '11 at 5:40
add comment

UI is and is not a technical problem. It is inasmuch as you need to use technical tools to solve things on some levels and the art of the possbible is defined by the platform you are working in. But the biggest thing you can do to make yourself a better UI developer is really to learn how to think of user interfaces from the user's perspective. Remember, your user don't care about:

  • Your data model
  • Separation of concerns
  • Whatever cool toolkit you are using
  • Pretty much just about anything else that went into making the UI

Your UI is just a means to an end for them. They do care about doing what they want to do with a minimum of fuss or confusion but little else.

To wit, I'd advise reading up on great user interfaces. A great place to start is Steven Krug's Don't Make Me Think.

The other thing I really strongly believe in is that developers must use their own user interfaces. The dev team should enter the first 1000 or so records in a system. It is funny how many annoying low-hanging fruit get fixed when that happens. And it is surprising how much you learn from using the things you create that can get pushed into the next creation.

share|improve this answer
    
Having developers use their own user interfaces can have drawbacks. Developers often have a very different idea of how they'd like to use the tool rather than how the client/end user would like to use the tool. So much so that for a current reporting system here, there is a seperate panel so developers get developer-oriented forms (for testing purposes - to be "hidden" in final releases) and reports that the end users have stated they do not like or want. –  FrustratedWithFormsDesigner Nov 11 '11 at 20:07
    
Thanks mate. In my own projects, I like to handle the interfaces myself because the pros in this department seem to do too much and annoy. I like keeping things simple and easy to read rather than fancy and outrageous to the eye. –  Pankaj Upadhyay Nov 12 '11 at 5:43
    
@FrustratedWithFormsDesigner: yes, that is definitely a danger. But I think the potential for good outweighs the downside risk in most cases. –  Wyatt Barnett Nov 12 '11 at 11:57
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.