Getting Started: Learning to Code for the Web, Logically

Posted in Web Design • Posted on 15 Comments

Coding is a logical process. You want the site or program to do a particular thing. You enter in the commands needed to achieve that end.

Learning to develop websites could be approached just as logically. Languages for the computer could be compared to math classes. You need to learn simple addition before you can even think about calculus. Going into it with the thought of languages building off each other might help you learn the languages more effectively.

Language 1–HTML
The first language you should tackle is obviously HTML. Short for HyperText Markup Language, this was the first language used on the web and as such is the backbone and framework for many other languages. The syntax of HTML is relatively simple and straightforward and there are a number of books and online resources available to help you. Be aware of the dates of the resources, however, since some elements are no longer supported, especially since HTML5 is in the process of a release.

What I wish I had known: Make sure you close all your tags! I cannot count the times that a page displayed strangely because I forgot to close a div. In this, commenting may be your best option, especially if it’s only

 <!-- This closes the Header Tag --> 

It may save you a headache or two for HTML and will insure that you are in the habit of closing them for the stricter offshoots. A validation tool may become your best friend, so be sure to bookmark your favorite. I like W3C’s Markup Validator, but there are others out there, so check around.

Some good resources:

Offshoots: There are several other languages that branch off from HTML. This includes XHTML which tends to be more fussy about syntax—they don’t call it “strict” for nothing—but does have its uses.

Language 2–Cascading Style Sheets (CSS)
There’s a good reason I put CSS here. It builds directly off of HTML, but lets you stylize your website more efficiently than HTML by itself. Having a visually appealing website also is more encouraging to work on and more fun to show off.

CSS also brings to your attention the issue of cross-browser compatibility, the sometimes frustrating problem of web browsers handling the same code differently. Learning CSS will help you anticipate the different ways browsers handle the same code. Developing a mindset to deal with these hurtles also builds general troubleshooting capabilities, a necessary tool for real life, as well as web development.

Having ids and classes already built into your HTML from using CSS also makes it easier to incorporate JavaScript libraries, like jQuery, later on.

With CSS3, cascading style sheets now have more useful features than ever, including support for gradients and rounded corners. These can save you time and energy. The downside of this is that not all browsers support them.

What I wish I’d known: Internet Explorer is (arguably) the worst browser when it comes to cross-browser compatibility. Conditional comments work for IE5 and up, and make styling for IE a little easier. Here’s a fun way to use them in the head of an HTML document.

Only Internet Explorer will see the stylesheet contained within the conditional comments. Other browsers will only see a comment and ignore it. By putting the IE stylesheet second, you override any duplicate tags, so you only need to modify the elements that display incorrectly.

Some good resources:

Language 3–JavaScript (JS)
JavaScript is useful for creating websites with dynamic or animated content. This includes animated transitions, menu tabs and near-flash like effects. JS introduces you to the wonders of, among other things, if and elseif statements. These are actually very useful tools and appear in many forms of programming, including PHP.

The syntax for JS is less forgiving than HTML or CSS, but will give you a definite sign that you did something wrong. It won’t work! The frustrating bit is that it doesn’t necessarily tell you what is wrong, so you may spend hours searching for that missing semicolon.

What I wish I’d known: While there are proponents of first learning a JavaScript library—like MooTools or jQuery— I don’t think you are doing yourself a favor through this, having done this myself. This is because when it comes to certain things—like HTML5’s canvas function, for instance—you need to know how to make the whole thing work without the shortcuts that libraries provide, especially where calling variables are concerned.

Some good resources:

Offshoots:Depending on your need for dynamic content, AJAX (Asynchronous JavaScript and XML) may be something you want to learn as well. It isn’t its own language, but a way of combining the two languages for more dynamic functionality. Obviously, this requires a knowledge of both JavaScript and XML.

Language 4—PHP
PHP can be used to create dynamic websites, either on HTML pages or on sites run on a content management system (CMS) like WordPress. The conditional statements, like “if”, “elseif” and “else”,are similar to those used in Javascript.

Unlike the already mentioned web development languages, PHP runs server-side, which has its own set of benefits and challenges. One benefit is that, unlike JavaScript, the user does not have to have PHP installed on their system in order to correctly view the page. The downside of this is that your host server does have to support PHP, though this is becoming less of an issue. The other part of this is that you do need a local server to run PHP pages.

What I wish I’d known:Parse errors can be helpful. These point to the direct line number with the syntax error, which can save you time.

Some good resources:

Continuing your learning
These are the core languages that will get you the most mileage. While there are other languages used in web development, HTML, CSS, JavaScript and PHP can provide a foundation for you to bridge off of. The Internet itself offers many resources that can help you learn coding or refresh your knowledge.

1 Written ArticlesWebsite

Peter Burgin is a web developer and instructor. He develops awesome scripts and offers web development tutoring and other resources.

