Grow your CSS skills. Land your dream job.

Learning CSS/HTML, Start with Static or Dynamic?

Published by Chris Coyier

The Graphic Design Blog asks an interesting question about advice for beginners on learning CSS/HTML: Should newbies learn static or dynamic web design?

The obvious conclusion would be 'you gotta learn to walk before you can run', but this isn't necessarily true anymore on the web. It is a fairly easy process to get WordPress installed on a website and a beginner could learn a lot about web design and layout quickly by poking around with that. The fact is, there just isn't a whole heck of a lot of static webpages left out there, and the ones that are there feel like dinosaurs next to all these sexy dynamic pages out there. Why learn what is essentially an outdated form of web design?

It is an interesting debate though, and there might not be a right or wrong answer. I personally lean toward static. It's all about those fundamentals. That's why football teams hold practice every day instead of scrimmages. They need to work on their speed and their footwork and ball handling skills, just like a beginning web designer needs to be thinking about layout styles, typographic control, and code efficiency. It's hard to be thinking about those things while you are just poking around a big beast of code 99% of which you don't understand. Web design beginners should be asking themselves whether absolute or relative positioning is more appropriate not trying to decipher some complex database call.

This may seem obvious, but dynamic pages are just static pages with some dynamic content plugged in. Building a beautiful dynamic site happens by first building a beautiful static site and then adding/replacing content with dynamic content. I know the line gets fuzzier and fuzzier between designer and developer, but while they may always be separate jobs, they are separate tasks, so think and act on them separately.

Comments

  1. Thanks for the mention. You’re site looks like it could be pretty useful for a newbie coder like me, I’ll be back to read more.

  2. admin
    Permalink to comment#

    Thanks Tara. Remember you can always use the contact form and send us questions directly if you have trouble with anything.

  3. drek
    Permalink to comment#

    Intersting thought. My first plunge into html/css was when I needed to modify a wordpress blog template. Effectively learning dynamic web design before static. :)

  4. admin
    Permalink to comment#

    Honestly, even though I mentioned in the article I think it’s probably best to learn static first, I started with dynamic sites first too. It was a band blog I wanted to modify and personalize. There is just something so much more motivating to be working on a site with ever-changing content rather than a stick-in-the-mud static site.

  5. I think that you should start with static, for obvious reasons. Learning HTML is a daunting enough task in itself – think back to when you first set eyes on the source code of a website. Unless you’re a natural-born geek, to someone with no idea about web design, it just looks like a cat ran over the keyboard! All web pages are static in the eyes of a browser, anyway – it is only on the backend that the concept of a “dynamic” web page exists.

    In my opinion, the best route to take is:

    1. (X)HTML
    2. CSS
    3. JavaScript
    4. PHP / ASP / server-side language of your choice

    This not only has the benefit of being in ascending order of difficulty*, but is also a great way of teaching a newcomer about the separation of layers. Learning dynamic web pages first will probably encourage them to mix languages, and therefore they will probably pick up bad habits like excessively using inline styles, embedded scripts / event handlers (e.g. onMouseOver etc) and presentational markup…

    It’s not really a question of whether to learn static or dynamic, but, as you said yourself in the article, a matter of learning to walk before you can run.

  6. Balaji
    Permalink to comment#

    Hi chris,

    Am designing a website in that i have the latest news at the top and when users clicks it . am storing it in a recently viewed block , Am using Jquery for the process . in the latest am able to click all the titles and i can see the data getting loaded for it but unfortunately in recent am able to click only the first one and for first title the data gets loaded but for others it is not and it happens only in IE . Firefox ,chrome everything works fine .. Can you help me out on this

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".