Configure .htaccess file

When we are going to launch website, then It's good to configure .htaccess file for some redirecting facility, fixing canonical issue and calling 404 Error Page and upload this file into main root of your server.

Also you can include gzip compression, Leverage Browser Caching code in .htaccess file for fast loading your website.

So, here is what, i am telling you some important redirection and fixing canonical issue.

1:) Canonical Issue: For redirecting your non www website to www, include below code.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain-name\.com [NC]
RewriteRule ^(.*)$ http://www.domain-name.com/$1 [L,R=301]  [301 permanent Re-direction]


2.) Redirect your Home Page to the Domain: It's good to crawl your Domain, as a Home Page of your website for getting more attention of search engines.

HTML

RewriteEngine On
  Redirect 301  /http://www.domain-name.com/index.html  http://www.domain-name.com

PHP

RewriteEngine On
   Redirect 301  /http://www.domain-name.com/index.php http://www.domain-name.com

ASP.NET

RewriteEngine On
  Redirect 301  /http://www.domain-name.com/default.aspx http://www.domain-name.com

OR

RewriteRule ^index\.html$ / [NC,R,L]


3:) Calling 404 Page: If any web address you want to visit, doesn't exist, then 404 error page comes.

ErrorDocument 404 /404.html

ErrorDocument 404 /404.php


4:) Enabling gzip Compression: GZIP compression, is based on lossless compression method for compressing text data in websites, which is good for speeding up your website.

You can take code from : https://gtmetrix.com/enable-gzip-compression.html


5:) Leverage Browser Caching:  This procedure stored your website file in the visitor browser locally and creates browser cache, which helps for reducing load time of your website.

You can take code from : https://gtmetrix.com/leverage-browser-caching.html

Responsive Web Design : Mobile Friendly Website's : Web Apps

Now a day's, with unpredictable growth of smart-phone users, it becomes necessory that your business website should be mobile friendly to track more users and users can easily access your business website anywhere, anytime.

First talk about the term "Responsive" = Responsive means, you can see dynamic changes according to the device width in your website/layout.

Responsive = Responds according to the device width.

For making website responsive, you need to include viewport meta tag under the header section.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable="no">

viewport: Give instruction to the browser for the dimension of width.

width=device-width: width varies according to the different screen resolutions. 

user-scalable="no": User could not play width the website by zooming out or zooming in.

Now, there is basically 2 ways to make your website responsive.

1:) CSS3 Media Queries : CSS3 introduce media queries, which helps you to assign particular css for particular width.

Tab Standard Width: 800px*1024px

Mobile devices width varies according to mainly brand names.

Generally Mobile Portrait width stands below 480px and Landscape width stands below 768px.

By the way it totally depends on the UI Developer, which width they personally prefer for making mobile friendly websites.


2:) Using Twitter Bootstrap: Bootstrap works on " Mobile first ". Purpose of behind developing a bootstrap, is your website should be mobile compatible.

Bootstrap Classes: Works on 12 grid structure.

col-lg => Greater than 1200px => Full HD { Large }

col-md => Varies 960px to 1200px => Desktop { Medium Layouts}

col-sm => Approx 768px => Tab { Small Layouts }

col-xs => For Mobiles { Extra Small Layouts }

You can know brief about Bootstrap from: 

http://www.w3schools.com/bootstrap/
http://getbootstrap.com/
http://bootsnipp.com/
https://bootswatch.com/
http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description

3:) Using INK Framework: Here is another framework introduced "INK", similar to Bootstrap, which is used for making Responsive Websites Quickly using HTML, CSS and JS Structure.

INK works on 12 grid structure similar to Bootstrap.

Ink follow below classes:

• tiny for screens widths up to 320px.
• small for screen widths between 321 and 640 pixels.
• medium for screen widths between 641 and 960 pixels.
• large for screen widths between 961 and 1260 pixels.
• xlarge for screen widths above 1261 pixels.

You can know brief about INK from:

http://ink.sapo.pt/

http://ink.sapo.pt/ui-elements/

http://ink.sapo.pt/javascript-ui/

Biggest Challenge : Browser Compatibility Issue's

Now let's cover this topic. Which is a one of the important topic, while we are talking about FRONT-END ENGINEERING.

Generally Firefox and Chrome does a great job while implementing HTML elements and CSS properties but IE doesn't.

Browser Compatibility, means your layout which is good on Chrome, may be some feature of that layout have distorted on Mozilla or IE, due to the unsupported HTML element or unsupported CSS property.

Generally i have used these method for dealing those issue's.

1:) HTML5Shiv JS: created by Sjoerd Visscher, which enables styling of unsupported element of HTML 5 on IE version prior to 9.

You can take this file from: https://cdnjs.com/libraries/html5shiv/

Way to use:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>

2:) Using Conditional Comment: Only for IE, here is one concept, which helps you for rendering your website in a right way is, Conditional Comment, within Conditional Comments, you can use special css instructions, which works only on Conditional Comments.

Below are the Syntax:

