Design document – HLD & LLD

Here we mainly focus on LLD alone..

Thanks to dinesh for explaining in a clear way..

1) What is design document?

  • The design document gives the main idea and structure of the product that would be developed by developers.

2) What are the different kinds or Types  of design documents ?

  1. High Level Design Document also called as HLD.
  2. Low Level Design Document also called as LLD.

In this article, we will discuss about LLD :

Low Level Design Document:

  1. Low Level Design (LLD) is like detailing the HLD.
  2. It defines the actual logic for each and every component of the system.
  3. Class diagrams with all the methods,Properties,variables and relation between classes comes under LLD.
  4. We can represent LLD of the application in many ways.
  5. Some of them could be : UML (Class diagrams,Interfaces,Sequence diagrams etc), Powerpoint,Screen shots and Pseudo code.
  6. This depends on case to case basis.

3) What is the approach for preparing LLD  or What parameters or points should be considered for preparing LLD ?

  1. Requirements should be understood clearly. Based on the requirements we can come up with LLD. Even for Agile methodology based on the initial requirements we can come with the initial design, but we need to fine tune the design as and when the requirements are clear. We need to refine the LLD till the requirements are freezed.
  2. Identify High level Entities. High level entities are objects, or groups of objects, that constitute major constructs of your design. Good examples of entities are a data access layer, a controller object, a set of business objects, etc…
  3. For each entity, define the low level design: This is where your objects and object relationships are defined.

For each object (or set of objects) define the following:

Usage :

  1. Describe in a paragraph how the object is used and what function it serves.
  2. If an object will interface with an external object or system, it is a good idea to show the interface for the object.
  3. Most importantly, you must again describe your thought process for defining the object as you did.
  4. They don’t have to be verbose, just enough to get the point across.


Controller, Data Access Layer etc.  You can explain what is the controller class does.

Model :

  1. This section should contain the Corresponding classes,methods,Interfaces etc related to each and every high level entity.
  2. Basically supplement of each entity which is listed under .
  3. ‘Identify High level Entities – Point #2′.  E.g. : Controller Class. It should list all the methods,Interfaces,Inherited classes etc related to the Controller class.
  4. In a Nutshell, it is the class diagram depiction  of the Controller.
  5. Depending on the need you can provide the description and the interaction between the components.

Interaction :

  1. This is also a good section for interaction diagrams.
  2. An interaction or Sequence  diagram shows how a set of objects or entities communicate with each other to perform a complex task.

Benefits, assumptions, risks/issues:

  • Make a list of 5-6 top benefits of the design, a list of ALL known risks/issues and a list of ALL assumptions.

Advantages :

  1. A good Low Level Design Document developed will make the program very easy to be developed by developers because if proper analysis is made and the Low Level Design Document is prepared then the code can be developed by developers directly from LLD  with minimal effort of debugging and testing. This helps the development team to give quality product.
  2. Design document will help you in  analyzing  the timeline for each component development. So over all rough estimated time of completion can be calculated in the design documents stage itself. This can be used to compare with the target date set for completion of the project. If the time is greater than target date then unwanted and less important components can be left and may be taken off for next phase of development. Thus on whole good design document helps to deliver quality software product within the timeframe.
  3. It helps us in understanding  the requirements in a crystal clear manner. If there is any gap in the requirements we can get clarified before the development starts.
  4. It minimizes unexpected complications by addressing them before the code is written.

So it is very essential to have a good design document for a software product to b developed on time with good quality.


Fluid Layout CSS

Fluid layouts are nothing but using %’s(width and height) in a desired manner.

You can refer youtube here

Very simple and effective example is here

<div class=”container”>
<div class=”a”></div>
<div class=”b”></div>
<div class=”c”></div>

