Mobile app version of vmapp.org
Login or Join
Caterina187

: Putting Together HTML, CSS, and JavaScript 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

@Caterina187

Posted in: #Css #Design #Html #Javascript #WebDevelopment

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.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Caterina187

2 Comments

Sorted by latest first Latest Oldest Best

 

@Bethany197

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.

10% popularity Vote Up Vote Down


 

@Connie744

Firstly you should probably ask this question over at 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
csshowto.com/layout/psd-to-csshtml-in-easy-steps-part-1/ designm.ag/resources/converting-psd-to-html/

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme