These are general question asked in those topics. Here are few Interview Questions for HTML, CSS & JS. šThis blog on Frontend Developer Interview Questions will help you crack your next interview.
Interview Questions – HTML
- What Is an Attribute in HTML?
– HTML attributes provide additional information about HTML elements. Attributes are always specified in the start tag of element. - What is Marquee in HTML?
– An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML<marquees>tag.<marquee>is a deprecated tag in HTML5. - What is Doctype in HTML? What’s new in HTML?
– All HTML documents must start with a declaration. The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect. It is not case sensitive. - What is Semantic HTML? and how does it work?
– A semantic element describes its meaning to both the browser and the developer (i.e. Human & Machine readable). Using semantic tags instead of conventional <div> makes no change in the view of the Webpage.
Read more about Semantic HTML here. - How do you Display a Table on an HTML Webpage?
– By using the<table>tag. I can create rows with <tr> & columns with <td>. - What is SVG?
–<svg>is a container for SVG graphics. We can make use of drawing, element paths, boxes & circles.
SVG is acronym for Scalable Vector Graphics. - how do you separate a section of text?
– Creating separate<p>tags for different sections. Or Make use of<br/>tag to separate text in the same paragraph. - How do you Create Nested Web Pages in HTML?
– By using<iframes>. It means Having a webpage inside a webpage. - Differentiate Between Ordered List and Unordered List
– Unordered list uses the<ul>tag while ordered list uses the<ol>.
Interview Questions – CSS
- What is the best way to include CSS Styling in HTML?
– There are 3 ways to include CSS in HTML. They are Inline, Internal & External styles. External Style is the best way to include CSS in HTML. With that the CSS file is stored in a separate file rather than in a HTML file. - Difference between inline style & external style.
– Inline style is used in the HTML style attribute to update the style of a single element.
– Internal style is used in the HTML file. When the CSS is supposed to be for the only HTML file in which it is contained.
– External style means a CSS file is imported in the HTML to use the styles. Using External styles we can import a single CSS style in multiple HTML pages. - Mention the different types of CSS Selectors
– Universal (*), type, class(.), id(#) selectors.
Learn more about CSS Selectors. - What are Preprocessors? Sass, Less, and Stylus?
– 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 etc. - Explain Box Sizing Property
The<strong>box-sizing</strong>CSS property sets how the total width and height of an element is calculated. - What are the different ways to hide an Element using CSS? Difference between display: none, opacity: 0, visibility: hidden
<strong>Display: none</strong>=> The element is not visible on the website & does show take space in the UI. (Not clickable since not visible to click)<strong>Opacity: 0</strong>=> The element is not visible on the webpage & It takes space on the website UI.<strong>visibility: hidden</strong>= >The element is not visible on the webpage & It takes space on the website UI. (Similar to opacity: 0).
Both<strong>opacity: 0</strong>&<strong>visibility: hidden</strong>are clickable elements. - What does āImportantā in CSS mean?
The important property adds importance to a CSS property of a element. It overwrite all the applied properties by other method like inline style or through combinations of selectors. - What are CSS Sprites?
Image sprites are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.
We can use different image by positioning the image as background & background-position - Which Property is used to Underline, Strikethrough, and Overline Text?
<strong>text-decoration</strong>property is used for the underline, strikethrough &overline text. - Explain Flex property.
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. The flexbox is unidirectional(row-column). The default isflex-direction: row - Explain Grid property.
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. The grid can be used on 2 directions x & y. - What is Media Queries?
It uses the @media rule to include a block of CSS properties only if a certain condition is true. Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
Interview Questions – JavaScript
- What are the various Data Types in JavaScript?
Primitive:
– Boolean
– null
– undefined
– number
– bigint
– string
– symbol
Objects (collections of properties) - What is Callback in JavaScript?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. - Whatās the difference between Function Declaration and Function Expression?
Function Declaration
function abc(){ return 5; }
Function Expression
var a = function abc(){ return } - What is Hoisting in JavaScript? (I was asked in all interviews)
JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.
Hoisting allows functions to be safely used in code before they are declared. - What do you understand about Cookies in JavaScript?
Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. - What are Closures in JavaScript?
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). - What are Imports and Exports in JavaScript?
The ES6 is a JavaScript standard. With the help of ES6, we can create modules in JavaScript. In a module, there can be classes, functions, variables, and objects as well. To make all these available in another file, we can use export and import. The export and import are the keywords used for exporting and importing one or more members in a module.
Export: You can export a variable using the export keyword in front of that variable declaration. You can also export a function and a class by doing the same. - What is the difference between Undefined, Undeclared, and Null in JavaScript?
undefinedis a variable that has been declared but no value exists and is a type of itself āundefinedā.nullis a value of a variable and is a type of object.undeclaredvariables is a variable that has been declared without āvarā keyword. - What is the best way to remove Duplicates from a JavaScript Array?
A Set is a collection of unique values. To remove duplicates from an array:
First, convert an array of duplicates to a Set. The new Set will implicitly remove duplicate elements.
Then, convert the set back to an array.
Thank you for reading the Interview Questions blog. We hope you succeed in the Interview you participate. All the best. ā£ļø Follow us on Github.
Read our other blogs here
