Wednesday, May 2, 2012

Going Beyond the Basics

Indeed, understanding HTML and CSS are the two languages you absolutely do need to get started on your way to becoming a webmaster. However, there are other languages too, and I’ll mention them here and highlight their usefulness so that you know when you need each one and when to go for it.

According to Stefan Mischook, a reputable webmaster and owner of Killersites.com, What to learn (as of 2011-2012) – in order of priority include:

1. HTML
2. CSS
3. PHP basics
4. JavaScript
5. JQuery
6. Wordpress
7. OOP PHP (for programmers only)
8. HTML 5 and CSS 3
9. IPad / iPhone (choice of either: Objective C or HTML 5 + CSS 3)


My Comment


To simplify this: you do not need to learn and understand all of the above listed languages to become a webmaster. For an informational site with just Home, About and Contact menu, learning HTML or CSS, may be all that you need.


For a site with interactive features such as dynamic menus, Slide shows, Shopping carts, Forums and contact forms, etc. you’ll have to go beyond web page design to learning programming languages like JavaScript, JQuery and PHP. I am presently working on these triplets.


So I’m assuming our goal is to learn how to build dynamic websites and that’s where the fun and money is. I therefore suggest you organized your learning in the following order:


HTML


This is the foundation of any site – you have to learn HTML. Much has been said about this.


CSS

CSS is the sister language to HTML: where HTML provides the structure, CSS provides the style.

JavaScript

JavaScript is the programming language used in web browsers … it compliments PHP and is a 100% must learn language. Like PHP, so many things that we expect in websites today rely on JavaScript.

JQuery

JQuery is a Javascript library. It is the de facto standard when it comes to creating effects on your web pages. Such effects as:

· Sliders

· Dynamic menus

· Slide shows, etc… JQuery is helping to replace Flash.

Wordpress

Wordpress is the most popular blogging engine / content management system (CMS) out there. Many websites are built entirely out of Wordpress because using Wordpress automatically gives a website a whole bunch of capability for free:

· Built-in search

· Ability to add images, mp3’s to pages

· Ability to edit and create new pages with no web skills, etc ….Wordpress does much, much more.

Note: You may also consider learning Joomla as well.

PHP Basics

PHP is the most popular Web programming language out there. PHP is used by millions of tiny sites and on mega web sites like Facebook. As a web professional, you need to learn at least basic PHP because so many standard things that people want on websites are built with PHP – for example:

· Shopping carts/e-commerce systems.

· Blogs and content management systems.

· Forums and contact forms.

My List of Best Free Web Design Tutorial Sites on the Web

Having been around on the internet for a while now…trying to teach myself web design, I’ve kept track of some of the best tutorial sites that have helped me greatly. I have therefore presented them here for you.

Before you dive in, understand that becoming a web designer is a step-by-step process—you’ve to crawl before you walk and then run, so you don’t have to learn it all at once.

So start by…

4.1 Understanding the Basics of Web Design

What is referred to as the basics of web design here are a few preliminary information you should be acquainted with before you plunge in fully. This is important as they introduce you to the field of web design proper and also help you to build a solid foundation for the next stage of your learning.

This includes such things as: domain name, web host, color theory, layout and good design principles. The under listed sites give you this firm foundation:

http://www.websitedesignbasics.com/
This site helps you learn the principles of building successful websites—everything ranging from colour theory, to typography, to layout tips, and much more.

http://www.webdesignfromscratch.com/category/basics/
Web Design from Scratch is owned by Ben Hunt—one of the big names in the web design world. This site features tutorials that give you wonderful insights into the core thinking that supports the design of effective and usable web sites.

http://2planawebsite.com/
2 Plan a Website is one of my favourite websites owned by Lisa Irby. If you can absorb the preliminary information on this site, you will have a huge advantage because most people rush and don't take the time to plan and educate themselves before they begin.

http://www.2createawebsite.com/
2 Create a Website is another of my favourite website—also owned by Lisa Irby. If your goal is to make money with a website or blog, absorb the content on this site like a sponge.

 http://www.webpagesthatsuck.com/
