Bootstrap Framework Rapid Frontend Development

Web past paper Solutions rafayfarrukh
Not all questions are from past papers

Q) What is bootstrap framework and how it helps rapid frontend development?
Bootstrap is a flexible and powerful front-end framework that provides a free collection of tools for
creating websites and web applications. With HTML, CSS, and JavaScript components Bootstrap
makes front-end web development faster and easier for responsive, mobile first projects. It is free
and open source; hosted, developed, and maintained on GitHub.
Advantages of bootstrap
 Easy to get started and use

 Consistency and cross browser compatibility.
 Mobile first approach
 Responsive Grid
 Rich feature set
 Frequent updates
----------------------------------------------------------------------------------------------------------
Q) how bootstrap grid helps make responsive design?

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and
align content. It’s built with flexbox and is fully responsive. Below is an example and an
in-depth look at how the grid comes together.
https://getbootstrap.com/docs/4.0/layout/grid/
----------------------------------------------------------------------------------------------------------
Q) How to add bootstrap to your Html?

Use one of the three methods to add bootstrap to your html
Method 1: Using the Bootstrap Content Delivery Network (CDN)
Method 2: Downloading files locally.
Method 3: Using package managers to import Bootstrap to HTML.
----------------------------------------------------------------------------------------------------------
Q) What approach does bootstrap follow in order to provide a responsive
design?
 Components should be responsive and mobile-first

 Components should be built with a base class and extended via modifier classes
 Component states should obey a common z-index scale
 Whenever possible, prefer a HTML and CSS implementation over JavaScript
 Whenever possible, use utilities over custom styles
 Whenever possible, avoid enforcing strict HTML requirements (children selectors)
----------------------------------------------------------------------------------------------------------
CSS
Q) Difference between class based and id based css selector?
Difference between id and class attribute: The only difference between them is that “id” is
unique in a page and can only apply to at most one element, while “class” selector can apply to
multiple elements
The id selector allows you to define style rules that apply to a single element
on the web page. Each web page can only have one element with a single ID
attribute . This means the ID selector can never be used to style more than
one element.
<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
color: white;
background-color: orange;
}
Class Selector
A class selector allows you to define style rules that apply to any
element with a class attribute equal to a certain value.
Example: <html>
<p class="orangeBackground">This is a banner.</p>

<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
background-color: orange;
}
----------------------------------------------------------------------------------------------------------
Q) Which property of css is used to make fluid designs
Use the CSS property max-width to create boundaries for a fluid page. By setting a percentage
width and a fixed pixel max-width , the content wrapper will always be relative to the screen
size, until it reaches the maximum size, 800px in this example, to keep the content wrapper
from extending beyond that
----------------------------------------------------------------------------------------------------------
Q) What is css flex box?
The Flexible Box Module, usually referred to as flexbox, was designed as a one-
dimensional layout model, and as a method that could offer space distribution between items
in an interface and powerful alignment capabilities
----------------------------------------------------------------------------------------------------------
Q) Difference between CSS flex box and Grid?
Grid and flexbox. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox
was designed for layout in one dimension - either a row or a column. Grid was designed for two-
dimensional layout - rows, and columns at the same time.
----------------------------------------------------------------------------------------------------------
Q) What is the effect of overflow and clear properties in Css
The Overflow Method relies on setting the overflow CSS property on a parent element. If this
property is set to auto or hidden on the parent element, the parent will expand to contain the
floats, effectively clearing it for succeeding elements
OR another definition
The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.
The overflow property has the following values:
 visible - Default. The overflow is not clipped. The content renders outside the element's
box
 hidden - The overflow is clipped, and the rest of the content will be invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
 auto - Similar to scroll, but it adds scrollbars only when necessary
Example
<h2>CSS Overflow Visible</h2>
<p>Overflow:visible means that the overflow will render outside the element’s box and potentially
overlap with other elements on the page, as shown below. Since the CSS overflow property is set to
visible by default, you don't have to define it in your CSS. I did just for the sake of this demo.</p>
<div id="example1">This is dummy text. This is more dummy text. This is more dummy text. This is more
dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more
dummy text.
</div>
<div id="example2">This is dummy text. This is more dummy text. This is more dummy text. This is more
dummy text. This is more dummy text.
</div>
background-color: #EEEEEE;
box-sizing: border-box;
width: 300px;
height: 170px;
padding: 30px;
border: 1px solid #000000;
margin: 10px;
overflow: visible;
The clear property controls the flow next to floated elements.
The clear property specifies what should happen with the element that is next to a floating
element.
CSS Syntax
clear: none|left|right|both|initial|inherit;
none Default. The element is not pushed below left or right floated elements
left The element is pushed below left floated elements
right The element is pushed below right floated elements

