DEV Community: Emon Ahmed

HTML Interview Question

Emon Ahmed — Thu, 13 Jan 2022 14:26:05 +0000

HTML is one of the most widely used languages on Web to develop web pages. It helps you delve into the world of Web Development and improve your skills. So, if you are planning to start your career in Web Development or HTML and you wish to know the skills related to it, now is the right time to dive in. These HTML Interview Questions and Answers will help you get through your interviews in 2022.

01. What are the differences between HTML4 and HTML5?
ANS: HTML stands for Hypertext Markup Language. HTML4 is The 4th & Older Version OF HTML AND HTML5 is The 5th & New Version With Advanced Features. HTML4 was Published in 1997 as a W3C Recommendation. On The Other hand, HTML5 Published in 2008 as a WWW Consortium (W3C) Recommendation. Also There are some Major Difference Between Features/Tags provision/Error Handling.

02. What are semantic tags in html? Give me some examples.
ANS: Semantic Tags Means, Which Clary Describe Human & Machine Readable Way. It has greater accessibility and easier to read. Semantic Tags Come With HTML5. List of semantic Tags, <article>, <aside>, ,<details>, <figcaption>, <figure>,<footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, etc.

03. What is the purpose of Article, div, section, nav, aside?
ANS: The Purpose Of Article Tag is to represent an article. It is independent, self-contained content. This Tag is from The New Semantic Tags. As well as the Article tag. div, section, nav, aside tag also from the semantic tag. Normally Div Tag is known As A Division Tag. We Are Using This Tag For Making Divisions of Content in The Web Pages. When We Need To Group Some Contents, That Time We USE Section Tag. Generally We use Nav Tag For Navigation. ‘Aside’ For Sidebar.

04. Why will you use Meta tag?
ANS: Normally People Use Meta Tag For Solid SEO Purpose & Ranking. And Also, We Store Data About This Website, Description. It Defines Meta Data About an HTML Document. Meta Tag is Self-Closing Tag.

05. What is the difference between inline, inline-block, and block?
ANS: All of Those Are Display Elements. Inline Elements Doesn’t have any fixed width & height. Examples, a/span/img tags.
Inline-block Also have not any fixed width, But We Can Add Width/Height. Block Elements Have Full width & It starts With A New Line. Although, We Can set width/height also. Examples, h1/p/div/section.

06. Difference between strong, b, bold, em, i?
ANS: There are very small differences in all of those tags. Basically in Strong & Bold Tag, there is no difference visually. BUT we use strong tags for showing that this element is more important and It’s Meaningful Word. And Let’s Find Difference between em& i Tag. iTag Stand For italicand emtag stands for emphasis. i tag use, When you just need to show a unique word from your text. And em tag use, when you need to show More attention to this word.

07. What are properties and attributes in HTML?
ANS: We use Properties and attributes in HTML for Adding Additional information to this html tag. Like,href, src, target, name, placeholder, etc.

08. What is a Viewport?
ANS: It’s A browser viewport. This is the user's visible area of a web page. Normally we use this for responsiveness of our web page area.

09. What is SVG?
ANS: SVG stands for Scalable Vector Graphics. We Can USE Directly SVG by <svg><svg/> Tag. It's a XML based two-dimensional graphic file format. We Can Also Use svg images for our web page design. This Tag Also Has attributes.

10. List the media types and formats supported by HTML.
ANS: Media Types Format Are Come From HTML5. It’s semantic Tags. I will show some formats about multimedia, which are supported by HTML5. For Video Formats, .mpg, .mpeg, .avi, .wmv, .mov, .rm, .ram, .swf, .flv, .ogg, .webm, .mp4, etc. For Audio Formats, .mid,.midi, .rm, .ram,.wma, .aac, .wav, .ogg, .mp3,.mp4, etc.

11. What is the difference between HTML and XHTML?
ANS: HTML Stands For Hypertext Markup Language. XHTML Stands For Extensible HyperText Markup Language. HTML displays data and describes the structure of a webpage, whereas XML stores and transfers data. XHTML is Better For Error handling. XML is dynamic and case sensitive. On the other hand, HTML is static and not case sensitive.

12. What are HTML Entities?
ANS: An HTML entity is used to display invisible characters(like non-breaking spaces) and that doesn't belong to the document's character set. It is a piece of text, or string, that begins with an ampersand ( & ) and ends with a semicolon ( ; ). Example: & - (&) " - (" )

13. Describe HTML layout structure.
ANS: These layouts provide a way to arrange web pages in , well-structured, and in responsiveness. <header> <nav> <section> <article> <aside> <footer>. Those Tags Are Used For HTML Layout Structure.

14. Difference between link tag <link> and anchor tag <a>?
ANS: The link tag is used to define a link between a document and an external resource. The <a> tag defines a hyperlink. A link is that a link takes to another page And A link is that a link takes to another page.