Web Pages that Suck is a website that collects and displays a list of poorly designed websites on the internet. You can learn good web design by looking at the bad ones.
 http://www.thesitewizard.com/gettingstarted/startwebsite.shtml


The Site Wizard is really intended for the beginner and layperson, taking you step by step through the whole process from the very beginning.


This should be okay. Now, let’s move on to…


4.2 Learning HTML: The Building Block of Web Design


HTML is not really difficult to learn. It’s just that there are so many things to learn. Fortunately, there are also a whole lot of resources that help simply the process.


With HTML you can create your own Web site. These tutorial sites are the best you can ever get on the internet. They teach you everything about HTML. They are free and you will enjoy it.


· http://www.w3schools.com/html/


· http://www.html.net/tutorials/html/


· www.htmldog.com


· www.htmltutorials.ca


· www.htmlbasictutor.ca


· www.expression-web-tutorial.com


4.3 Learning How to Apply CSS to HTML


The following websites give you all you need to learn and master CSS for free.


· www.html.net/css


· www.w3chools.com/css


· www.htmldog.com/guides/cssbeginner


· www.cssbasics.com


· www.htmlgoodies.com/beyond/css


· http://www.csstutorial.net/


· www.positioningiseverything.net










4.4 Taking Advantage of Web Design Forums


With online web design communities, you can never get stuck. Once you post your problem or difficulty in these forums, you are sure of getting useful suggestions almost immediately. All for free.


Take out time to visit each. Read the rules and abide by them. Read up on others’ post and suggestion. You’ll find a gem of solutions to your own situation than you can get in any web design school. Serious!


· www.websitebabble.com


· http://tnbforum.com


· www.webdeveloper.com/forum


· www.webdevforums.com


· www.killersites.com/community/






4.5 Top Web Design Video Tutorial sites


There are only a few websites on the internet where you can really find complete free quality downloadable video tutorials on web design.


Here are 3 of my favourite sites where you can download a full course tutorial:


· www.1stoptutorials.com


· http://thenewboston.org


· www.phpacademy.org






Whereas the ones below are devoted to video tutorials in general, a quick search with the search box, will surely lead you to links containing answers to your query:


· www.youtube.com


· www.nettuts.com


· www.tutvid.com


Note: I recommend Youtube among the four sites above. There’s no topic you can think of that you can not find on youtube. By simply typing a keyword on the site’s search box, you’ll get a lot of useful tutorials than you can harvest.

How to Learn and Master Web Design Fast

Tip 1: Learn Best Web Design Practices

Learn about the aesthetics of good web design. This means you'll learn what looks good and why. It also means you'll know why certain fonts, colors and layouts are not good for web design. Always know the rules before you break them. This is your foundation. Lisa Irby did some good job in highlighting these basics at: www.2planawebsite.com. Do check out this site by all means.
Tip 2: Learn HTML: The building block of web design
HTML stands for Hypertext Markup Language. It’s not really difficult to learn. There’s a lot of software out there that claim to help you build websites without having to know how to code your site from scratch.
However, learning to build your web sites using HTML (code) will give you far better control over the process and ultimately your web sites. You will have a far deeper understanding of the web, and as a result you will create better web sites.
See chapter 4.2 for details.

Tip 3: Learn to apply CSS to HTML pages
While HTML is the building-blocks of web pages that allows you to put images, text, videos, forms and other pieces of content together into a website…
CSS (Cascading Style Sheet) dictates your website’s look and feel. Font size, font color, font type, styling around images, page layout, mouse-over effects and more are all determined by CSS in a more flexible way.
Note that you can also add font size, colour, font type, images and so on using HTML, but it is tedious and frustrating and CSS was invented to make it easier. See chapter 4.3 for details on this.

