Who among you are new to the world of Website Development? Some amateur web designers are asking how to beautify their HTML Website into a stylish design. My answer is, after your HTML project, you need to build a CSS for your website to make a style. I can say that you can’t do this if you do not know what HTML/CSS is. Okay, here’s a summary description of HTML and CSS:
HyperText Markup Language (HTML)
• Markup Language
• The predominant markup language for web pages
• Building blocks of all basic websites
Reference: http://en.wikipedia.org/wiki/HTML
Cascading Style Sheets (CSS)
• Style sheet language
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
Reference: http://www.w3schools.com/css
I am here to give you a guide on how they work on your project. The first stage in this guide is how to do HTML and secondly will be CSS processing. After learning all these languages, I am sure you will enjoy the world of Website Development! Hey! I am also here to give you a basic guide on how to conceptualize your website project 
QUESTION AND ANSWER
Question: What are the requirements before doing a website project?
Answer:
HTML/CSS Coding = Dreamweaver/Notepad/Wordpad
Designing Materials = Photoshop/Fireworks
Preview and Testing = Browsers like, Internet Explorer or Mozilla Firefox.
When you work on notepad or wordpad, you need to save your work in .html file (eg. index.html)
Question: Where should I start?
Answer: You should read the HTML Introduction on how to start your own HTML website project. Without reading, there’s no learning. Do explore, experience, and experiment.
Question: I’ve learned HTML already, now, how can I make a style on it? How do I change the color of the blue links, fonts etc?
Answer: Now, it’s your turn to learn how to code Cascading Style Sheets (CSS). I am very sure; after you’ve learned this language you will enjoy your website project 
Question: I am trying to code CSS, but nothing happens on my HTML file. What’s next step after learning both HTML and CSS?
Answer: You need to put your CSS code into HTML code. Here’s what I am talking about.
Since you have read the given links as your guide, I am going to present to you the different parts of a website page. We have actually 4 important parts of a website – the header, content, sidebar and footer. In most of the websites you visit, you will see these four major parts which are very important. Now, here is the different web wireframes that you may apply in creating your website project 
These are actually the commonly used web wireframe by the web designers. Yes, these are my major major patterns when working on my project 
Tips in doing a project:
“You will not learn everything if you are lazy in reading instructions.”
 1. Analyze first. “What category are you planning for? Is it all about personal website? Animal website? Music website? Education website? Or whatsoever…” And also, “What should I include on the site? Should it have an online shop? A login form? A contact form? And what so ever…” |
 2. Make a wireframe! You should take note of your website concept. I suggest that you put at the topmost left of your page what you want the viewers to see as your emphasis. |
 3. Choose a color theme. Maximum of three colors are enough. Make sure you choose the right color combination. Example: I’ve chosen music category and the colors which I think is good for this site is red, orange and yellow. Black background is good for this! |
 4. Think a style. When you choose music category as an example, think a style and concept that reflects to the music. It might have music notes, a band, a singer, a speaker, guitar etc. |
 5. Own copyright. Since you are a beginner, you can get some ideas by browsing different websites, and use the images as your raw materials for your website. If you think that you can build your own concept, it’s better for you to provide your own images/photos for your project so that you know that those are created by your own hands and has your own copyright |