both The element is pushed below both left and right floated elements
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element.
----------------------------------------------------------------------------------------------------------
Q) Difference between fluid and responsive layout?
The main difference is that Fluid Layouts (also called Liquid Layouts) are based on
proportionally laying out your website so elements take up the same percent of space
on different screen sizes, while Responsive Design uses CSS Media Queries to present
different layouts based on screen sizes/type of screen
----------------------------------------------------------------------------------------------------------
Q) What is jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document
traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-
use API that works across a multitude of browsers.
----------------------------------------------------------------------------------------------------------
Q) What is the difference between onload() and document.ready()?
The main differences between the two are: Body. Onload() event will be called only after the
DOM and associated resources like images got loaded, but jQuery's document. ready() event
will be called once the DOM is loaded i.e., it wont wait for the resources like images to get
loaded Hence, the functions in jQuery's ready event will get executed once the HTML
structure is loaded without waiting for the resources
 We can have multiple document.ready() in a page but Body.Onload() event cannot.
----------------------------------------------------------------------------------------------------------
Q) how you can bind the click event with the button without mixing HTML and JS?
By using jQuery we can bind the click event with the button with out mixing HTML and JS
Example
<a href="#" id="someLink">link</a>
$('#someLink').click(function(){
popup('/map/', 300, 300, 'map');
return false;
});
The advantages are
 behaviour (Javascript) is separated from presentation (HTML)

 no mixing of languages
 you're using a javascript framework like jQuery that can handle most cross-browser issues for
you
 You can add behaviour to a lot of HTML elements at once without code duplication
Reason of doing this?
using JavaScript events, such as onClick(), in HTML is a bad practice, because it's not good for
semantics
----------------------------------------------------------------------------------------------------------
Q) Diff between Javascript and jQuery

JavaScript is an independent language and can exist on its own. JQuery is a JavaScript library. It would
not have been invented had JavaScript was not there. jQuery is still dependent on JavaScript as it has to
be converted to JavaScript for the browser in-built JavaScript engine to interpret and run it.
----------------------------------------------------------------------------------------------------------
Q) Difference between html and xml?
The key difference between HTML and XML is that HTML displays data and describes the
structure of a webpage, whereas XML stores and transfers data. XML is a standard language
which can define other computer languages, but HTML is a predefined language with its own
implications.
XML provides framework to define markup languages. HTML can ignore small errors. XML does not
allow errors. HTML is not Case sensitive
----------------------------------------------------------------------------------------------------------
Q) risks involved in web projects
Going Over Budget

Going Over Time
Choice of Technology
Intellectual Property Theft
Resources
----------------------------------------------------------------------------------------------------------
Define ajax how ajax works explain with the help of a diagram
AJAX is a developer's dream, because you can:
 Read data from a web server - after a web page has loaded
 Update a web page without reloading the page
 Send data to a web server - in the background
AJAX = Asynchronous JavaScript And XML.(we use json not xml nowadays)
AJAX applications might use XML to transport data, but it is equally common to
transport data as plain text or JSON text
AJAX is not a programming language.

AJAX just uses a combination of:
 A browser built-in XMLHttpRequest object (to request data from a web

server)
 JavaScript and HTML DOM (to display or use the data)
----------------------------------------------------------------------------------------------------------
Q) difference between a framework and a library
A library is like building your home from scratch, you have the choice to
make your house as you wish, with any architecture you like, you can sort
your rooms in the way you like.
On the other hand, Framework is like buying a new house, you don’t have to
deal with building problems, but you can’t choose how to sort your rooms
because the house is already built.
The technical difference between a framework and library lies in a term
called inversion of control. When you use a library, you are in charge of the
application flow. You choose when and where to call the library. When you
use a framework, the framework is in charge of the flow. It provides you
with a few places to plug in your code, but it calls the code you plugged in as
needed.
Framework Examples: Angular, Vue

Libraries Examples: React, JQuery
Conclusion
You tell libraries what to do, frameworks tell you what to do.
Overall, frameworks are more opinionated and libraries are more flexible. Both patterns
of abstraction have their place in the world of programming, and while neither is
inherently better, it’s important to determine which is appropriate for the problem you’re
solving.
----------------------------------------------------------------------------------------------------------
Q) what measures would you take to enhance the performance of your web
application yet deleivering the fancy content
1. Reduce the Number of HTTP Requests