Tip 4: Video tutorials make your learning easier
Like I pointed out earlier, video tutorials are preferrable for the complete novice as you’ll get a real life demonstration of the teaching than in books or articles. Invest in video tutorials. The money it will cost you is far less than what you will pay if you go for a web design training, yet they are excellent guides because they are often prepared by real professionals.
Tip 5: Get a couple of books on web design for beginners.
Even though video tutorials seem to be better off for beginners, however articles and books or ebooks are  also important as they are usually more detailed. Get as many books as you can lay your hands on. It’s an investment that pays off at end.
Tip 6: Take advantage of Online Web Design Forums
There are a host of web design communities online with real people, most of whom are experts and professionals in their rights, willing and ready to offer a helping hand to newbies free of charge. I received a lot of support from these communities. And good enough, membership is always free. Some of my best of these communities are feature in chapter 4.4
Tip 7: Consider how deeply you want to get involved
The field of web design is relatively vast. There are many aspects to web design. It is important to decide from the outset how far you want to go. If you want just a basic knowledge, then HTML and CSS may be all you need. But should you want to make a career out of it, see Chapter Five—Going beyond the Basics for details.
Tip 8: Set aside at least 3 hours from your day to learn and practice
I said earlier that web design involves hard work. I suggest you spend an average of 3 hours every day in learning and practicing if you want to learn and master it fast.
Tip 9: Using Text Editors like Dreamweaver simplifies your life
Text or HTML Editors are programs that help you to do your website coding—an example of which is Dreamweaver. I recommend it because it has an inbuilt functionality that auto-suggests or auto-completes code writing. And this makes the process easier and fun. I love it.
Tip 10: Take note of websites whose looks and fill you like
Taking note of websites whose layout and design you like and studying them is a good practice. By finding out how they are laid out, you’ll be on your way to laying out better pages.
Tip 11: Study the HTML codes of web pages that catch you fancy
How do you find out how web pages are laid out? By studying the HTML codes. You can get to the HTML code of a website by: one, going to the View menu of your browser and selecting Page Source in Mozilla Firefox, or View and then selecting source in Internet Explorer.
Two, simply right-click on the web page and select View Page Source in Mozilla Firefox, or View source in Internet Explorer.
Tip 12: Try to duplicate websites you like
Having known how to get to the source code of a website, always attempt to duplicate any website whose layout you admire. What this does is that it helps you to internalize the process. I earlier said that imitation is the way to go in web design. Don’t despise this tip.
Tip 13: Learn a little of graphics design
As you get familiar with the terrain, the next logical step to take is, of course, to begin to put up stunning sites. But at that point, you’ll discover that there’s something missing: you need graphics. So you see, you need to learn how to design using any of Coral Draw, Photoshop and Firefox. Graphics is a necessary makeup for web pages. However…
Tip 14: Use images sparingly
Only use images when and where it is necessary. Using images indiscriminately will not only make your website look stupid, but also slow down the loading speed.
Tip 15:  Make Google your greatest companion
With Google, you’re just a click away from getting what you want, especially when you do know what you really want. Always Google whatever it is you want to do or learn about, and chances are that your problem is already taken care of by someone, somewhere.
Tip 16: Don’t stop learning
The web design world is dynamic and new changes as a result of new technologies are being introduced every now and then. So don’t stop learning; keep yourself abreast with trends in the industries.
Tip 17: And don’t give up.
Everything is going to sound Greek the first time and your natural reaction would be to quit. Be informed! That is rather when you should buckle up. It becomes an easy route after this initial challenge. Promise!

Web Design And Development Tools

Here’s a brief presentation of the tools you need to make a website:

1. A Browser: A browser is the program that makes it possible to browse and open websites…As you develop your website you’ll need a browser to constantly view it so as to see how your finished product will look. Internet Explorer and Mozilla Firefox are two of the more popular options

2. A Text/ Code Editor:
This is a program where your website coding is done. While any text editor can be used to create this code, some make the process easier. Examples of text editors are Notepad and Dreamweaver. If you are using Windows you can use Notepad, which is usually found in the start menu -- Programs -- Accessories.

3. Web Languages: You’ll need to learn and understand some basic web design languages such as HTML and CSS to do well as a web designer. See chapter 5 for a list of these languages in their order of priority.
4. Graphics Design Tools: Graphic design is one of the major activities normally involved in Web design. Web designers often create custom images, illustrations and visual elements to enhance the appearance of a site. Photoshop, Fireworks and Coral DRAW are programs used by professionals. Learning to use these tools is an added advantage.

Design by The Blogger Templates