15. Is drag and drop possible using HTML5 and how?
ANS: From HTML5 it is possible to drag and drop HTML elements inside an HTML page. There are a number of events which are fired during various stages of the drag and drop operation. These events are listed below − dragstart, dragenter, dragover, dragleave, drag, drop, dragend.

Find React Areas Of Exploration

Emon Ahmed — Thu, 23 Dec 2021 11:12:31 +0000

Hello Everyone, Today We Will Discuss About SOME React Areas Of Exploration. We Have a Perfect Name For This BLOG, Which is called, Free Fire React Areas Of Exploration. Sound Cools. Let's Start,

React Component lifecycle

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. Mounting, Updating, and Unmount. This is referred to as a component lifecycle. This method is a built-in method in React.

Custom hook

Custom Hooks offer the flexibility of sharing logic that wasn't possible in React components before.

Higher order component

Higher order Component is an advanced technique in React for reusing component logic. And It is not part of the React API.

Features of React

The Major Features of ReactJs is a virtual DOM. React uses server-side rendering. And ReactJS follows unidirectional data flow or data binding.

Limitations of React

The Limitations of React are React is just a library, not a full-blown framework. Its library is very large and takes time to understand. And It uses inline templating and JSX.

Why can’t browsers read JSX

Browsers can Only Read JavaScript Objects BUT JSX is not a Regular JavaScript Object. We Have To Transform JSX with Babel For Pass in The Browser.

Free Fire React JS Concepts

Emon Ahmed — Wed, 22 Dec 2021 09:21:52 +0000

Hello Everyone, Today We Will Discuss About SOME React JS Concepts. We Have a Perfect Name For This BLOG, Which is called, Free Fire React JS Concepts. Sound Cools. Because There Are Lot Of GAMERS, I Know BUT, Today Topic is not Gaming, Something Crazy. Because We Will Clear Some Concepts Here. Let's Start,

ReactJS

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
Today, ReactJS is the highly used open-source JavaScript Library. And It’s Easy to Learn and Use, Creating Dynamic Web Applications Becomes Easier, Reusable Components, Performance Enhancement And Everything Has some disadvantages also, Like Poor Documentation, the high pace of development, JSX as a barrier. I Choose ReactJS For My Application Because, As You See in the advantages, And Also React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple.

JSX

JSX stands for JavaScript XML. It allows us to directly write HTML in React (within JavaScript code). Basically, by using JSX you can write concise HTML/XML-like structures in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code.

Virtual Dom

A virtual DOM is a lightweight JavaScript representation of the DOM used in declarative web frameworks such as React JS. DOM stands for 'Document Object Model'. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app.

React different from Angular

ReactJS is a Server-side rendering And Angular is a Client Side Rendering. React uses Virtual DOM And Angular Uses Real DOM. React is one way data binding And Angular is a two way data binding.

Redux & Uses

Redux is a predictable state container for JavaScript apps. Redux helps us to write applications that behave consistently. And run in client, server, and native environments, and It’s easy to test. I can use Redux with ReactJS.

Optimize ReactJS

There are lots of ways to get high performance, You can Optimize Your Dependency, Use React.Fragments For to Avoid Additional HTML Element Wrappers, Avoid Inline Function Definition in the Render Function. Avoiding Props in Initial States, etc.

Free Fire More JavaScript Concepts

Emon Ahmed — Mon, 20 Dec 2021 15:58:16 +0000

Hello Everyone, Today We Will Discuss About SOME JS Concepts. We Have a Perfect Name For This BLOG, Which is called, Free Fire CSS Concepts. Sound Cools. Because There Are Lot Of GAMERS, I Know BUT, Today Topic is not Gaming, Something Crazy. Because We Will Clear Some Concepts Here. Let's Start

ES6 features

ES6 or the ECMAScript 2015 is the 6th and major edition of the ECMAScript language specification standard. ES6 brought significant changes to the JavaScript language. It introduces several new features such as, let and const Keywords, Arrow Functions, Multi-line Strings, Default Parameters, Template Literals, Destructuring Assignment, Enhanced Object Literals, Promises, Classes, Modules. Whenever I Code, That Time, I Just Try To Use All OF Them In My Project.

- let and const Keywords
- Arrow Functions
- Multi-line Strings
- Default Parameters
- Template Literals
- Destructuring Assignment
- Enhanced Object Literals
- Promises
- Classes
- Modules

Differences between var, let, and const

From ES6, There are Three Variables, var, let and const.
var declarations are globally scoped or function scoped while let and const are block scoped and all of these are functional scoped. Const can’t be reassigned while let & const can be reassigned.

var x = "John Doe";
var x = 0;

let x = "John Doe";
let x = 0;
// SyntaxError: 'x' has already been declared

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error

JavaScript scope, Block scope, and global scope

A scope defines the lifetime visibility of a variable. Scope in JavaScript defines accessibility of variables, objects and functions. A block scoped variable means that the variable defined within a block will not be accessible from outside the block. And Global variables can be accessed from anywhere in a JavaScript program.