<!--[if IE 6]>
According to the conditional comment this is for IE 6
<![endif]--> <!--[if lte IE 7]>   According to the conditional comment this is IE lower or equal to 7 <![endif]--> <!--[if gte IE 8]>    According to the conditional comment this is IE 8 or higher<br /> <![endif]--> <!-- [if (gt IE 5)&(lt IE 7)]>    The AND operator. Returns true if both condition satisfied. <![endif]--> <!-- [if (IE 6)|(IE 7)]>    The AND operator. Returns true if both condition satisfied. <![endif]--> 3:) CSS Hacks : When you need to target some particular browser only then you can go for it. For Chrome: @media screen and (-webkit-min-device-pixel-ratio:0) {       // Instructions       .selector/#selector{property:value;} } For Firefox: @-moz-document url-prefix() {      // Instructions       .selector/#selector{property:value;} } For IE: IE 10 & IE 11 for below versions, use conditional comments structure. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    // Instructions   .selector/#selector{property:value;} }

JS & JQuery

After taking discussion about Webpage Structure ( HTML5 ) , Webpage Styling ( CSS3 ),Now it's time to talk about Webpage Functionality.

Yes..!! JS & Jquery used for the Functionality/ Behavior of Webpage.

Javascript support camel casing format and case-sensitive language, has the predefined structure.

Javascript can be written in <head></head> & <body></body> Section in the HTML document using the <script></script> tag.

Both Languages controls the behavior of HTML elements and have ability to manipulate DOM, which is known as Document Object Model.

Both languages embedded on most of the webpages and widely used programming languages works only on the objects.

Both languages follows the concepts of OOPS. There are no such keyword like class, as java has.

Classes are UNDEFINED in JS. if you write anything with Keyword class then browser console will show you UNDEFINED as a result.

Javascript is a programming language whereas jQuery is a Library of javascript. Which helps ui developer's to use built-in standard methods for impressive UI effect's.

Built-in standard function are:

hide(), slideUp(), slideDown(), fadeIn(), fadeOut(), fadeTo(time, opacity), slideToggle(time), prepend(), append(), css(), html(), text(), val() and many more.


JQuery Basic Selectors:

$("*") => Select all html elements.

$("this") => Select Current object.

$("p.intro") => Select element p, having class intro

$("#abc") => Select that element, having abc as a ID.

$(".abc") =>  Select that element, having abc as a CLASS.

$("ul li:first") => Select first li of the first ul.

$("ul li:first-child") => Select first li of every ul.

Dollar ($) Sign, is just a label for jQuery.

Useful Links:

http://www.w3schools.com/js/
http://www.w3schools.com/jquery/
https://plugins.jquery.com/
https://jqueryui.com/
http://www.elevateweb.co.uk/image-zoom/examples
Sliding Navigation

CSS & CSS3

Now after taking Quick Intro about the WEB PAGE STRUCTURE, Let's talk about the WEB PAGE STYLING..??

Webpage Styling simply indicate about the CSS and CSS3, which is used to give proper style and enhance the look and feel of the webpages.

CSS played a very important role in FRONT-END ENGINEERING.

CSS provide powerful control over the presentation of HTML document.

CSS defines Styles Rules, which is used by the browser first, then applied to the corresponding element.

Styles Rules Defines:

Selector: is an HTML tag, on which we want to apply style.

Property: is a simple CSS property which allowed styling for an HTML tag.

Value: assigned to properties for controlling HTML Tag.

Example:

table{border:1px solid #000;}

table } is a HTML Tag or Selector.

border } is a CSS property.

1px solid #000 } is simply a value to property.

CSS Declaration:

Usually we declare CSS under the <head></head> Section.

External CSS:
<link href="css/style.css" rel="stylesheet">

Internal CSS:
<style> a{text-decoration:none;} </style>

Inline CSS:
<a href="www.chiragwebmaker.com" target="_blank" style="text-decoration:none;color:#000;font-size:16px;">www.chiragwebmaker.com</a>

There are so many properties of CSS, which have powerful control for the standard structure.

Like: Floating Elements, Display Property, Clear Property, Position Properties, Z-index etc.


Now Turns to CSS3:

CSS3, what a enhancement..?? Awesome.

CSS3 allows us to smartly play with the webpage structure by using lot of animations, transitions, background effects, border-radius, transforms effects and many more.

Yes, i'm telling you it's just an awesome experience i enjoyed with CSS3 and now beginner's are going to enjoy. These are the new properties introduced in CSS3, which i have told above.

You can take a brief about CSS and CSS3 from these portals:

http://www.w3schools.com/css/
http://www.w3schools.com/css/css3_intro.asp

https://www.tutorialspoint.com/css/

HTML & HTML5

Let's talk about first HTML..??

If you are passionate towards becoming a UI DEVELOPER/ FRONT-END ENGINEER, then you need to know first about the technologies, which all are necessary for becoming a successful UI Developer.

HTML is one of them.

HTML is a language, which instruct the browser/ computer, how to display a webpage. It works only on the structure of the webpage.

HTML Structure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
// Declaration of all necessory meta tags, which is relevant for the search engines.
// Declaration of title, linked favicon icon
// declaration of all necessory css files
</head>
<body>
// Defines structure of the webpage
// at the end of the body you can define all JS files and libraries.
</body>
</html>


HTML5 is just a advanced variant of HTML, which enables us to play more professionally with the Webpage Structure's by introducing some more interesting elements, and easiest understanding of the webpage by introducing some Semantic Elements also.

New Elements: Semantic Elements, Audio, Video, Iframe, Easiest Doctype Syntax, SVG, Canvas and Web Storage methods, Some new Input Attributes.

<!DOCTYPE html>
<html>
<head>
// Declaration of all necessory meta tags, which is relevant for the search engines.
// Declaration of title, linked favicon icon
// declaration of all necessory css files
</head>
<body>
// Defines structure of the webpage
// at the end of the body you can define all JS files and libraries.
</body>
</html>

So, If we talk about differentiate both technologies, you can easily do.

You can take brief introduction about these technologies from:

http://www.w3schools.com/html/
http://www.w3schools.com/html/html5_intro.asp
http://www.tutorialspoint.com/html/
https://www.tutorialspoint.com/html5/