Question 1: Visit some good sites and give a brief view about the architecture of website

with some diagrammatic examples.

Apple Inc. is an American multinational technology company headquartered in Cupertino,

California, that designs, develops, and sells consumer electronics, computer software, and
online services. The given below diagram is of their sleek website that is user friendly plus
shows its effectiveness at its uttermost brilliance.

Starting from their mentioned-below tabs, that each represents the functionality performed
under that domain. Majorly they have divided their website into 7 sections including Product
information, Customer Support, Developer World, Technology and Research, Group and
Interest, Resource Online and About Apple.

n architecture

Facebook is one of the leading online social media and social networking service company in
existence till now. Following are some of the pointers over the architecture of its site.

PHP is the language in which its web front-end is written but later on its converted to C++ by
their Hip-hop complier that provides a high-performance templating and Web logic
execution layer. Due to their limitations of relying entirely on static compilation, Facebook's
started to work on a hip-hop Interpreter as well as a Hip-hop Virtual Machine which translate
PHP code to Hip-hop Bytecode.

Offline processing is done using Hadoop and Hive. Data such as logging, clicks and feeds
transit using Scribe and are aggregating and stored in HDFS using Scribe-HDFS, thus
allowing extended analysis using MapReduce The storage of the billions of photos posted by
the users is handled by Haystack, an ad-hoc storage solution developed by Facebook which
brings low level optimizations and append-only writes.

Facebook Messages is using its own architecture which is notably based on infrastructure
sharing and dynamic cluster management. Business logic and persistence is encapsulated in
so-called 'Cell'. Each Cell handles a part of users; new Cells can be added as popularity
grows [13]. Persistence is achieved using HBase and their search engine is built with an
inverted index stored in HBase.

Twitter: is an online news and social networking service where users post and interact with
messages, known as "tweets." Being one of the giants in the social media world they
comprise of one of the best architectures. Starting from their application programming
interface (API) off the Representational State Transfer (REST) architecture. Their REST
architecture refers to a collection of network design principles that define resources and ways
to address and access data. The architecture is a design philosophy, not a set of blueprints --
there's no single prescribed arrangement of computers, servers and cables. There are a few
syndication formats used on the Web. Twitter is compatible with two of them -- Really
Simple Syndication (RSS) and Atom Syndication Format (Atom). Both of their RSS and
Atom are based on XML format.
Question 2: How many types of CSS Selectors are there define them and give example
code of each.
The selectors are part of CSS that are used to search or select HTML (hypertext markup
language) elements based on their ID, element name, attribute, class and a lot more. In
simpler words selectors are a part of CSS rule set that are used to select the content that the
user is wanting to style. Following are the seven types of selectors with the brief description
of each:

1-Simple Selector: One or more elements are matched directly of any document, based on
their class, type of element, or ID in a simple selector. There can be more than one simple
selector in a CSS selector. In between the simple selectors, combinators can also be added.
Here an example code of it.
2-Universal Selector: A wild card character is how the universal selector works like, it selects
all the elements on a page. The universal selector written like “*” compares the name of any
element type. Any single element in the document tree is matched by it. In case a universal
selector is not a part of the simple selector than the “*” is eliminated.

3-Decendant Selector: These sectors denote a connection in a pattern. A user might at some
point want a selector that compare an element that is a descendant of another element in the
tree of document. Descendant selector is composed of two or more selectors which are
separated by white spaces. If there is a form “cd” and its element d is an arbitrary descendant
of some of the ancestor element of c only then it’s a descendant selector of that form.

