Must see Examples


W3 schools provide most important web based functionalities please see the below link


CSS most Important Questions

Explain what elements will match each of the following CSS selectors:

  1. div, p
  2. div p
  3. div > p
  4. div + p
  5. div ~ p


  1. div, p – Selects all <div> elements and all <p> elements
  2. div p – Selects all <p> elements that are anywhere inside a <div> element
  3. div > p – Selects all <p> elements where the immediate parent is a <div> element
  4. div + p – Selects all <p> elements that are placed immediately after a <div> element
  5. div ~ p – Selects all <p> elements that are anywhere preceded by a <div> element


2. Explain the CSS “box model” and the layout components that it consists of.

Provide some usage examples.


The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:

Content – The content of the box, where text and images appear
Padding – A transparent area surrounding the content (i.e., the amount of space between the border and the content)
Border – A border surrounding the padding (if any) and content
Margin – A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)
Each of these properties can be specified independently for each side of the element (i.e., top, right, bottom, left) or fewer values can be specified to apply to multiple sides. For example:

/* top right bottom left */
padding: 25px 50px 75px 100px;

/* same padding on all 4 sides: */
padding: 25px;

/* top/bottom padding 25px; right/left padding 50px */
padding: 25px 50px;

/* top padding 25px; right/left padding 50px; bottom padding 75px */
padding: 25px 50px 75px;


3. Given the following HTML:

div id=”page”>
h1>Heading Title</h1>
h2>Subheading Title</h2>
h2>Subheading Title</h2>
h1>Heading Title</h1>
h2>Subheading Title</h2>
h1>Heading Title</h1>

How could you use CSS to achieve the following automatic numbering:

1) Heading Title
1.1) Subheading Title
1.2) Subheading Title

2) Heading Title
2.1) Subheading Title

3) Heading Title


The following CSS will achieve this type of automatic numbering:

#page {
  counter-reset: heading;

h1:before {
  content: counter(heading)") ";
  counter-increment: heading;

h1 {
  counter-reset: subheading;

h2:before {
  content: counter(heading)"." counter(subheading)") ";
  counter-increment: subheading;


4. In CSS3, how would you select:

  • Every <a> element whose href attribute value begins with “https”.
  • Every <a> element whose href attribute value ends with “.pdf”.
  • Every <a> element whose href attribute value contains the substring “css”.


In CSS3, how would you select:

  • Every <a> element whose href attribute value begins with “https”.
  • Every <a> element whose href attribute value ends with “.pdf”.
  • Every <a> element whose href attribute value contains the substring “css”.

Custom Directive Example


Please Refer

var myModule=angular.module('myModule',[]);







$scope.get=function fun(){

console.log("Function from the controller");




return {
restrict : 'EA',
myname: '@myName',
mycountry: '@countryName', //one way data binding
twoWay: '=twoWay',

template: '&amp;lt;div &amp;gt;&amp;lt;h3&amp;gt;From Directive : &amp;lt;/h3&amp;gt; Name: &amp;lt;input type="text" ng-model="myname" /&amp;gt; &amp;lt;br /&amp;gt;' +
'Country: {{mycountry}} '+
'&amp;lt;h3&amp;gt;Two way Data - Binding &amp;lt;/h3&amp;gt;'+
'email: &amp;lt;input type="text" ng-model="twoWay"&amp;gt;'+
'call the function from the Parent controller: &amp;lt;button ng-click="funBinding()"&amp;gt;get from Parent&amp;lt;/button&amp;gt;&amp;lt;/div&amp;gt;',

$"Form Directive ";
element.css('background-color', 'yellow');
element.css('background-color', 'white');




&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;title&amp;gt;Directive Example&amp;lt;/title&amp;gt;
&amp;lt;script src=""&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script src="test.js" &amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;link href="style.css" rel="stylesheet"&amp;gt;&amp;lt;/link&amp;gt;
&amp;lt;body ng-app="myModule"&amp;gt;

&amp;lt;div ng-controller="myController"&amp;gt;

From The controller: &amp;lt;input type="text" ng-model="name1"/&amp;gt; &amp;lt;br /&amp;gt;
email: &amp;lt;input type="text" ng-model="email"/&amp;gt; &amp;lt;br /&amp;gt;
How many Directives : &amp;lt;input type="number" ng-model="count" ng-change="get()" min=1 /&amp;gt;

&amp;lt;div ng-repeat="c in directiveArry track by $index"&amp;gt;
&amp;lt;div class="dir" my-directive





what are providers in AngularJs

An angular application uses services ($http$location, etc.).

It’s sometimes necessary to configure these services before using them. For example, the $location service has two modes of execution: the “normal” mode, and the “html5” mode. $httpmight need some headers configured before even sending its very first HTTP request.

To configure these services, Angular uses providers. Providers are objects whose role is to accept configuration options during the configuration phase, and then, once everything is set up, to create the unique instance of a service.

So, to configure the $location service, you use its $locationProvider during the configuration phase. Once that phase is done, Angular, during the run phase, will call the provider’s $get()method, which will create and return the $location service (hence the name “provider”).



// Definition of a PersonManager object
var PersonManager = function ()
var fullNameSeparator = " ";

return {
setFullNameSeparator: function (separator)
fullNameSeparator = separator;
$get: function (person)
return {
getPersonFirstName: function ()
return person.firstName;
getPersonLastName: function ()
return person.lastName;
getPersonFullName: function ()
return person.firstName + fullNameSeparator + person.lastName;

// Initialization of the "mainModule"
angular.module("mainModule", [])
// Register an object instance as a value and name it "person"
.value("person", {
firstName: "",
lastName: ""
// Register a provider with person management functions and name it "personManager".
// This provider requires the "person" object instance registered as a value in the
// "mainModule" and that instance is passed to the constructor through Dependency Injection
// simply writing "person" (the name of the registered value) as parameter name.
.provider("personManager", PersonManager)
// Initial configuration of "mainModule". To get an instance of the "personManager" provider
// we simply add a parameter to the configuration function with the "Provider" suffix after
// the name of the registered provider (for the registered "personManager" provider instance
// we must write "personManagerProvider").
.config(function (personManagerProvider)
// The run phase of the "mainModule" could be useful for any initialization procedure.
// We get a reference to the "person" object simply specifying it as a parameter in the
// "run" function.
.run(function (person)
person.firstName = "John";
person.lastName = "Doe";
// Get the "person" registered object instance and the "personManager" service
// instance (created by the "PersonManager" provider) through Dependency Injection.
.controller("mainController", function ($scope, person, personManager)
// Set variables on the scope to reference the "person" object instance
// and the "personManager" service from the HTML template.
$scope.personInstance = person;
$scope.personManagerInstance = personManager;

OpenShift, Containers,Dockers, Microservices, OpenStack, Kubernetes

Containers :
Containers create a virtualization environment that allows us to run multiple applications or
operating system without interrupting each other.


Docker is a worlds’s Leading software container platform.
Docker provides a platform to manage the lifecycle of containers.

Container Managment System


Hypervisor or VMM is Computer software that creates and runs Virtual Machines.
A computer on which hypervisor runs one or more virtual machine is called ((((host machine)))) and each
virtual machine is called ((((guest machine))))))

Fabric 8
Integrated Development Platform for Kubernetes