Okay! This is the end of our lesson for this month. Hahaha! Yeah, I am posting every month. I’m sorry. But I am always online and checking your messages and comments. Just give me time to reply as soon as I am free. By the way, if you have already known this topic and you’re planning to build your blog, you can read my article about Designing a Blog. Oh yeah! Have a nice day folks
I am a 
August 23rd, 2011 at 12:06 AM
do you make theme in tumblr? if you do, where can i find it?
Reply
August 25th, 2011 at 8:07 AM
Hi Sham, I didn’t tried to make a tumblr theme but still looking for it ^_^
Reply
November 20th, 2010 at 9:48 AM
Eto na naman ako ate Sab! Ok lang ba ung design ko dito sa site namin?
PHP naman ate
Reply
November 21st, 2010 at 12:21 AM
No prob, I’ve checked it already and it looks good! Di ko lang talaga type yung Dota pero ok yung site design
Keep it up!
Reply
November 23rd, 2010 at 2:11 PM
Thanks ate! tips naman jan sa PHP ate. Meron ka?
Reply
November 24th, 2010 at 11:23 AM
Nope
For PHP, wala pa so far, pero maire-refer ko sayo yung PHP tutorial na binabasa ko dati 
Reply
October 21st, 2010 at 4:51 PM
Very informative! Thanks! JavaScript naman ate. May mabibigay ka bang super daling tutor online?
Reply
November 11th, 2010 at 10:52 AM
Hello there! Salamat
Pero I’m not into JS kasi 
Try to Google it~
Reply
November 12th, 2010 at 9:03 PM
Pnu mag edit ng error sa W3C validators??? sana mg post ka ng tutorial!!!!
Reply
November 19th, 2010 at 9:37 AM
You can edit it manually
But you can install the ‘Firebug Plugin’ for your browser as the answer to your question
Reply
October 17th, 2010 at 12:02 PM
Wow. Very helpful po, Ate.
Ang galing niyo po talaga.
More power!
Reply
October 20th, 2010 at 2:21 PM
Salamat Betina, you are one of the inspiration
Reply
October 15th, 2010 at 11:18 AM
wooh…
another informative and helpful from you ate sab
thank you
Reply
October 15th, 2010 at 11:54 AM
Thanks David! You can use it in the future projects
Reply
October 12th, 2010 at 5:50 AM
Hi Sabrina,
Manage to drop by to check out your new tutorials despite my workload. Yung “Tips in Doing A Project” is 200% correct and kailangan eto specially making wireframes. And at the end of the day constant research would also help.
Regards and keep up the great tutorials
Spencer
Reply
October 15th, 2010 at 11:56 AM
Thank you Spencer! yes, constant research is a big help and that was what I did during my noob times
Thank you for checking my tutorial once again!
Cheers
Reply
October 10th, 2010 at 12:16 AM
Wow. Great tips sabbie. I could greatly make use of this, particularly now that i am developing a system for my darn thesis. But i’m enjoying it so i guess that’s what really important. btw, i swear this would be the last time you change my link. Yes, i changed domain (again?). I would like to apologize about that. :’(. In fact you’re the only blogger i knew for a very long time so far :’)
More power sab! and thanks again for this awesome share.
Reply
October 15th, 2010 at 11:36 AM
Thank you so much! Is that you Dan? Your blog was improved! I thought it was owned by a professional blogger, good job! No problem, I’ve updated it already
WOW! Pursue it, you really amazed me 
Good luck to your darn thesis
Enjoy it as long as you are studying. It will apply to your future! More power and God bless 
Reply
October 16th, 2010 at 2:35 AM
Aws. Sorry for not mentioning my another name. Yes sab. It’s me, Dan. I don’t what’s with me why i love changing so much. :’l
Thanks Sab! You’re so great! I just think that this would be the time to be serious about our career as IT professional someday.
You inspire me a lot and it means a lot to my blog.
Reply
October 20th, 2010 at 2:20 PM
Wow, I love your words
Thank you Dan! It’s okay if you want to change anything, ganyan din ako dati. Good luck to your career/business Dan! Thank you so much 
May you have a successful future!
Reply
October 9th, 2010 at 3:53 PM
thanks for the tips ate sab!
u’r very professional talaga XD
Reply
October 15th, 2010 at 11:28 AM
Thank you Janile! How’s your school? Not professional yet, maybe someday
Reply
October 18th, 2010 at 9:40 AM
aun ate sab, na-eenjoy ko naman po kahit PRESSured!
Reply
October 20th, 2010 at 2:22 PM
Hahaha! Okay, good luck Janile
Reply
October 27th, 2010 at 10:42 PM
how ’bout you ate sab? how’re you doin’?
November 11th, 2010 at 10:56 AM
I’m fine and quite busy at work
Good luck to you studies Janile~
(I hope merong “Like” button here, hehehe!)
October 8th, 2010 at 4:45 PM
Yun oh, wireframing pala tawag don? ngayon ko lang nalaman ^_^ tawag ko kasi dun tracing lang eh
Thanks for the info! ilalagay ko nga yan sa resume ko, haha wireframing!
Reply
October 15th, 2010 at 11:27 AM
You can call it tracing naman, pero mainly wireframing
No prob! You’re very welcome here!
Reply
November 19th, 2010 at 5:41 AM
ako tawag ko margin! joke! hehe
Hey sab!
Reply
November 19th, 2010 at 9:41 AM
Hey Emil! Why not
Hehehe!
Reply