4-Class Selector: An element with a specific class attribute is selected by a class selector. To
select elements with a specific class, write a period (.) character, followed by the name of the
class that the user wants to give.
5-ID Selector: An ID selector can be assigned using a hash or pound symbol (#) before a
string of characters. These strings of characters are defined by the developer. Any HTML
elements is compared by its ID attribute having the exact value as that of the selector.
However, the hash symbol is eradicated.

6-Type Selector: It is also called “element type selector” or “grouping selector”, it matches
one or more HTML elements of the same name. A type selector compares the name of a
document language element type and matches every instance of the element type in the
document tree.

7-Attribute Selector: Different elements are targeted based on their presence and the value of
HTML attributes by the attribute selector. To declare this sort of a selector, square brackets
are used.

Question 3: Use all the CSS Position properties define them and give example code of
each.

All the CSS position properties are used to specify the sort of positioning method that is
utilized for an element. Properties like left, right, bottom and top are used to position the
elements. None of these properties would ever work if the position property is missing prior
to them. Plus, it all also depends on the position value. Commonly there are five different
position values:

1. Static
2. Relative
 3. Fixed
4. Absolute
5. Sticky

Static: It’s a default value that is termed to not be positioned. In simpler words an element
with a position set to anything else is called to be positioned. The element of position:static;
is not positioned in any manner.

Relative: It is defined by setting the top, right, left and bottom properties of a relatively-
positioned element will cause it to be adjusted away from its normal position. Other content
will not be adjusted to fit into any gap left by the element.

Fixed: A fixed element is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled. As with relative the top, right, bottom and left
properties are used. This element does not leave a gap in the page where it would normally
have been located.

Absolute: It is the trickiest position value. Majorly it behaves like fixed except relative to the
nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned
element has no positioned ancestors, it uses the document body, and still moves along with
page scrolling. Remember, a "positioned" element is one whose position is anything except
static
Sticky: It works based on a user’s scroll position with position:sticky; element. Relative and
fixed are the two properties that it keeps fluctuating between, depending on the scroll
position. It is positioned relative until a given offset position is met in the viewport - then it
"sticks" in place (like position:fixed).

Question 4: Describe the CSS box model and provide information of its different parts
and give its example code.
CSS Box Model: The CSS box model is the foundation of layout on the Web each element is
represented as a rectangular box, with the box's content, padding, border, and margin built up
around one another like the layers of an onion. As a browser renders a web page layout, it
works out what styles are applied to the content of each box, how big the surrounding onion
layers are, and where the boxes sit in relation to one another.
 Content area: This area is where the element's content is placed. Content is text,
images, etc.

 Border: This is the box. When you’re starting out, it helps to think of the border as the
outline of a real box. It can have different thicknesses (widths) and colors, but it’s
basically just a rigid structure you put things into. Of course, you can also have a
border of zero, but it still helps to think of the border as the outermost part of your
box, even if it isn’t there.

 Background: If you apply a background to something, it stretches from one side of the
border to the other, covering the entire inside of your box. Also, if you apply both a
background color and a background image, the image will sit on top of the color.

 Padding: Think of padding as the bubble wrap or packing peanuts you’d add to a box
before shipping it somewhere. Padding lies between your border and your content.
This is the sanest property of the lot.

 Width: This is the width of your content inside your box. This can be somewhat
counter-intuitive at first, because it is not the width of your border. It’s the width of
the stuff inside your border, and inside your padding. So, if you set a width of 400
 pixels, with 20 pixels of padding on both sides, and a 5-pixel border, your actual
“box” would be 400+20+20+5+ 5 (otherwise known as 450) pixels wide.

 Margin: Margins exist outside of our hypothetical box, around your border. Think of
it as space outside your box that you’re deliberately leaving empty, as if the stuff
inside the box were volatile, dangerous, stinky, or otherwise something you’d want to
give a wide berth. So, if you took our box from the width example and gave it a 10-
pixel margin on every side, we’d now have a 450-pixel wide “box” taking up 470
pixels of space.

Question 5: Describe about the text shadow properties used in CSS with some examples.

Text Shadow Property: To make text looking prominent and beautiful, CSS comes up with
the text-shadow property. If CSS text-shadow property is used properly, this may enable you
to avoid using images in the web page for text styling for certain scenarios. Following is the
general syntax of using the text-shadow CSS property.

text-shadow: horizontal-shadow vertical-shadow blur color;

The horizontal and vertical shadow values are required while blur and color are optional. The
Color value defines the shadow of the text.

This example uses the horizontal and vertical shadow values in heading (h1 tag) text. As no
color value is specified in the text-shadow property, it will take text’s color for the shadow.
Now the example has the Blur value in the text-shadow property to give an example of text-
shadow with blur value. In the last there is a shadow color property also.

Question 6: Describe the linear gradient properties used in CSS with some examples.

Linear Gradient Properties: The background: linear-gradient function creates an image for

the background of an element that represents a linear gradient a two or more colours. The
linear-gradient function is relatively new to CSS and is not supported by all browsers. The
linear-gradient will take the colours specified and fill the box of the element with a
mathematically calculated range of colours between the colours specified. An angle can also
be applied to the gradient. The syntax for this value is as shown:
background: linear-gradient(<angle>, colour, colour, colour...)
It must be used with the background or background-image property. The angle can be
expressed as 0deg, 45deg, 60deg, etc. The angle can be positive or negative. The colours are
separated by commas. The first stated colour will start at the bottom, then the colours will be
stacked in the order stated.
Set the Angle using Degrees: Here's an example of specifying the angle in degrees:

Set the Angle by Keyword: Here's an example of using the top bottom right keyword:

Default Angle: Setting an angle is optional. If you don't set one, it defaults to to bottom:
Color Stops: Color stops are the bit that tell the gradient which colors to use and where. You
specify the color to use and (optionally) the position along the gradient line that it should be
located at. You can specify the color using any valid color value, and you can specify its
position using either a percentage or length value.

Two Color Stops: The following example uses two color stops: red and yellow. These are
written as red, yellow.

Three Color Stops: In this example we add a third color. Because we don't specify a position
for any of the colors, they use the default position and spread evenly across the box:

Patterns with Gradients: You can take gradients to the next level and come up with some
interesting patterns. Here's an example: