I received a lot of questions from people, how do I learn to build websites? Do I take any classes? Do I read books? Or do I have any kind of mentor? I don’t really have any fix answer to that question. Considering myself not that expert in this web thingy, I would normally say that I just learn it by looking at other people’s website and go through as much tutorials as I can.
It is good to know that today’s kids can learn very fast in anything there are interested in. In becoming a website dude, there are several type of people I’ve found:
- Those who really are interested in web design and development.
- Those who just want to try something new just for the fun of it
- Those who want to make quick money by declaring themselves as freelance web designer.
- Those who just want to quickly a create website so they can place advertisements everywhere.
Haha.
When you have the passion to learn something, you would do anything in order to tackle it. No, keep bugging other people for every single details is not considered. That means, you don’t go and ask people without even trying. And you don’t ask them how to do it – you asked them to give you some directions and hints. Trust me, the learning is actually the fun part.
Lets go to a step-by-step process that you can try.
Step 0: Know what to expect.
You should prepare yourself to undergo some geeky coding experience. Well, some people don’t expect that because they thought website is just visuals, graphics and texts with some click thing. Designing a website in a graphic software is one thing, and coding is another thing. Plus, it is not something you can learn in just few days. It takes time for you to develop the skills.
Step 1: Get the free stuff
Personally, I think it is best to learn from the existing stuff. Download some examples of CSS and XHTML templates – something like this and this; or if you prefer WordPress themes, you can have it here. Don’t be ashamed to try on a simpler layout if you don’t understand most part of the coding on a complex layout. And you don’t want to waste too much time just to choose the template.
Step 2: Explore and Discover
From the example layouts, you need to go through each files and try to understand each lines of it. As for understanding, there are a lot of resources available as references. Here are some:
This is the most important (and longest) part of all. How much you understand the code structure will determine how well you’ll be performing in the later stages. Try to modify the source code. For this, you can either use the ordinary Notepad or Textmate, or you can choose from many source code editors. It is highly recommended that you use Firebug throughout this process too. You can read my Firebug-related tutorial to learn more.
Be very ambitious – try to look at as many CSS tutorials as possible. The floats, the positions and everything.
Step 3: Self-evaluation
Once you are familiar with the structure of the webste, from the <html> to <head> to <body> down until the end of </html> and everything in between, you should force yourself into a self-evaluation process. Ditch all the free layouts you downloaded earlier, and start from a blank file.
Create your first page, link to your stylesheet; add the headers, footers and all. Make it fun – put some colors and images. Style the headings, the hyperlinks, hover effect, and those cool stuff.
When everything looks great on the browser, spend some time to stand up, run and shout around the room for few seconds to celebrate your victory. Haha
Step 4: Meet the standard
Once you are familiar with the syntax and everything, you might want to move one step ahead by validating you works to meet the web standards. What are web standards? Read about it here.
Designing with web standards by Jeffrey Zeldman; an old book, but that doesn’t mean you can’t read it anymore. It was actually the book that gave me the courage to validate my website for the first time. (It is not valid now, due to unsupported opacity effect in CSS 2.0).
It is a good practice though.
Step 5: Learn more
The things you’ve learn in the early stages may not be enough for a much complex layout. Keep learning new things and tricks. Some useful links: 53 CSS-Techniques You Couldn’t Live Without and Most Used CSS Tricks
DONE.
No, it’s not done. Never will. Repeat Step 5.
For me, its like using Linux – if you are a lazy ass person, don’t bother to install one in your system – or you’ll ended up as that annoying dude, to keep coming to one person for his/her help to do almost everything for you. It is all about commitment, right?
Have fun learning. 
PreviousTwitter killed my blog
good work
I recommend books from sitepoint as they provide better visualization..
My first book was “Best Practice Guide to XHTML & CSS” by Patrick Griffiths.
Once you code a valid codes, then you ask for more.
Owh, forgot to tell..
I love “PHP Designer 2008″ to code XHTML, CSS and PHP as its include error checking by the time you type your word.
A nice apps on minimizing time to spend for validating your codes.
Cheap too! Not like Adobe Dreamweaver that sucks people moneh -_-”
@izudin.helmi: Yeah I have some books from Sitepoint too. wow pretty nice app! unfortunately it is only for windows. Thanks for suggestion tho.
great tips flisterz!
i have people asking me how to learn doing websites as well.. i simply tell them it all depends on how bad n how much u wanna know.. u can start off with dreamweaver, modifying blogspot templates, myspace templates.. the key is to familiarize urself with html markup n how to style them afterwards..
i remember when i first started dulu2, i used frontpage and lots of free javasripts (popups lah, alerts lah hahaha) and hosted my site at angelfire!!
anyway, great article flisterz! hope to see a good discussion about this
Nice bro , nice!
@wanie: thanks. yeah, they should familiarize themselves with those markup, even the simple <img src:../> and <a href=..> thing. i used to use frontpage too haha
@asx: thanks
Well written. =)
However, in my case, I learn css and html after I discovered wordpress.
Before, I use table for layout as well, hahaha…
I think I’m in the second category of person. hoho.
it’s kinda annoying receving emails or questions asking me to teach them some designing. haiyoh. very the malas people.
@Bat: Actually I started to learn CSS with WP too. I used table-layout during the Frontpage days. haha
@Aisyah: ..and you’re pretty good at it. haha. for me, those ppl are not annoying if they actually tried first. right? don’t malas malas.
yeah, exactly.
anyways, this is a very good post, bebeh. ;D
Thanks for the info..
UTP kan?
Aisyah – flisterz –> bebeh?
hehe. good post there filsterz !!
I think the best way to learn something like this which not been taught in ordinary school is through experimenting it by ourself.
I remember how I have refresh the same website that I edit over 50 times just to fix a small error in css and the xhtml codes. It is time consuming, but I got experience plus satisfications when it is done.
Just like what you’ve said, when it done “stand up, run and shout around the room for few seconds to celebrate your victory” haha
nice one dude. flisterz, can you post a list on what softwares did you actually use and procedures taken to finish up a theme from scratch?
Excellent tutorial!. Thank you very much for sharing.
Recently I came through a site which offers some good designs as well. I thought may be useful to share this with you.
It is QualityFreeTemplates.com