Example Questions Given Flashcards
Can you explain the box model in CSS?
A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS.
Content: image, text, other media
Padding: space around content
Border: border area surrounding padding and content
Margin: Margin is transparent.
How would you optimize the performance of a web page?
Clean HTML, proper CSS (top) and JS (bottom) placements, Optimize CSS, Reduce external HTP request (extra images, JS, CS, plug ins), Minify CSS, JS, and HTML, enable prefetching (rel=”prefetch”, rel=”dns-prefetch”, or rel=”prerender”), increase speed with a CDN and caching, compress your files, optimize images, minimalistic framework.
What are some differences between inline and block elements in HTML?
Inline elements never start from a new line. Block elements cover space from left to right as far as it can go. Inline elements only cover the space as bounded by the tags in the HTML element. Block elements have top and bottom margins.
How do you handle responsive design and make a website mobile-friendly?
The Viewport Meta Tag to Identify a Mobile Website, CSS Media Queries for Different Screen Sizes and Orientations, Horizontal Scrolling with Overflow Scroll, Responsive Images and Videos.
Also, The Flexbox Layout (Flexible Box) module provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is dynamic (hence the word “flex”).
Explain the concept of event delegation in JavaScript.
Event delegation in JavaScript is a pattern that efficiently handles events. Events can be added to a parent element instead of adding to every single element. It refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated.
How would you handle cross-browser compatibility issues?
- Validate HTML and CSS (HTML/CSS validator) (JS Lint)
- Maintain Layout Compatibility (viewport meta tag and flex box and grid)
- Use CSS Resets (CSS reset style sheet (GitHub based normalize.css)
- Provide Support for Basic Features of the Application
- Check JavaScript Issues to avoid the Cross-Browser compatibility issues
- Check DOCTYPE tag
- Test on Real Devices to Avoid Cross-Browser Compatibility Issues
- Use Frameworks and Libraries that Support Cross-Browser Compatibility (React and Bootstrap)
What are some techniques for improving website accessibility?
- Include People with Disabilities in the Design Process.
- Use Alt Tags.
- Choose Your Font Wisely.
- Choose an Accessible Color Palette.
- Make Navigation Seamless.
- Create Subtitles and Transcripts.
- Make Links Descriptive.
Can you describe the purpose of CSS preprocessors and provide examples?
A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. (SASS and Stylus)
How would you implement animations or transitions in CSS?
To make a CSS animation, you need three things: an HTML element to animate, a CSS rule which binds the animation to this element, and a group of keyframes that defines the styles at the start and end of the animation.
What is the difference between localStorage and sessionStorage in JavaScript?
sessionStorage is similar to localStorage ; the difference is that while data in localStorage doesn’t expire, data in sessionStorage is cleared when the page session ends. Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab.
Local storage is useful for storing data that the user will need to access later, such as offline data. Session storage is similar to cookies, but the data is only stored for the current session. This means that the data will be deleted when the user closes the browser.
What are floats, and how do they work?
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Suggest three plugins present in the Bootstrap jQuery plugin library.
Bootstrap:
* Multi-select (selects inputs with the multiple attribute present, drop down menu with options as checkboxes)
* Confirmation (uses Bootstrap Popovers as confirmation dialogs.)
* Date/Time Picker (drop down choose date and time)
-> Slick (responsive and customizable carousels and sliders but not bootstrap just JS)
Which CSS class will you employ to span 16 columns on medium screens and 10 columns on large screens?
class = “col-md-16” and class = “col-lg-10”
How will you verify whether a variable is set in PHP or not?
PHP isset() Function
The isset() function checks whether a variable is set, which means that it has to be declared and is not NULL. This function returns true if the variable exists and is not NULL, otherwise it returns false.
What’s the difference between require() and include() in errors?
The only difference is that the include() statement generates a PHP alert but allows script execution to proceed if the file to be included cannot be found. At the same time, the require() statement generates a fatal error and terminates the script.
