Archive for the ‘Web Design’ Category

« Older Entries

Block and Inline Usage

Wednesday, August 12th, 2009

When working with an HTML document that will be posted on the web, it is important to bring your attention on how you lay your HTML tags and how it its being used. For example, in your website, you post your web site name which is WEB STANDARD WEBSITE. So we have to use <H1> WEB STANDARD WEBSITE </H1>.

The old traditional way of marking up, we tend to use TABLE in laying out the structure of our webpage. Now they introduce DIV. Div is a markup for grouping and sorting website components that groups each website portion and function. Div is a block-level whereas a span is an inline element which can be seen and present in Adobe Dreamweaver.

Here is how it looks like in Dreamweaver:

Block and Inline element Display on Dreamweaver

Block and Inline element Display on Dreamweaver

Visually it looks like a whole block that group content.

So this is where CSS comes in to rescue, when you want your HTML tag to have a block element. #id { display : block; }

Tags: , , , , , , ,
Posted in Web Design, Web Standards, css | 2 Comments »

Learn Web Design for Free

Tuesday, February 10th, 2009

Helpful sites to get you started with Web Designing or Front-end Web Development.

I wanted to share useful sites for all the aspiring web developers and designers.

Designing

First I don’t know where to start and where to find tutorials for Web Designing.  I google around and found “pixel2life.com“it has daily updates for user submitted tutorials on Adobe Photoshop. So as I explore more on the community of Web Designing I found “PSDTUTS.com” where they have a lot of amazing Tutorials to sharpen up your skills. Then I purchased a DVD on Lynda.com to master my skills on Adobe Photoshop. Now you don’t have to read tutorials you can just watch and listen how the pros do the job.

http://pixel2life.com User submitted tutorials
http://psdtuts.com Designing tutorial
http://lynda.com Commercial Video tutorial

HTML CODING & CSS

Almost everyone who wants to start Web Development always refer to w3schools.com they have a wide variety of programming language for web. Then sharpen it up with nettuts.com with tips tricks and bug fixes. Every front-end web developer I know, checks CSSGLOBE.com for the latest updates and news on web standards. Css-tricks.com offers free video tutorials for web development and it has been very useful for people who want to jumpstart their web development carrier. Lynda.com also has a huge library for any web development programming and designing tutorial.

http://W3schools.com
http://nettuts.com
http://cssglobe.com
http://css-tricks.com
http://Lynda.com

So learning web development isn’t that expensive at all. Any sites you recommend for newbies on web development? Please post it on the comment box below

Tags: , , , , , , ,
Posted in Web Design, Web Designing Books, web development | No Comments »

Newbie Web Developers Common Mistakes

Thursday, November 27th, 2008

Last week our company had a skill test exam for front-end web developer vacancy. I sneak peek a couple designs and I found out some bad habits in their codes.

Here are the coding habits you would like to avoid.

Use the right tag for appropriate function.

vertical category list

vertical category list

Here is a bad vertical category list source code.
Example 1

Comment: overkill div tags

<div> Shop by Categories</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

Example 2

Comment: dont use heading tags on your category list

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

Example 3

Comment: update your web development skills

<div class=”shopbycategories”><font class=”shopbycategoriesText”>Shop by Categories </font></div>

<div class=”greenleftBG”><font class=”businessmgtTEXT”>Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

</font><br>

Here is the correct way presenting your source code for vertical category list

Comment: your id=”category” will now take care of the styling

<div id=”category”>

<h2> Shop by Categories </h2>

<ul>

<li><a href=”#”> Business and Management</a></li>

<li><a href=”#”> Business and Management</a></li>

<li><a href=”#”> Business and Management</a></li>

</ul>

</div>

Remember you are coding for a vertical category “list” so you might as well use list tag and make use of li tags.

Tags: , , , , ,
Posted in Web Design, Web Standards, css, web development | 9 Comments »

Optimized Css Text Gradient

Wednesday, November 19th, 2008

Front-end web developers always want to find ways to optimize your HTML and CSS code. I saw a post on Cssglobe.com by Alen Grakalic about CSS Text Gradient and it opened me the idea about CSS Text Gradient. So maybe I can have this look gradient without using a transparent gradient PNG file. Bestwebbuzz.com presents text gradient without transparent gradient PNG file. This is how it works.

css gradient

css gradient

CSS
h2 {
 font-size:250%;
 color:#0079b6;
 font-weight:normal;
 letter-spacing:-.05em;
 margin:.6em 0;
 position:relative; 
 font-weight:bold;
}
h2 span{
 position:absolute;
 display:block;
 top:0;
 left:0;
 height:60%;
 width:100%;
 background-color:#FFFFFF;
 filter: alpha(opacity=65); /*     <—-this part do the magic——*/
  -moz-opacity: 0.65;/*       <—–this part do the magic———*/
  opacity: 0.65;/*          <—-this part do the magic———-*/
}

HTML
<h2>My Cool Title<span></span></h2>
<h3>My Cool Title<span></span></h3>

You can download the demo file here demo

I would like to thank Alen of cssglobe and Virgil of jampmark.com for the idea and concept.

Tags: , , , , , , ,
Posted in Web Design, Web Standards, css | 14 Comments »

Highlighting different link types part 2

Wednesday, October 22nd, 2008

Highlighting Downloadable documents and feeds

Another common frustration is clicking on a link thinking it is going to take you to a page only for it to start downloading a PDF or Microsoft Word document. Luckily, CSS can help us distinguish these types of links as well. This is done using the [att$= val] attribute selector, which targets attributes that end in a particular value, such as pdf or .doc:

Example:

a[href=".pdf"] {
background:url(images/pdflink.gif) no-repeat right top;
padding-right: 10px;
}
a[href=".doc"] {
background:url(images/wordlink.gif) no-repeat right top;
padding-right: 10px;
}

So in a similar way to the previous examples, you can highlight links to word documents or PDFs with their own separate icon, warning people that they are downloads rather than links to another page

Lastly, many people have RSS feeds on their website well specially blogs like WordPress. The idea is for people to copy these links into their feed readers. However, inadvertently clicking one of these links may take you to a page of seemingly meaningless data to avoid possible confusion. You could highlight RSS icon:
a[href=".rss"] {
background:url(images/rsslink.gif) no-repeat right top;
padding-right: 10px;
}

Tags: , , , , ,
Posted in Web Design, css | No Comments »

« Older Entries