explain what is a reset.

css and what it does

The goal of a reset stylesheet is to reduce browser inconsistencies in things

like default line heights, margins and font sizes of headings, and so on.The
basic reason is that all browsers have presentation defaults, but no browsers
have the same defaults.For example, some browsers indent unordered and
ordered lists with left margins, whereas others use left padding.But there are
all kinds of inconsistencies, some more subtle than others. Headings have
slightly different top and bottom margins, indentation distances are different,
and so on. Even something as basic as the default line height varies from
one browser to another.

Normalize.css makes browsers render all elements more consistently and in

line with modern standards. It precisely targets only the styles that need
normalizing.

____________________________________________________________________________

what is the DOM ?

DOM (Document Object Model) defineste o structura logica si standardizata a
documentelor, o ordine prin care putem parcurge si edita elemente si
continut din documente HTML sau XML.
Structura DOM este o ierarhie de obiecte, compatibila cu a limbajului
JavaScript sau cu a oricarui limbaj bazat pe obiecte. Defineste structura
logica a documentelor si modalitatea prin care un document este accesat si
manipulat
When the page is loaded, the browser creates a Document Object Model of
the page. The DOM model is constructed as a tree of objects.
"The Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update
the content, structure, and style of a document."
The Document Object Model (DOM) is a programming interface for HTML and
XML documents. It provides a structured representation of the document and

it defines a way that the structure can be accessed from programs so that
they can change the document structure, style and content. The DOM
provides a representation of the document as a structured group of nodes
and objects that have properties and methods. Essentially, it connects web
pages to scripts or programming languages.

The DOM is a fully object-oriented representation of the web page, and it can
be modified with a scripting language such as JavaScript.

html= hyperText Markup language

___________________________________________________________________________

what are sprites and how do you implement them in you page ?

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates
multiple server requests.
Using image sprites will reduce the number of server requests and save
bandwidth.
You implement them in your page as a normal image, in css, usign
background: url(img_navsprites.gif) 0 0; The difference is that you have to
give the images position.

____________________________________________________________________________

how would you implement a web design comp that uses non-standard fonts?
You can store the css for the font a local directory on the web server and then
declare it with font-face in the css.
____________________________________________________________________________

what does :nth-child(5) mean ?

This means the fifth child.

____________________________________________________________________________
how do you get the 5th element without the above selector ?
eq(5) -> select the element that has index 5
____________________________________________________________________________
what is a pseudo selector ?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently

The important nature of pseudo-classes is stated in the very first sentence:

"the pseudo-class concept [...] permit selection". It enables the author of an
stylesheet to differ between elements based on information that "lies outside
of the document tree", for example the current status of a link
(:active,:visited). Those aren't saved anywhere in the DOM, and there exists
no DOM interface to access these options.
____________________________________________________________________________

how do you vertically align a text in a div ?

div{
display: table;
}
p{
display: table-cell;
vertical-allign: middle;
}
____________________________________________________________________________

explain the box model theory

Every HTML element on the web is represented as a rectangular box. CSS Box
Model describes the content of the space taken by an element.Box Model
helps in determining the size, properties of an element. CSS Box Model is
made up of the following
Content: This the actual content area. The content can be text, images,
videos etc.
Padding: The padding is the area above the content but before the border
line. That is, the padding is the area between the content area and the
border.
Border: The border is a line that goes around the padding and the content.
Margin: The margin is the outer space above the border, it is used to space
each element from each other.From the code snippet above, we gave the
#div element a width and an height of 200px respectively. We also gave it
margin and padding of 10px and border of 1px. To get the actaul size (width)
of the #div element, we add up the width, margin-left and margin-right,
padding-left and padding-right, border-left and border-right all together. So
the size (width) from above is: 200px + 10px + 10px + 10px + 10px + 1px +
1px = 242px. The same applies to the height, just that we add up height,
margin-top and margin-bottom, padding-top and padding-bottom, border-top
and border-bottom all together.
Note: Your actual size (gotten from the calculations above) must not excced
the total size of it container, else it will break the layout.

