Author: Host

The Basics of Web Design – Learn to Apply Small Tweaks

If you want to learn the basics of web design, then you’re on the right place. We are going to help you learn some basics of web design and by that, we won’t go into any kind of theory, just the very basics so that you can apply small tweaks by yourself without calling your web designer to do a simple color change that’ll cost you $10. I’m sure you are eager to learn, let us begin.

CSS Selectors

The very first thing that you need to learn is using CSS selectors. Without knowing how to use these CSS selectors, you won’t be able to do anything. The first kind of selector is the element selector; this is the simplest of all because this selector targets a particular HTML element. Below, we used an element selector targeting the <p> tags or all paragraphs and telling the browser to align all paragraph texts to center and color them red. Take note of the semi-colon, that means your rule ends, for example, you set a rule for “text-align” then put a colon and place the rule value, which is “center” and end it with a semi-colon to tell CSS that it ends, apply it now. If you don’t put a semi-colon at the end of your rule, things will get pretty messed up.

p {

text-align: center;

color: red;

}

 

In a nutshell, we do this: “selector {property: value;}”, and the indentations are there for the sake of readability, but you don’t have to put them at all, but of course, it’ll be easier to read than this one:

p {text-align: center;color: red;}

 

Now that you learned how to use the simplest selectors and how to apply rules, let’s move on to the next type of selector: the id selector.

#para1 {

text-align: center;

color: red;

}

 

As you can see, everything is the same except for the #para1, which is what you call an ID. The ID selector is the attribute of a selected HTML element. Remember that an ID is tied to a single html element. No two html element has the same id, even if they are of the same tag. Now, let’s move on to the last, the class selector.

.center {

text-align: center;

color: red;

}

 

As you can see, instead of a pound sign, it used a dot as a selector. Class applies to elements with a specific class attribute. Unlike the id selector, a class can be applied to many HTML elements. Another use of class is here:

p.center {

text-align: center;

color: red;

}

 

The example above will apply the rules only to those <p> elements of class center. That’s it! You have the very basics. To learn more, go to W3schools.

Why Web Design is Important?

In the early days of the internet, only few people were able to access websites because of the costs of a personal computer and bandwidth. Therefore, ancient websites aren’t really designed to be pleasing to the eye; instead, they are designed to look like a simple Word document, with hyperlinks to enable easy navigation and document switching. However, as time passes by and personal computers became cheaper and cheaper and bandwidth becoming faster and faster, website developers started to improve how websites look. They began adding stylesheets to a webpage to add colors, change font face and font size or in other words, beautify them. But the most beautiful website of early 2000s looks like a prehistoric website nowadays.

Today, there are several technologies used in developing a website. There is JavaScript, a scripting languages used to add interactivity to websites and it also plays a role in designing a website. There are many JavaScript frameworks developed within the past couple of years, one example is jQuery that adds a lot of interaction and design tweaks to a website. Then, with the combination of HTML5 and CSS3, responsive websites can be designed and created, even without the need of scripting language. You can create a simple interactive website by maximizing HTML5 and CSS3 and not worry about JavaScript, PHP, Ruby or ASP.net slowing your website.

Now, that you have a very brief history of websites and their designs, let us discuss why web design is important.

Your Business is Your Website

If you are going to setup a website for your business, then your business is your website. That means you have to create a good looking, professionally designed website in order to cater to your customers. As you’ve learned on our earlier paragraph, websites in the “ancient” history of the internet are just simple. That means they only have to inform a user about something or in other words, they are static. They are just like an online flier that conveys information to uses.

But since the internet evolved and websites were created for all sorts of purposes, their complexity and design were also increased multiple-fold. A website today isn’t just about a webpage with bunch of texts, images and videos. They consists slides, web forms, interactive images, image maps and more. They are more than just static websites; they are your business interacting with your potential clients or customers.

Therefore, a good website design will tell your “online business” apart from competitors. It will be your advantage if you’re able to provide an excellent website design that can provide an excellent user experience to your audience, customers or clients. By deploying an excellent web design, you will improve your professionalism and credibility to your clients.