explain what is a reset.css and what it doesThe 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 manipulatWhen 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 itStyle visited and unvisited links differentlyThe 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 theoryEvery 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 followingContent: 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: nonedisplay: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 ?coverScale 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 areacontain Scale the image to the largest size such that both its width and its height can fit inside the content area ContainSo, 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.CoverThere 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....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 scopeWe 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 elementIf we had any number of nested elements inside , 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 info-jQuery(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 firstand 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'); 33console.log(3+1 +2); 312____________________________________________________________________________a = 5;b = 6;a = b = 7;console.log(angel);____________________________________________________________________________writecss selector that has margin-top: 10px; margin: bottom: 12px; margin-left: 11px; margin-right: 13px;.text{margin: 10px 13px 12px 11px;}____________________________________________________________________________writean 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 finishedjQuery(".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____________________________________________________________________________writecheck if div with class some-class exists in div with class old-class; if ( jQuery(".old-class").find(".some-class").length > 0) {}____________________________________________________________________________writea function that calculates the margin of the div with the class of some-divvar 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);