15 Comments Best Comments First
  • Chris Bracco

    Monday, August 16th, 2010 15:40

    6

    Haha, this is exactly the order in which I’ve been learning how to code for the web, weird coincidence! I started with HTML and CSS when I was around 12, and I am now just getting into Javascript and PHP. Much more challenging, but worth the time spent learning, definitely.

    Thanks for the links!

    +1
  • Shrikrishna Meena

    Monday, August 16th, 2010 16:03

    7

    Well, I already learned most of the language that you presented here excluding javascript, jquery and a little emphasis should be required to master xml, ajax.
    Developed many new projects also and this article boosted my energy more to continue in this field.
    Thanks man.

    0
  • GrubbySeismic

    Monday, August 16th, 2010 12:11

    1

    Sorry to be a pain, but I was under the impression the “X” in AJAX was for XML?…

    0
  • Calite

    Monday, August 16th, 2010 20:15

    5

    I learned XHTML and CSS from this website(and it’s related book): http://htmldog.com/

    The information might be a bit outdated with the new HTML5 and CSS3, but I still use the book when working on webpages.

    0
  • Ignas

    Monday, August 16th, 2010 13:35

    4

    Nice 4 steps, but the 4th could be Python, Java also… Why only PHP? Yes PHP is simple to code, deploy, but Python is also simple to code (harder to deploy for first time maybe). So to make this article full, you should mention, that not only one programming language to code your site exists :)

    0
  • Johan de Jong

    Monday, August 16th, 2010 17:29

    2

    *Language 1 – HTML*
    Like most people, I learned it the hard way and even started with Frontpage (yeah…I know) to understand the basics. Although WYSIWYG editors don’t return the best code, it’s a good start to see what you need to do when I would like a certain result.

    *Language 2 – Cascading Style Sheets (CSS)*
    Basically the same as HTML, start simple by exploring other websites and learn how the do it. Then try it yourself and modify it to your own likings. No need to buy books or follow expensive courses.

    *Language 3 – JavaScript (JS)*
    Javascript is a bit tricky, especially if you try to learn it without any help. At this point I have to disagree with the author about not starting with a framework like Prototype, Mootools and jQuery. In my opinion it can learn you the basics and especially the debugging of errors. When you know how the language works it’s easier to go back to the roots.

    *Language 4 – PHP*
    Again, learned it the hard way, but since PHP has a great and usefull online documentation it shouldn’t be to hard to find a solution for your problems. Also the amount of PHP developers around the web is huge, so help can be found everywhere.

    0
  • Saad Ibrahim

    Monday, August 16th, 2010 19:33

    3

    HTML Dog is a good resource to learn HTML and CSS and the Sitepoint book named “building your site the right way using html and css” is also very good for that.

    0
  • Matt

    Monday, August 16th, 2010 18:27

    8

    I think a user should concentrate on HTML/CSS then spin off to js or php. Also I want to add that PHP and JavaScript isn’t as simple as described.

    0
  • Peter Burgin

    Tuesday, August 17th, 2010 04:18

    9

    Thank you all for the comments.
    @Johan de Jong–Thank you for your perspective. :)
    @Ignas–I wavered on step 4, but finally settled on PHP. This, of course, doesn’t mean there aren’t other languages or one language which is “better.”
    @GrubbySeismic–Yes, “X” is for XML. Thank you for catching that.

    0
    • Ignas

      Tuesday, August 17th, 2010 06:30

      10

      Thanks for the reply. And yes, you’re right – there is no language which is “better” or “best”. But nowadays in some countries, you can just count on both hands fingers, how many companies working with Python in example.. This is sad… And this happened, because a lot of you developers thinks that only the PHP is the best solution to develop the application on the web. But this is just my small point, but I liked your post and keep going! :)

      0
  • Michael Colman

    Monday, August 23rd, 2010 15:28

    14

    IE and cross-browser compatibility – arggggggggg!!!! Great article. Thanks.

    0
  • Alejandro

    Friday, August 27th, 2010 05:00

    15

    I am all upside down – HTML – FLASH ACTION SCRIPT – ASP – PHP – CSS – JAVA

    lol

    0
  • Ayush Kumar

    Monday, August 23rd, 2010 15:41

    13

    YES! So many languages to confuse me. I’m really glad your article showed me the right way to approach web-designing. Thanks a LOT!

    0
  • SL

    Sunday, August 22nd, 2010 17:32

    12

    I would suggest that anyone learning a new language or technology shouldn’t learn from a framework (jQuery, CodeIgnitor, Cake, etc. ). That’s not to say I’m against any of those, but if you learn the language first, learning the framework will be much faster & easier, and you’ll be able to solve your own problems beyond what the framework can do. I get so sick of people posting to forums “How do I…”. Google it, check the documentation, find a tutorial, trial & error, then post to a forum.

    Just my $0.02

    0
  • Simon Day

    Tuesday, August 17th, 2010 16:51

    11

    Don’t forget .NET either. Pretty much all of the big companies I’ve worked for use .NET and it is only the smaller firms who used php.

    I don’t know a lot about .NET but I know enough to be able to navigate my way around and sort out the HTML and CSS side of things.

    0
  • Alejandro

    Friday, August 27th, 2010 05:00

    15

    I am all upside down – HTML – FLASH ACTION SCRIPT – ASP – PHP – CSS – JAVA

    lol

    0
  • Michael Colman

    Monday, August 23rd, 2010 15:28

    14

    IE and cross-browser compatibility – arggggggggg!!!! Great article. Thanks.

    0
  • Ayush Kumar

    Monday, August 23rd, 2010 15:41

    13

    YES! So many languages to confuse me. I’m really glad your article showed me the right way to approach web-designing. Thanks a LOT!

    0
  • SL

    Sunday, August 22nd, 2010 17:32

    12

    I would suggest that anyone learning a new language or technology shouldn’t learn from a framework (jQuery, CodeIgnitor, Cake, etc. ). That’s not to say I’m against any of those, but if you learn the language first, learning the framework will be much faster & easier, and you’ll be able to solve your own problems beyond what the framework can do. I get so sick of people posting to forums “How do I…”. Google it, check the documentation, find a tutorial, trial & error, then post to a forum.

    Just my $0.02

    0
  • Simon Day

    Tuesday, August 17th, 2010 16:51

    11

    Don’t forget .NET either. Pretty much all of the big companies I’ve worked for use .NET and it is only the smaller firms who used php.

    I don’t know a lot about .NET but I know enough to be able to navigate my way around and sort out the HTML and CSS side of things.

    0
  • Peter Burgin

    Tuesday, August 17th, 2010 04:18

    9

    Thank you all for the comments.
    @Johan de Jong–Thank you for your perspective. :)
    @Ignas–I wavered on step 4, but finally settled on PHP. This, of course, doesn’t mean there aren’t other languages or one language which is “better.”
    @GrubbySeismic–Yes, “X” is for XML. Thank you for catching that.

    0
    • Ignas

      Tuesday, August 17th, 2010 06:30

      10

      Thanks for the reply. And yes, you’re right – there is no language which is “better” or “best”. But nowadays in some countries, you can just count on both hands fingers, how many companies working with Python in example.. This is sad… And this happened, because a lot of you developers thinks that only the PHP is the best solution to develop the application on the web. But this is just my small point, but I liked your post and keep going! :)

      0
  • Matt

    Monday, August 16th, 2010 18:27

    8

    I think a user should concentrate on HTML/CSS then spin off to js or php. Also I want to add that PHP and JavaScript isn’t as simple as described.

    0
  • Shrikrishna Meena

    Monday, August 16th, 2010 16:03

    7

    Well, I already learned most of the language that you presented here excluding javascript, jquery and a little emphasis should be required to master xml, ajax.
    Developed many new projects also and this article boosted my energy more to continue in this field.
    Thanks man.

    0
  • Chris Bracco

    Monday, August 16th, 2010 15:40

    6

    Haha, this is exactly the order in which I’ve been learning how to code for the web, weird coincidence! I started with HTML and CSS when I was around 12, and I am now just getting into Javascript and PHP. Much more challenging, but worth the time spent learning, definitely.

    Thanks for the links!

    +1
  • Calite

    Monday, August 16th, 2010 20:15

    5

    I learned XHTML and CSS from this website(and it’s related book): http://htmldog.com/

    The information might be a bit outdated with the new HTML5 and CSS3, but I still use the book when working on webpages.

    0
  • Ignas

    Monday, August 16th, 2010 13:35

    4

    Nice 4 steps, but the 4th could be Python, Java also… Why only PHP? Yes PHP is simple to code, deploy, but Python is also simple to code (harder to deploy for first time maybe). So to make this article full, you should mention, that not only one programming language to code your site exists :)

    0
  • Saad Ibrahim

    Monday, August 16th, 2010 19:33

    3

    HTML Dog is a good resource to learn HTML and CSS and the Sitepoint book named “building your site the right way using html and css” is also very good for that.

    0
  • Johan de Jong

    Monday, August 16th, 2010 17:29

    2

    *Language 1 – HTML*
    Like most people, I learned it the hard way and even started with Frontpage (yeah…I know) to understand the basics. Although WYSIWYG editors don’t return the best code, it’s a good start to see what you need to do when I would like a certain result.

    *Language 2 – Cascading Style Sheets (CSS)*
    Basically the same as HTML, start simple by exploring other websites and learn how the do it. Then try it yourself and modify it to your own likings. No need to buy books or follow expensive courses.

    *Language 3 – JavaScript (JS)*
    Javascript is a bit tricky, especially if you try to learn it without any help. At this point I have to disagree with the author about not starting with a framework like Prototype, Mootools and jQuery. In my opinion it can learn you the basics and especially the debugging of errors. When you know how the language works it’s easier to go back to the roots.

    *Language 4 – PHP*
    Again, learned it the hard way, but since PHP has a great and usefull online documentation it shouldn’t be to hard to find a solution for your problems. Also the amount of PHP developers around the web is huge, so help can be found everywhere.

    0
  • GrubbySeismic

    Monday, August 16th, 2010 12:11

    1

    Sorry to be a pain, but I was under the impression the “X” in AJAX was for XML?…

    0

Comments are closed.

54.90.227.32 - unknown - unknown - US