Box-sizing follows the box model in that you have the content area first, then
padding, followed by border BUT NOT INCLUDING MARGINS. Thats right
box-sizing doesnt account for margins.

However, when you set a width or the height for the element, that is now the
total width or height for that element as a whole. So instead of having to add
padding and border onto the set width, you are subtracting it in order to
obtain the actual content area. Lets look at the formulas: width = total
element width and width padding border = content area width.
.box {
box-sizing: border-box; /* Opera/IE 8+ */

/* box-sizing is only applied to this particular class */

}
Border-box The specified width and height properties are the width and
height for that element as a whole therefore any padding or borders are laid
out within the specified width and height for the particular element,
subtracting from the width and height.
____________________________________________________________________________
css can be spreaded all over and around the document. what is the order of
importance ?
Specific rules override more general ones. So if something is more specific,
that will be taken as the first option.

1.inline style -max (depasit de !important) )

2.ID
3.Class
____________________________________________________________________________
what is the difference between visibility: hidden and display: none
display:none means that the the tag in question will not appear on the page
at all (although you can still interact with it through the dom). There will be
no space allocated for it between the other tags.
visibility:hidden means that unlike display:none, the tag is not visible, but
space is allocated for it on the page. The tag is rendered, it just isn't seen on
the page.
____________________________________________________________________________

what is the difference between background-position: cover / contain ?

cover
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of
the background image may not be in view within the background

positioning

area

contain
Scale the image to the largest size such that both its width and its
can fit inside the content area

height

Contain
So, in order to make our image fit the viewport, we can make the image
being contained in the viewport and have padding. Think black bars when
you are watching a movie.

Cover
There is another possibility, you can also make the image cover the viewport.

____________________________________________________________________________

what is the difference between a span and a div ?

Span has the default display of inline-block, and div has display: block.
____________________________________________________________________________

what are the sibling elements ?

Elements that share the same parent.

____________________________________________________________________________
what are data attributes and when do you use them ?
The data-* attributes allow us to store extra information on HTML elements
without needing to use a non-semantic element or pollute the class name. In

essence this is what we did with custom attributes before.

<article
id="electriccars"
data-columns="3"
data-indexnumber="12314"
data-parent="cars">
...
</article>
Reading those out in JavaScript is also very simple. You could use getAttribute
to read them but the HTML5 standard defines a simpler way: a DOMStringMap
you can read out via a dataset property:
var article = document.querySelector('#electriccars'),
data = article.dataset;

article[data-columns='3']{
width: 400px;
}
Custom data attributes:
are strings you can store anything which can be string encoded, such as
JSON. Type conversion must be handled in JavaScript.
should only be used when no suitable HTML5 element or attribute exists.
are private to the page. Unlike microformats, they should be ignored by
external systems such as search engine indexing bots.

____________________________________________________________________________

where and what you read to improve your coding performance ?

Different articles on the Internet, what is new, what has changed. Discuss

with front-end developers about what they stumbled upon, etc.Everything

that can be searched, exercises on codeacademy.com.
____________________________________________________________________________
how do you check your codes performance ?
Check it in each browser and make sure it runs as it has to.
____________________________________________________________________________
what are the jQuery selectors (name a few) ?
jQuery selectors allow you to select and manipulate HTML element(s).
# -> allows you to find elements by id
. -> allows you to find elements by class
:nth-child -> allows you to find a certain child
: last
:not
:nth-of-type()
:odd
:visible
____________________________________________________________________________
how (in which order the) selectors are executed in jQuery ?
$("div#myDivId .myClass") Right to left
____________________________________________________________________________
how do you organize your .js code ?
I organise my js code in functions, so i can easity sort them.
I use comments in order to specity what each of them do.
____________________________________________________________________________
what is scope ?
Specify that the two header cells are headers for columns.The scope attribute
specifies whether a header cell is a header for a column, row, or group of

columns or rows.
Javascript scope
We might say that it refers to your current location. Global scope / locat scope
____________________________________________________________________________
what would you use in jquery: $ or jQuery ?
I would use jQuery.

