Junior Front End Developer Interview Questions Flashcards
What distinguishes HTML from CSS?
Html is used to structure content, CSS is used for formatting and styling structured content
What are floats and when would you use them?
Float is a CSS positioning property.Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements)
When would you use positioning?
When you need to position something outside of normal flow.
List 3 types of positioning.
RELATIVE - Move element to whatever side it would normally occur. ABSOLUTE - Removed from flow and placed exactly where you need it to go. FIXED - A fixed position element is positioned relative to the viewport, or browser window, stays on scroll.
Difference between rems and ems?
EM is relative to the font size of its direct or nearest parent.REM is only relative to the html (root) font-size.
Give an example of a pseudo element.
::before - Can be used to insert some content before the content of an element.::after - same but after.::first-letter
What are vendor prefixes?
A way for browser makers to add support for new CSS features before those features are fully supported in all browsers. E.G -(Firefox: -moz-)(iOS, Andorid, Chrome: -webkit-)(Internet Explorer: -ms-)
What does responsive mean?
Responsive web design is an approach to web design creating a fluid website that can look good on any device.
How would you make something responsive?
Set the purpose and goals. (selling a product?)Plan content layout (wireframe)Structure your website (HTML)Start Designing (framework or media queries, flexbox, grid)Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors.
How would you rank your JS knowledge?
Drop some specific terms you know and provide examples, sum it up either novice, intermediate, expert.
What is JavaScript?
An object-oriented computer programming language or scripting language that enables you to create dynamically updating content, control multimedia, perform complicated tasks, and others.
What is event bubbling or propagation?
The event is first captured and handled by the innermost element and then propagated to outer elements. Such as all the parent elements of the element you clicked.
What is event delagation?
DOM event delegation is a mechanism of responding to ui-events via a single common parent rather than each child. Through the magic of event "bubbling".
What is jQuery?
A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development
What is event binding?
Event binding is calling a particular function whenever some 'event' occurs. Events mostly relate to user input, such as clicks.
Is there a difference between a function and a method?
A method is a function which is a property of an object.A function is independent of an object.All methods are functions, but not all functions are methods.
What is the difference between a parameter and an argument?
The parameters are the aliases for the values that will be passed to the function. The arguments are the actual values.
Have you used any libraries other than jQuery?
Name libraries you've used and why the hepled.
What is an API?
Application Programming Interfaces are constructs made available in programming languages to allow developers to create complex functionality more easily.
What is an AJAX request?
Asynchronous JavaScript and XML.An Ajax call is an asynchronous request initiated by the browser that does not directly result in a page transition.Uses existing technologies together, including HTML or XHTML, CSS, JavaScript, DOM, XML, and most importantly the XMLHttpRequest object.
What is JSON?
JSON (JavaScript Object Notation) is a lightweight format that is used for for transmitting structured data over a network connection.E.G - between a server and web application, serving as an alternative to XML.
Have you ever done any paired/group programming?
Teamwork, Teamwork, Teamwork (and communication)
What kind of sites do you look at to stay informed?
Show you are up to date with news in your field, twitter, youtube, technologies.
What are you reading these days?
Don't say your favourite Harry Potter book. Tie it into your work somehow.
What do you like to do in your free time?
Feel free to talk about what you enjoy. They want to know you not a robot.
What is asynchronous programming, and why is it important in JavaScript?
Asynchronous programming means that when a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. E.G -A waiter takes orders from many tables and brings food to others at the same time.
What is synchronous programming?
Synchronous programming means that, code is executed sequentially from top-to-bottom, blocking on long-running tasks .E.G - A waiter taking only one order, waits for that tables food brings it to them, then moves on to the next table.
What are inline elements? or display: inline?
Displays an element as an inline element (like <span>). Any height and width properties will have no effect
What are block elements? or display:block?
Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
What is display: inline-block?
Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
What is the DOM?
The Document Object Model (DOM) is an application programming interface (API).It is the browsers internal representation of the web page.With it you can add, modify, or delete elements and content.It defines the logical structure of documents and the way a document is accessed and manipulated.
What's the difference between == and === in JS?
=== checks for value and type equality== checks for equality of value.E.G - null == undefined = truenull === undefined = false
What is CSS selector specificity and how does it work?
Browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.Specificity is a weight determined by selector.0: Type selectors (h1) and pseudo-elements (::)1: Class selectors, attributes selectors ( [type="radio"]), and pseudo-classes (:)2: ID selectors
Give an example of a pseudo class.
:nth-child(param) - Lets us select elements based on their positions within a parent element. :hover - Is used to select elements when you mouse over them.:active - Selects the active link
What does * { box-sizing: border-box; } do? What are its advantages?
Changes how the width and height of elements are being calculated, border and padding are also being included in the calculation.
Describe z-index.
The z-index property in CSS controls the vertical stacking order of elements that overlap
What is the CSS Box Model?
The CSS box model is responsible for calculating:How much space a block-level element takes up.Whether or not borders and/or margins overlap, or collapse.A box's dimensions.The dimensions of a block element are calculated by width, height, padding, borders, and margins.
What is progressive rendering?
Progressive rendering is the name given to techniques used to improve performance of a webpage Prioritizing visible content (or above-the-fold rendering) â Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered.Lazy loading of images â Images on the page are not loaded all at once.
Explain how prototypical inheritance works
All JavaScript objects have a prototype property, that is a reference to another object. When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's prototype. and the prototype's prototype and so on, until it finds the property defined on one of the prototypes or until it reaches the end of the prototype chain.
How to align a block element inside another element?
Position must be absolute - relative to its ancestorSet it's top and left to 50% it is now centred at its edge.Now transform: translate( -50% , -50% )It's now in the middle.
Difference between Static, Relative, Absolute and Fixed position.
STATIC - default, goes by the natural order of page flowRELATIVE - Stays in same position of flow, but can be offset visually.ABSOLUTE - Takes element out of flow and is positioned relative to its first positioned (not static) ancestor elementFIXED - Relative to browser window
What is the CSS display property and can you give a few examples of its use?
The display property specifies the display behavior (the type of rendering box) of an element.