1

Hopefully this question isn't too broad…

I am a competent iOS programmer and have some experience with Java (command-line tools). Over the last year or two I've dabbled into HTML, CSS, and JavaScript. Learning iOS and Java, I started with a book (Programming in Objective-C (Kochan)—it was my first language besides a tiny bit of C) and once I got the syntax down, I would just go to the source of documentation and figure things out. I know the HTML, CSS, and JavaScript syntax, but I don't know how to put it all together into a "modern"/well-designed web page. I can do some some simple formatting, run some scripts, but the layout still looks like it was designed by a 90-year-old bank executive in a cheap suit. I don't see how to put the languages together into a webpage…Given static images, I would not be able to pull together a mockup of the SO site, for example. I know about <img> tags and basic CSS position, but it's just not coming together for me. I also find that what little "official" documentation (W3Schools) exists is rather shallow and does not do a good job of joining everything together…but that might just be because I'm not familiar with everything.

Can anyone recommend any really good resources (web or print, preferably not video, as I'd like to go at my own pace) that can help me?

Addendum: Coming from a desktop platform, I'm used to things being where they are and having much more control over aspects, primarily UI layout but also data input methods and processing—iOS and Java have much richer libraries than JavaScript. How should I get around this mentality? Does anyone have any personal experience?

Update 1: Thanks for the replies (This is more for the comments; Daveo's answer is rather helpful). However, I do want to say that it's not the actual design I need help with—it's converting the design into code, not only in mockup/layout form but also in actual usability.

Improve this question
9
  • 4
    W3Schools is not official documentation, and is actually a rather bad resource: w3fools.com
    – djlumley
    Aug 17, 2011 at 23:14
  • 1
    W3Schools Eeeeeeeeek!
    – PeeHaa
    Aug 17, 2011 at 23:15
  • 6
    It's like an art really. You cant just say what book can I read to make me good at art? The only effective way to get better is to just make lots and lots of sites. Everytime you see something like, "I wan't that column to be slightly more to the left" look up the CSS way of doing it and remember it for next time. Because of browsers incompatibilities and differences in supported standards, some things can only be learnt by the experience of failing, and working around the problem.
    – James Hay
    Aug 17, 2011 at 23:16
  • 1
    Just to add to my previous comment. One method of learning I found useful is to look at awesome sites you find, and inspect them with some sort of developer tools (eg Chrome dev tools, firebug etc). Then you can find all the CSS they used and eliminate them one by one until you find the rule that is creating the visual you like.
    – James Hay
    Aug 17, 2011 at 23:21
  • 1
    I'd also like to suggest some peer review. show your site to someone who knows about design and can critique it for you. also: webpagesthatsuck.com
    – James Khoury
    Aug 17, 2011 at 23:24

2 Answers 2

Reset to default
3

Most of the comments are correct, though W3Schools comes up in google searches almost as often as wikipedia, neither of them are really what you need to learn. The full specs can be found at W3.org where there are pages for HTML 4.01, XHTML, CSS1 and CSS2 as well as up an coming things like HTML5 and CSS3 drafts. These are the places to go for the exact specs of how everything works.

In addition to the three skills you mentioned, html, css, and javascript, you should also look to adding a server side language to your toolset and a database. There are many to choose from but since you say your familour with C I'd suggest trying PHP for server scripting and MySQL for databases. These five items are what I use each day.

You mention that you are used to having librarys in Java that you can call on. Such things do exist in html/css/javascript world. There are javascript libraries and frameworks such as JQuery, Mootolls and Dojo amounst others. For CSS there are also frameworks such as Blueprint, YUI, JqueryUI, 960 and more. These can help advance you along the road to getting a usable, modern looking, design for your site.

As for how to learn. It's quite difficult to start with a blank page and work out everything from the ground up. It would be like a new house builder being given a blank plot of land and told to try to build a house. The first house he builds will be awfull, the second little better. Instead the builder learns one trade at a time. The first year he might do nothing but carry bricks. Then he might learn to mix cement and so on. He might be 40 or 50 years old before he knows every aspect and can work a whole project form start to finish and even then he will rely on other people expertise to complete many tasks.

Instead, start yourself off with a site that is already pretty much done. You can then play with the CSS and learn what things do. Change values and add styles. When you mess it up, go back to the beginning and start again. The same with html and javascript. Play on an existing template and learn one skill at a time. It might be a good idea to start with a CMS like Drupal or Wordpress and build simple site then try editing the CSS, writing your own template files or building your own plugins of these systems. Once you've cut your teeth you can try building your own sits from the ground up.

Improve this answer
1

Firstly you should probably ask this question over at http://webmasters.stackexchange.com

Secondly W3Schools teaches the syntax and the rules but not the design aspects of websites. You should look up on how to cover a PhotoShop document to CSS and HTML

For example see

http://csshowto.com/layout/psd-to-csshtml-in-easy-steps-part-1/

http://designm.ag/resources/converting-psd-to-html/

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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