What is AngularJS and How to Start

What is AngularJS?

AngularJS is the web application development framework which provides a flexible way to build testable and maintainable front-end applications. Generally, AngularJS javascript MV framework which is developed by google for build dynamic web application. For more details click here.

How to Start?

It’s really easy to start AngularJS. Just need to download AngularJS JavaScript file, and add to your web page with a script tag: You can also add it from remote url (e.g. http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js).  Here is an example code, so you can see how it works.

Explanation of this Code:

Here I will use 3 types of directives of AngularJS  which are:

ng-app:  This directive will define the angular application, That means this ng-app directive is for initializing the Angular into the page.

ng-model: This directive binds/takes the value from HTML controls (input, select, text area) to application data.

ng-bind: This directive  display the application data to the HTML view.

You can see ng-app directive is declared into the body tag that means Angular  is initialized among whole web page.  and the ng-model directive is declared three times called (name, title, and comment) and which was binds by {{name}}, {{title}}, {{comment}}
{{name}} bind for ng-model="name",
{{title}} bind for ng-model="title",
{{comment}} bind for ng-model="comment"

Output

What is AngularJS and How to Start
What is AngularJS and How to Start

Hope you can learn the basic concept of AngularJS from this article. Thanks!!!

How to use Nested in LESS CSS

LESS best feature is its support for “Nested Rules”.Where in normal CSS you need to make CSS rules with long selectors but in the LESS CSS you can simply nest selectors inside other selectors.This create inheritance and make style sheet  shorter.

Example of Nest Code:

.header{
  width:960px;
  height:auto;
  font-family:arial;
  font-size:14px;
  color:#333;
  .logo{
    float:left;
    text-align:left;
    .span{
      color:#C00;
      font-size:11px;
    }
  }
}

when this code is compiled then the code will see like that.

After the Compiled of Nest Code:

.header {
  width: 960px;
  height: auto;
  font-family: arial;
  font-size: 14px;
  color: #333;
}
.header .logo {
  float: left;
  text-align: left;
}
.header .logo .span {
  color: #C00;
  font-size: 11px;
}

This is really good feature of LESS CSS. This make our code inheritance and shorter our coding.

How to use Mixins in LESS CSS

Mixins allowed you to embed the whole properties of a class/id into another class/id just simply include the class/id name. It works like a variable but whole class/id properties. Mixins can behave like a function, it’s take arguments. lets see example

Example of Mixins :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners   /*Including the radius-corners class*/
}

Mixins with Argument :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners(20px);   /*Including the radius-corners class and passing parameter */
}

This is really easy to use and very much effective for working flow.

How to use Variables in LESS CSS

LESS (dynamic stylesheet Language) allowed declare variable and use it when we need. We have to follow some rules to declare and use variable. I am gonna show you how to declare and use variable for LESS.

How to declare Variable :

Variable start with at-sign (@), so you have to write (@) as a first character of your variable name and use colon (:) to assign the value of that variable. Like:

/*Creating a variable. Variable name color*/
@color : #C00;

How to use variable :

 It is pretty easy to use those variable. just create a clsss/id. write a css properties (e.g color) and use @color variable as a value of that properties. like

.text{
  color: @color  /*Use Color variable*/
}

so the color of the text class will be (#C00). This is the simple use of variable. Actually when this code is compiled then then value of the color properties (#C00). I am showing you another example.

LESS CSS Code:

@text-color: #CCC;
@layout: 910px;

#header{
  width : @layout; 
  color: @text-color;
}

When this code will be compiled it become….

#header {
  width: 910px;
  color: #cccccc;
}

So you see how to declare and use variable. hope you guys are enjoy it.

 

 

How to start LESS CSS

Less is dynamic stylesheet Language. Less is CSS preprocessors which represent an awesome way to extends CSS with dynamic behavior like variables, mixins, operations and functions. Less can run both server (Client-side Server and Server-side Server). In this tutorial I am gonna show you how to configure LEES in Client-side Server.

LESS Configuration for Client-side Server:

It’s is very easy to configure LESS in local/ Client-side server. Link your .less" stylesheets with the rel set to stylesheet/less:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Then Download the latest less.js from lesscss.org and include the js file into your <head> section of your page. Like:

<script src="less.js" type="text/javascript"></script>

NB: Make sure you have included stylesheets before the Script.

All have done, now I show you a simple example.

index.php

<!DOCTYPE html>
<html>
<head lang="en">
    <title>LESS Practice</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="less.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2 class="h2">Hello World</h2>
</body
</html>

styles.less

@color : red;
.h2{
  color: @color
}

Copy this code and paste in into your editor and then see the output.

How to use CSS3 column-rule-width Property

column-rule-width is pretty new property in Cascading Style Sheet styling system Level 3. It’s used to create multicolumn module by a single line. I am gonna show you how o use column-rule-width.

How to use it:

<html>
<head>
    <style type="text/css">

        .multicolumn{
            columns: 180px 3;
            -moz-columns: 180px 3;
            -webkit-columns: 180px 3;
        }

    </style>
</head>
<body>

<p class="multicolumn">
     Lorem Ipsum sample text Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text

</p>

</body>
</html>

You can also add some other properties like.

.multicolumn{
  columns: 180px 3;
  -moz-columns: 180px 3;
  -webkit-columns: 180px 3;

  column-rule-color: #ccc;
  -moz-column-rule-color: #ccc;
  -webkit-column-rule-color: #ccc;

  column-rule-style: solid;
  -moz-column-rule-style: solid;
  -webkit-column-rule-style: solid;
  }

This is really awesome properties of CSS3

 

How to create Horizontal List

To make a Horizontal List in CSS is pretty easy. You can simple do this by using “display: inline”. I am gonna show you how.

<!doctype html>
<htm>
    <head>
        <style>
            .parent {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .child {
                display: inline;
                border: 1px dashed green;
                background: #eee;
                padding: 5px 15px;
            }
        </style>
    </head>
    <body>
        <ul class="parent">
            <li class="child">List 1</li>
            <li class="child">List 2</li>
            <li class="child">List 3</li>
            <li class="child">List 4</li>
        </ul>
    </body>
</htm>

You can copy/paste this code or Just add “display: inline” in your li class and then see.

What is Web Design

Today the most common word are known web design.Many peoples consider web design is very smart career.Defiantly the web design is the smart career.In this article I am going to introduce about “What web design ,how design web pages, which software needed to create a web page”.Lets start…

Honestly, there are none software is require to design a website.We can use notpad for write code to design a web page.

To design a web page we need to learn “HTML” (Hyper text markup Language).

What is Html ?

  • HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages

HTML Tags

  • HTML markup tags are usually called HTML tags
  • HTML tags are keywords surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags

Example of HTML:

<html>
    <body>
       Hello World
      <h1>My First Heading</h1><p>My first paragraph.</p>
   </body>
</html>