Web Design Basics: Intro

On this post we’ll be talking few essential things about web design.  Before we begin to look on web designing, there is always a need to know the place to kick-start from. Basically, we need two things to be looked for, first is the language, which obviously the HTML and CSS (not a language exactly) and the tool that will help us reach our target.

The Language

The very base of web design is HTML4 (HyperText Markeup Language, version 4)  as a starter. HTML, basically a markup language that helps to place or arrange the data we wish to. But now HTML5 is round the web because of its dynamism. Then, CSS (Cascading StyleSheet) follows. The name suggests that its for styling which can be applied using ‘class’ and ‘id’ attribute of HTML tags. Currently, CSS3 is being used all over and major browsers does support (except few things in Microsoft IE).

The Tool

Tools, the interface with which we are going to make our web designing task. For this, we have lots of tools available free and as well as paid. The tools we will need are (a broad view):

  • any Text editor
  • an image editor
  • a on-the-fly debugging tool

Text editor will be used to create ‘.htm’ or ‘.html’ files that will contain our HTML and CSS. Further, with this file we will be able to view our final output/ result of our code.

For Text Editor, we can use ‘Notepad’, that comes with Windows OS or we can download ‘Notepad++‘ for free. I will recommend Notepad++ for writing HTML as well as CSS code. The one big advantage in Notepad++ is it’s support for multiple language in one editor that too for free 😉 . For a little higher level of programming or coding I use Aptana Studio 3, its simply great to use it for multiple programming languages and also for its line-by-line auto assistance on warnings and errors.

Next thing, Image Matter; images are one of the feature that captures anyone’s attention. So, clean, descriptive, appropriate images/ icons will give our HTML page a hype (a good one indeed). To make that happen, I would recommend to use free images that are available online for our trial and error web page(s). Or if you know any of the image editors to use, I would recommend Gimp image editor which is free to use. Else if you know software like Adobe Photoshop, Adobe Fireworks, etc. then its well and great to use them for image/ icon creation.

Now, debugging tool, there is only one and best tool in this category is ‘Firebug‘. This can be installed as a plugin for Firefox browser. You can also find something similar to this comes with Google Chrome browser by default; but you have to get practiced to use the later one.

On my conclusion, the above said language and tools are the very basic steps on which to be stepped onto for a start-up web design.

Finally, thanks for reading the blog, and as usual, I’m open to suggestions and critics (positive of course). Do comment on! 🙂


Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.