10 TIPS  FOR HTML & CSS CODING

Today we live in a multimedia world of websites, social media,chat sessions, newsletters etc. These digital journeys have changed the way we interact with companies and products. Since the...
10 TIPS  FOR HTML & CSS CODING

Today we live in a multimedia world of websites, social media,chat sessions, newsletters etc. These digital journeys have changed the way we interact with companies and products. Since the commercialization  of the web , web development has been a growing industry. The growth of this industry is being ddriven by businesses wishing to use their website to sell products and services to customers.

Web development is hence divided into 3 parts :-

  1. Client side scripting , which is a program that runs in a user’s web browser.
  2. Server side scripting, which runs on the web server.
  3. Database technology, which manages all the information on the server that supports a website.

 

CLIENT SIDE SCRIPTING :- This include two languages as its backbone , HTML and CSS.

HTML & CSS

These  are the two most basic web development languages and are used to build nearly all webpages on the internet.

HTML

Always close your HTML tags

When you type an opening HTML tag (e.g. <h1>, <p>), always place the corresponding closing tag at the end. For example:

o             <h1>My first web page.</b>

o             <p>My favourite color is red.</p>

 

This will ensure that your HTML pages work properly on all browsers, and will help to prevent any strange problems occurring in your pages!

  1. Use a coding standard

It’s easy to write bad, unorganized code, but it’s hard to maintain such code. Good code typically follows some standard for naming conventions, formatting, etc. Such standards are nice because they make things deterministic to those who read your code afterwards, including yourself.

 

 

 

  1. Write Useful Comments

Useful comments make life easier for yourself and those after you who have to maintain your code.

  1. Declare the Correct DocType

“The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup.”

  1. Never Use Inline Styles

When creating your markup, don’t even think about the styling yet. You only begin adding styles once the page has been completely coded.

  1. Place all External CSS Files Within the Head Tag

Technically, you can place stylesheets anywhere you like. However, the HTML specification recommends that they be placed within the document HEAD tag. The primary benefit is that your pages will seemingly load faster.

  1. Consider Placing Javascript Files at the Bottom

The primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can’t continue on until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.

  1. Wrap Navigation with an Unordered List
  2. eg) <ul id=”nav”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

 

  1. Logical ordering

If it is at all possible, keeping the sections of your website in a logical order is best. eg) The footer section should always be the last thing in mark up.

  1. Don’t use multiple line breaks

The line break tag of <br /> should only be used to insert is single line breaks in the flow of paragraph text to knock a particularly word down onto a new line. It shouldn’t be used to make gaps between elements, instead, split the text into separate paragraphs, or adjust the margin styled by CSS.

Wrong:

 

This is a line

<br/>

<br/>

This is another line.

 

Right:

 

<p>This is a line</p>

<p>This is another line</p>

 

CSS

1 Getting Started

Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.

 

  1. Organize your CSS-code

 

“Organizing your CSS helps with future maintainability of the site. Start with a master style sheet.

 

  1. Separate code into blocks.

 

It’s easy to do and it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change.

 

  1. Isolate single properties that you are likely to reuse a lot

 

If we  use a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.”

 

5.Group selectors with common CSS declarations.

 

Group selectors. When several element types, classes, or ids share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots

 

6.Always declare margin and padding in block-level elements.

 

7.Use universal character set for encoding.

 

The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode.

 

  1. HYPHENS INSTEAD OF UNDERSCORES

Older browsers like to get glitchy with underscores in CSS, or don’t support them at all. For better backward compatibility, get into the habit of using hyphens instead. Use #col-alpha rather than  #col_alpha.

 

  1. OPTIMIZE FOR LIGHTWEIGHT STYLE SHEETS

Cut down the size of your style sheets. Smaller loads faster, and smaller is easier to maintain and update.

  1. KEEP A TEMPLATE LIBRARY

Once you’ve settled on a structure to use, strip out everything that isn’t generic and save the file as a CSS template for later use.

Categories
Tech

UI/UX DEVELOPER| Author at Anantsoftcomputing.com
No Comment

Leave a Reply

*

*

advertisment

RELATED BY