HTTP requests are used by the web browser to fetch different parts of the page, like images,
stylesheets, and scripts from a web server. Each request, especially using HTTP/1.1, will have
some overhead in establishing the connection between the browser and the remote web server.
Furthermore, browsers usually have a limit on the number of parallel network requests,
so if you have many requests queued up, some of them will be blocked if the queue is
too long.
You should remove any unnecessary images, JavaScript files, stylesheets, fonts, etc
2. Switch to HTTP/2
I mentioned above the overhead of sending many requests over HTTP/1.1. HTTP is the
protocol that the browser uses to communicate with a remote web server. The HTML of
your website, along with all other resources such as images, stylesheets, and
JavaScript files are transferred using this protocol.
One way of solving this problem is reducing the number of requests. This is a good
approach in any case. Fewer resources required to render your website is always going
to result in faster page load times, but there is another way to avoid this overhead.
You could switch your website to HTTP/2. The details on how to do this will depend on
the hosting provider you use.
3. Optimize Image Sizes

Many websites use graphics heavily. If your images are not compressed, or if you use
too high of a resolution it will slow down your website’s performance.
When you are certain that you are loading the correct resolution across all device types, then it’s
time to optimize the size of the images.
4. Use a Content Delivery Network (CDN)

CDNs will optimize the delivery of static files such as CSS, images, fonts, and JavaScript to
your visitors. Setting them up is usually very simple.
CDNs use geographically distributed servers. What this means is that the server closest to your
visitor will be serving the files. So the load time for e.g., images will be the same, regardless of
where the user is connecting. Generally, when serving static files from your own servers, the
load time increases when users are physically far from the server.
5. Load JavaScript Asynchronously

When the browser reaches a <script> tag that loads JavaScript from a remote
source, it will wait for the file to be loaded before continuing with rendering the website.
That is called synchronous loading.
If you set the async flag on the <script> tag then the browser will load the script
asynchronously. It will continue parsing the page while the script is loaded.
We also suggest moving the script tags to the bottom of the page, near the closing
</body> tag. This way older browsers that don’t support the async attribute will load
the script after parsing the rest of the page.
6. Reduce the Number of Plugins

Plugins are reusable pieces of functionality, usually used in content management
systems like WordPress or other pre-built website platforms. Plugins give website
owners additional functionality such as analytics or the ability to leave comments on
blog posts.
But plugins come at a cost. Each plugin will almost certainly load additional CSS and
JavaScript files. Some plugins will increase the TTFB time as well because they require
additional processing on the server for each page request.
----------------------------------------------------------------------------------------------------------
Q) When a user request comes how the server identifies which

session belong to the particular user
Websites use a session ID to respond to user interactions during a web session. To track sessions, a web
session ID is stored in a visitor's browser. This session ID is passed along with any HTTP requests that the
visitor makes while on the site (e.g., clicking a link).
----------------------------------------------------------------------------------------------------------
For other topics there are no past papers available so
FOR NODEJS READ THE FOLLOWING ARTICLE

https://www.simplilearn.com/tutorials/nodejs-tutorial/nodejs-interview-questions
READ JS ASYNC(CALLBACKS ASYNCHORNOUS PROMISES JS ASYNC/AWAIT)

https://www.w3schools.com/js/js_callback.asp

Bootstrap Framework Rapid Frontend Development

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap Framework Rapid Frontend Development

Uploaded by

Copyright:

Available Formats

Web past paper Solutions rafayfarrukh

Not all questions are from past papers

 Easy to get started and use

Q) how bootstrap grid helps make responsive design?

Q) How to add bootstrap to your Html?

 Components should be responsive and mobile-first

<p id="betaBanner">This is a banner.</p>

<p class="orangeBackground">This is a banner.</p>

The overflow property has the following values:

<h2>CSS Overflow Visible</h2>

border: 1px solid #000000;

The clear property controls the flow next to floated elements.

left The element is pushed below left floated elements

right The element is pushed below right floated elements

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element.

Q) Difference between fluid and responsive layout?

<a href="#" id="someLink">link</a>

The advantages are

 behaviour (Javascript) is separated from presentation (HTML)

Q) Diff between Javascript and jQuery

Going Over Budget

AJAX is a developer's dream, because you can:

AJAX = Asynchronous JavaScript And XML.(we use json not xml nowadays)

AJAX is not a programming language.

 A browser built-in XMLHttpRequest object (to request data from a web

Framework Examples: Angular, Vue

1. Reduce the Number of HTTP Requests

3. Optimize Image Sizes

4. Use a Content Delivery Network (CDN)

5. Load JavaScript Asynchronously

6. Reduce the Number of Plugins

Q) When a user request comes how the server identifies which

FOR NODEJS READ THE FOLLOWING ARTICLE

READ JS ASYNC(CALLBACKS ASYNCHORNOUS PROMISES JS ASYNC/AWAIT)

You might also like