Conflicts: Because almost every JavaScript library defines a function called $.

When you have many libraries in one document, conflicts may appear. If you
are sure that jQuery is and always will be the only script defining that
function, I wouldn't have anything against using $.
____________________________________________________________________________
difference between document.ready body.onload ?
document.ready acceses the script after the page finished loading, and
body.onload acceses it while the page is still loading. Could arrise problems.
____________________________________________________________________________
explain differences between empty() vs remove() vs detach();
empty() --> This method removes not only child (and other descendant)
elements, but also any text within the set of matched elements. This is
because, according to the DOM specification, any string of text within an
element is considered a child node of that element
If we had any number of nested elements inside <div class="hello">, they
would be removed, too. Does NOT remove the element itself.

remove() to remove the element itself, as well as everything inside it.

In addition to the elements themselves, all bound events and jQuery data
associated with the elements are removed.

detach() keeps all jQuery data associated with the removed elements. This
method is useful when removed elements are to be reinserted into the DOM
at a later time.

____________________________________________________________________________
what is chaining ?
Chaining allows us to run multiple jQuery methods (on the same element)
within a single statement.This way, browsers do not have to find the same
element(s) more than once.
To chain an action, you simply append the action to the previous action.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
____________________________________________________________________________
difference between attr(') and prop();
$.fn.prop() grabs the specified DOM property, while $.fn.attr() grabs the
specified HTML attribute.
____________________________________________________________________________

difference between $(.link).click(funtion(){..}) and

$(document).on(,link,click,function(){.......})

First one is a function that launches on click on the element that has class
link.
Sintax is wrong for second one
____________________________________________________________________________
when is the resize() function called ?
On the resize of the window.
____________________________________________________________________________
difference between width() and css(width, ...);
width() gets the width without units, for example : 400
css(width) hets the width with pixels
____________________________________________________________________________
explain the animate function in jQuery;

Perform a custom animation of a set of CSS properties.

____________________________________________________________________________
how many methods you know to fade an element ?
.fadeOut()
.css(opacity, 0)
.fadeToggle()
css3 transition
____________________________________________________________________________
what is the difference between outerHeight and outerHeight(true);
____________________________________________________________________________
how do you check if an element is empty ?
if ($('#element').is(':empty'))
if($.trim($("selector").html())=='')
____________________________________________________________________________
write:
on click on a with class test, add class on all div that has a class starting
with infojQuery(a.test).click(function(){
jQuery(div[class^=info- ]).addClass(gigi);
});
____________________________________________________________________________
what this line returns ?
$( "div#first, div.first, ol#items > [name$='first']" )
all divs that have the id or the class first
and all ordered lists with the id #items and their children that have the name
attribute ending with first
____________________________________________________________________________

what this returns:

console.log(1 +2+'3');

33

console.log(3+1 +2);

312

____________________________________________________________________________
a = 5;
b = 6;
a = b = 7;
console.log(angel);
____________________________________________________________________________

write
css selector that has margin-top: 10px; margin: bottom: 12px; margin-left:
11px; margin-right: 13px;
.text{
margin: 10px 13px 12px 11px;
}
____________________________________________________________________________
write
an animate function that sets the opacity of div with class test and ID box to
0.5, over a 0.5 sec and adding a class of new-class after the animation is
finished
jQuery(".test#box").animate({
opacity: 0.5
},500, function(){
jQuery(this).addClass("new-class");
});
____________________________________________________________________________

what will do the following:

.box * {
color: red;
}

Puts color red to all child elements of box

____________________________________________________________________________
write
check if div with class some-class exists in div with class old-class;

if ( jQuery(".old-class").find(".some-class").length > 0) {

}
____________________________________________________________________________
write
a function that calculates the margin of the div with the class of some-div

var marginTop = jQuery("ul").css("marginTop");

var marginRight = jQuery("ul").css("marginRight");
var marginBottom = jQuery("ul").css("marginBottom");
var marginLeft = jQuery("ul").css("marginLeft");
console.log(marginTop +" "+ marginRight+" "+marginBottom +" "+
marginLeft);