API in JavaScript

API stands for application programming interface. API is a software intermediary that allows two applications to talk to each other. GET is used to request data from a specified resource And POST is used to send data to a server.

How JavaScript code can be involved in an HTML file

You can include JavaScript in your HTML in Three Ways.
Inline, Internal, External.
In Inline, We can write JS in HTML Tag Line. And Internal, We can Add Tag at The Bottom OF HTML Document And we can write JS There. And Of Course, We can Link A File And USE It Like External JS.

Array vs LinkedList

The Main Difference Between Array And LinkedList is Their Structure. Array elements store in a contiguous memory location. Linked list elements can be stored anywhere in the memory. From a memory allocation, linked lists are more efficient than arrays.

Free Fire JavaScript Concepts

Emon Ahmed — Sun, 19 Dec 2021 14:59:58 +0000

Hello Everyone, Today We Will Discuss About SOME JS Concepts. We Have a Perfect Name For This BLOG, Which is called, Free Fire JS Concepts. Sound Cools. Because There Are Lot Of GAMERS, I Know BUT, Today Topic is not Gaming, Something Crazy. Because We Will Clear Some Concepts Here. Let's Start,

How JavaScript Work

JavaScript is A client side Programming Language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm. JavaScript is single-threaded. Because while running code on a single thread, it can be really easy to implement as we don't have to deal with the complicated code scenario. JavaScript is always synchronous.

consol.log("I Love JavaScript")

When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it. Chrome Has Chrome V8 For Running JavaScript in Chrome Browser. And FireFox Has SpiderMonkey.

JavaScript String

String is a primitive data type in JavaScript. The JavaScript string is an object that represents a sequence of characters.
We can define string like this:

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

There are 3 methods for extracting a part of a string:

slice(start, end)

let str = "Apple, Banana, Kiwi"; 
let part = str.slice(7, 13);

substring(start, end)

let str = "Apple, Banana, Kiwi"; 
let part = str.substring(7, 13);

substr(start, length)

let str = "Apple, Banana, Kiwi"; 
let part = str.substr(7);

Event bubbling in JavaScript

Event bubbling is a method of event propagation in the HTML DOM API. When an event is in an element inside another element, and both elements have registered a handle to that event. The bubbles event property returns a Boolean value that indicates whether or not an event is a bubbling event.

Handle Exceptions - Try-Catch

We use Try-Catch-Finally For Handle Exceptions. Our Main Code in Try, And If We Face Any Error Then Catch Will Work, If We Set Any Error Message, That will be in Catch Area, And If We want TO Run Any CODE Without Any Try Catch, We Will Use Finally Method.

try {
  // Try to run this code 
}
catch(err) {
  // if any error, Code throws the error
}
finally {
  // Always run this code regardless of error or not
  //this block is optional
}

Closure in JavaScript

Closure Function is a function which has access to the variable from another function's scope. Whenever a function is declared in JavaScript closure is created. Returning a function from inside another function is the classic example of closure.

Free Fire CSS Concepts

Emon Ahmed — Sat, 18 Dec 2021 18:27:45 +0000

Today We Will Discuss About SOME CSS Concepts. We Have a Perfect Name For This BLOG, Which is called, Free Fire CSS Concepts. Sound Cools. Because There Are Lot Of GAMERS, I Know BUT, Today Topic is not Gaming, Something Crazy. Because We Will Clear Some Concepts Here. Like CSS Box Model, CSS Selectors, CSS Display Property, CSS Units, CSS Preprocessors, CSS Frameworks . Let's Start,

CSS Box Model

In CSS, the term "box model" is used when talking about design and layout. The box model used when talking about design and layout. The box model is used to describe an element's dimensions and structure. Box Model is made up of four boxes: content, padding , border, and margin.

CSS Selectors

There are different types of selectors in CSS. (i) Element Selector (ii) CSS Id Selector CSS Class Selector CSS Universal Selector CSS Group Selector.

CSS Display Property

All of Those Are Display Elements. Inline Elements Doesn’t have any fixed width & height. Examples, a/span/img tags. In CSS, the display property determines how an element looks. It is also a crucial part of the presentation of you HTML code as it has a significant impact on layouts.

CSS Units

CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width , margin , padding , font-size , etc.

CSS Preprocessors

CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are two types of css preprocessor, Sass, Less. For Able CSS Preprocessor We Have To USE CSS Compiler in Our Server.
The benefits of CSS Preprocessor, We can write clean, easy, less code. And It’s More stable, powerful Way TO Write CODE.

CSS Frameworks

CSS frameworks are pre-planned libraries, allowing a more convenient web page styling which is also compliant with standards.

What is JavaScript?

Emon Ahmed — Wed, 08 Dec 2021 04:47:52 +0000

JavaScript is a client-side and server-side scripting language inserted into HTML pages and is understood by web browsers. JavaScript is also an Object-based Programming language.