Learnt By Me - Summing up everything I've learned

 
Javascript Developer

Basic Rules of Web Coding - HTML

A generalized introduction to good coding practices - Beginner

The Three Musketeers of Web-Development

HTML
CSS
JavaScript

The famous 3

Web development is impossible without these three and you can never brag to your friends that you are a web developer with out mastering these three. These are the basic building blocks of web development and they form the foundation of the web or the Internet, as we know it. This article covers the basic things about these three technologies and some very important rule of thumbs to follow while coding a web page.

HTML

Hyper Text Mark Up language is a tag-based mark up language, which is interpreted by the browser to display the content inside. The browser does not display the tags as such but interprets or understands what the tags are saying and displays them accordingly. All the tags are enclosed within angle brackets (< > </ >). HTML tags mostly come in pairs (<p > Some Content to Display </p >) although some tags known as empty tags don't have a closing tag e.g. "<img>" tag

The browser reads the tags and then displays the content inside the tag accordingly for e.g. if it's a "<p></p>" tag then the browser will under stand that it's a paragraph and will display the content inside like a normal paragraph.

Since the scope of this article is "Good coding practices" am going to skip the intro and move onto the real thing.

Choose the Right Tag (Semantics)

The browser interprets the tags not the content, every tag has a meaning and usage follow those simple rules to have a semantic code for e.g. don't use a <div> element instead of a <p> element. Divs are block elements, they are not meant as a replacement for <p> tag, when you put a <p> tag for a Paragraph the browser automatically understands that the content inside is a paragraph and treats it accordingly, with the standard paragraph formatting, like having a line break at the beginning and some uniform space around the paragraph etc. But when you use the div element instead then is no formatting and the content is displayed as is with just a line break at the beginning (as div is a block element) according to the box layout.

<p>Some Content</p> <div>Some Content</div>
Output Output

Following the semantic structure would not only make the code look more legible but will also save you from the unnecessary CSS you would write to format it yourself.

If the browser can do it better so be it.

Use Less tables

The most common mistake most beginners commit is to rely too much on tables. They seem so easy to build and you can get the layout you want by just specifying a <tr> and <td>, and this would look a lot easier than achieving the same layout with Divs. However using more tables will quickly make the code too deep (many levels inside) and you will have a very hard time figuring out your own code should u come across any layout issues. Plus the Table need more tags than a div for e.g. a proper table would need a <table></table> tag, <tr></tr> and <td></td> however a Div would need only one <div></div> tag, this would reduce the number of lines of code and the number of DOM elements and would help the page load faster.

Don't use those ugly HTML generators

Its ugly, its mean and its so very bad. I don't have anything against the complicated html generators but those complex pieces of software are yet to be perfected. They will never match the awesome and the complex thing in the universe - your brain. Believe me with little practice you can finger out a better, sleeker, faster code than the most amazing HTML generator on the planet.

They just can't think like your amazing brain.

Use less images

The more images you use the more heavy your page would become, use CSS instead of images with solid background colors .If you are an appatakkar (one who knows all) use SVG they are the most coolest thing to have in a web page.

Images are like French-fries - tasty but not so healthy

Fall in love with SVG (Vector Graphics) or Canvas

If HTML is wonderland then SVG is your magic wand. SVG or scalable vector graphics gives you so much power that you can do wonders literally wonders. You can take HTML to the next level. The coolest tag of HTML5 the <canvas> tag was inspired by SVG. I hope you are confused about my sudden use of jargon terms, let me clear the air.

SVG or Scalable Vector Graphics is a W3C specification to draw 2d graphics on the browser; basically graphics are of two types Raster and Vector.

  1. Raster graphics image, or bitmap, is a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats)
  2. Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics. "Vector", in this context, implies more than a straight line

Since SVG uses Vector graphics they can be edited on the fly using JavaScript and can even have regular events like onclick onmouseover etc. best of all they can be scaled to any size with out loosing out on quality.

Safe in Fort-8

If you are out there in the wild Internet your fate can be determined in just 8 seconds. If your site doesn't say "Done" within 8 seconds from hitting the URL, May your site Rest In Peace. Just kidding am not trying to be scary but loading your site in 8 seconds is really important and we humans lack patience when its comes to waiting especially for web pages thanks to Google and many other big daddies of the internet.

I your site is a heavy one then may be you can use some techniques to make your site appear to load faster, like having a lightweight home page or putting all the JS files at the bottom, so that they will load after the page and using SVG instead of images etc.