.a, .b, .c {
float: left;
height: 200px;
background: #f00;
width: 21%;
margin: 2%
.b {
width: 46%;
background: #0f0;
.c {
width: 21%;
background: #00f;
.container {
width: 100%;
overflow: hidden;
background: #aaa;

If you want to get your 3 side by side divs to div down by down while resizing..then you should use width: 123px; and float:left.

you wanna have your image or content in center?? try margin-left: auto and margin-right:auto and display:block

If you want your image to attach to div so that image in div should also resize along with window??

Nothing just use background-image,background-size like shown below..

background-image: url(../images/page1_img1.png);

background-repeat: no-repeat;
background-size: 50% 50%;


similarly have #two and #three…you can see side by side divs with images fixed to it..if you resize window..automatically all divs and its images will be resized. if you wanna have it in fluid layout..use width as %’s. Thats it 🙂

Wanna have sticky header??

#navigation {

position: fixed;

z-index: 10;


#header {

margin-top: 50px;


Note: Always use this for better look without some gutter space around your website..

margin: 0 auto;

CSS Media Queries

Types of media types:


@media <media-query> { /* media-specific rules */ }

A <media-query> is composed of a media type and/or a number of media features.

Media types

Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
Suitable for all devices.
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
Intended primarily for color computer screens.
Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details.


1. <meta name=”viewport” content=”user-scalable=no,width=device-width, minimum-scale=1, maximum-scale=1″ />


this means we are telling to the browser “my website adapts to your device width”


This define scale the website, This parameter sets the initial zoom level, which means if 1 CSS pixel is equal to 1 view port pixel. This parameter help to when you changing orientation mode, or preventing a default zooming. without this parameter responsive site work.


Maximum-scale define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.


Minimum-scale define minimum zoom. this work same as above but define minimum scale. If you not define this its work without using this is useful when maximum scale is large and you want to set minimum scale that time you can use.


User-scalable assign 1.0 means website allow to zoom in or zoom out.

But if you assign User-scalable=no its means website not allow to zoom in or zoom out.

10-10-2014 13-06-08



2.<link rel=stylesheet media=(max-width: 800px) href=example.css />

3. Add media type with screen/all/speech/print with following syntax

Eg: media all

@media all and (min-width: 1001px) {

#sidebar ul li a:after {

content: ” (“ attr(data-email) “)”;

font-size: 11px;

font-style: italic;

color: #666;



4. similarly for screen

@media only screen and (min-width: 768px) and (max-width: 1024px) {


@media only screen and (max-width: 766px) {


@media only screen and (max-width: 360px)


@media screen and (max-width : 479px) {


@media only screen and (min-width: 480px) and (max-width: 766px) {
#slide6 {padding-top:123px;background:url(../images/contact_block_bg.jpg) repeat left top;}


5. Even we can have orientation landscape/ portrait like below

@media only screen and (max-width: 1024px) and (orientation:portrait){
.slide{background-attachment: scroll;background-position:0 0 !important;


@media only screen and (max-width: 1024px) and (orientation:landscape){
.slide{background-attachment: scroll;background-position:0 0 !important;


CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element


The syntax of pseudo-elements:

selector::pseudo-element {

CSS – The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before each <h1> element:


h1::before {
content: url(smiley.gif);

CSS – The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after each <h1> element:


h1::after {
content: url(smiley.gif);

All CSS Pseudo Classes/Elements

Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
::before p::before Insert content before every <p> element
::after p::after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with “it”

Use of clear:both in style css

Before you start up with clear first learn float from below link..

Turning off Float – Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property:


.text_line {
clear: both;


No floating elements allowed on the left or the right side of a specified <element> element


10-10-2014 11-15-12


CSS Syntax

clear: none|left|right|both|initial|inherit;

Property Values

Value Description
none Default. Allows floating elements on both sides
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit



Javascript Prototype

Lot of confusions we do have always on this concept. Myself facing the same issue until i found this..

The prototype property is initially an empty object, and can have members added to it – as you would any other object.

var myObject = function(name){ = name;
    return this;
console.log(typeof myObject.prototype); // object
myObject.prototype.getName = function(){

In the snippet above, we’ve created a function, but if we call myObject(), it will simply return the window object, because it was defined within the global scope. this will therefore return the global object, as it has not yet been instantiated (more on this later).

console.log(myObject() === window); // true

anyways i found a simple example in stackoverflow too..

here it is..

In a language implementing classical inheritance like Java, C# or C++ you start by creating a class–a blueprint for your objects–and then you can create new objects from that class or you can extend the class, defining a new class that augments the original class.

In JavaScript you first create an object (there is no concept of class), then you can augment your own object or create new objects from it. It’s not difficult, but a little foreign and hard to metabolize for somebody used to the classical way.


//Define a functional object to hold persons in JavaScript
var Person = function(name) { = name;

//Add dynamically to the already defined object a new getter
Person.prototype.getName = function() {

//Create a new object of type Person
var john = new Person("John");

//Try the getter

//If now I modify person, also John gets the updates
Person.prototype.sayMyName = function() {
  alert('Hello, my name is ' + this.getName());

//Call the new method on john


Angularjs Interview Questions and Answers

1) What is Angular.js?
AngularJS is a javascript framework used for creating single web page applications. It allows
you to use HTML as your template language and enables you to extend HTML’s syntax to
express your application’s components clearly
2) Explain what are the key features of Angular.js ?
The key features of angular.js are
● Scope
● Controller
● Model
● View
● Services
● Data Binding
● Directives
● Filters
● Testable
3) Explain what is scope in Angular.js ?
Scope refers to the application model, it acts like glue between application controller and the
view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document
Object Model) structure of the application. It can watch expressions and propagate events.
4) Explain what is services in Angular.js ?
In angular.js services are the singleton objects or functions that are used for carrying out
specific tasks. It holds some business logic and these function can be called as controllers,
directive, filters and so on.
5) Explain what is Angular Expression? Explain what is key difference between angular
expressions and JavaScript expressions?
Like JavaScript, Angular expressions are code snippets that are usually placed in binding
such as {{ expression }}
The key difference between the JavaScript expressions and Angular expressions
● Context : In Angular, the expressions are evaluated against a scope object, while
the Javascript expressions are evaluated against the global window
● Forgiving: In Angular expression evaluation is forgiving to null and undefined,
while in Javascript undefined properties generates TypeError or ReferenceError
● No Control Flow Statements: Loops, conditionals or exceptions cannot be used in
an angular expression
● Filters: To format data before displaying it you can use filters
6) With options on page load how you can initialize a select box ?
You can initialize a select box with options on page load by using nginit
● <div ngcontroller
= “ apps/dashboard/account ” ngswitch
● On = “! ! accounts” nginit
= “ loadData ( ) ”>
7) Explain what are directives ? Mention some of the most commonly used directives in
Angular.js application ?
A directive is something that introduces new syntax, they are like markers on DOM element
which attaches a special behavior to it. In any Angular.js application, directives are the most
important components.
Some of the commonly used directives are ngmodel,
8) Mention what are the advantages of using Angular.js ?
Angular.js has several advantages in web development.
● Angular.js supports MVS pattern
● Can do two ways data binding using Angular.js
● It has perdefined
form validations
● It supports both client server communication
● It supports animations
9) Explain what Angular JS routes does ?
Angular js routes enable you to create different URLs for different content in your application.
Different URLs for different content enables user to bookmark URLs to specific content. Each
such bookmarkable URL in Angular.js is called a route
A value in Angular JS is a simple object. It can be a number, string or JavaScript object.
Values are typically used as configuration injected into factories, services or controllers. A
value should be belong to an Angular.js module.
Injecting a value into an Angular.js controller function is done by adding a parameter with the
same name as the value
10) Explain what is data binding in Angular.js ?
Automatic synchronization of data between the model and view components is referred as
data binding in Angular.js. There are two ways for data binding
1. Data mining in classical template systems
2. Data binding in angular templates
11) What makes angular.js better ?
● Registering Callbacks: There is no need to register callbacks . This makes your
code simple and easy to debug.
● Control HTML DOM programmatically: All the application that are created using
Angular never have to manipulate the DOM although it can be done if it is required
● Transfer data to and from the UI: Angular.js helps to eliminate almost all of the
boiler plate like validating the form, displaying validation errors, returning to an
internal model and so on which occurs due to flow of marshalling data
● No initilization code: With angular.js you can bootstrap your app easily using
services, which autoinjected
into your application in Guice like dependency
injection style
12) Explain what is string interpolation in angular.js ?
In angular.js the compiler during the compilation process matches text and attributes using
interpolate service to see if they contains embedded expressions. As part of normal digest
cycle these expressions are updated and registered as watches.
13) Mention the steps for the compilation process of HTML happens?
Compilation of HTML process occurs in following ways
● Using the standard browser API, first the HTML is parsed into DOM
● By using the call to the $compile () method, compilation of the DOM is performed.
The method traverses the DOM and matches the directives.
● Link the template with scope by calling the linking function returned from the
previous step
14) Explain what is directive and Mention what are the different types of Directive?
During compilation process when specific HTML constructs are encountered a behaviour or
function is triggered, this function is referred as directive. It is executed when the compiler
encounters it in the DOM.
Different types of directives are
● Element directives
● Attribute directives
● CSS class directives
● Comment directives
15) Explain what is linking function and type of linking function?
Link combines the directives with a scope and produce a live view. For registering DOM
listeners as well as updating the DOM, link function is responsible. After the template is
cloned it is executed.
● Prelinking
function: Prelinking
function is executed before the child elements are
linked. It is not considered as the safe way for DOM transformation.
● Post linking function: Post linking function is executed after the child elements are
linked. It is safe to do DOM transformation by postlinking
16) Explain what is injector?
An injector is a service locator. It is used to retrieve object instances as defined by provider,
instantiate types, invoke methods and load modules. There is a single injector per Angular
application, it helps to look up an object instance by its name.
17) Explain what is the difference between link and compile in angular.js?
● Compile function: It is used for template DOM Manipulation and collect all of the
● Link function: It is used for registering DOM listeners as well as instance DOM
manipulation. It is executed once the template has been cloned.
18) Explain what is factory method in angular.js?
For creating the directive, factory method is used. It is invoked only once, when compiler
matches the directive for the first time. By using $injector.invoke the factory method is
19) Mention what are the styling form that ngModel adds to CSS classes ?
ngModel adds these CSS classes to allow styling of form as well as control
● ngvalid
● nginvalid
● ngpristine
● ngdirty
20) Mention what are the characteristics of “Scope”?
● To observer model mutations scopes provide APIs ($watch)
● To propagate any model changes through the system into the view from outside of
the Angular realm
● A scope inherits properties from its parent scope, while providing access to shared
model properties, scopes can be nested to isolate application components
● Scope provides context against which expressions are evaluated
21) Explain what is DI (Dependency Injection ) and how an object or function can get a
hold of its dependencies ?
DI or Dependency Injection is a software design pattern that deals with how code gets hold of
its dependencies. In order to retrieve elements of the application which is required to be
configured when module gets loaded , the operation “config” uses dependency injection.
These are the ways that object uses to hold of its dependencies
● Typically using the new operator, dependency can be created
● By referring to a global variable, dependency can be looked up
● Dependency can be passed into where it is required
22) Mention what are the advantages of using Angular.js framework ?
Advantages of using Angular.js as framework are
● Supports two way databinding
● Supports MVC pattern
● Support static template and angular template
● Can add custom directive
● Supports REST full services
● Supports form validations
● Support both client and server communication
● Support dependency injection
● Applying Animations
● Event Handlers
23) Explain the concept of scope hierarchy? How many scope can an application
Each angular application consist of one root scope but may have several child scopes. As
child controllers and some directives create new child scopes, application can have multiple
scopes. When new scopes are formed or created they are added as a children of their parent
scope. Similar to DOM, they also creates a hierarchical structure.
24) Explain what is the difference between angular.js and backbone.js?
Angular.js combines the functionalities of most of the 3rd party libraries, it supports individual
functionalities required to develop HTML5 Apps. While Backbone.js do their jobs individually.
25) Who created Angular JS ?
Intially it was developed by Misko Hevery and Adam Abrons. Currently it is being developed
by Google.