Initially we are going to discuss about Top Frontend Developer Interview Questions and Answers 2022 what is front-end, what are the benefit of front-end programming and how it works. So, we are going to discuss Top Frontend Developer Interview Questions and Answers 2022 all in this article. Welcome to you all in Tech remake article I wish you all are doing good.
What is Frontend Developer?
Front-end Developers are those who customize the static websites, and these websites are most probably developed by the help of HTML, JAVA SCRIPT AND CSS.
These languages are most frequently working on the rules, you can’t write any code anywhere a proper code is written there and one particular place is used and these have some names too. Likewise, syntax, variable and more.
Example Of Syntax
Missing just a} will change the entire appearance of the page. so, guess this is code i mentioned you, just try to apply to in your file and miss this Bracket and check the changes, you will be surprised.
body {
color: green; font-size: 16px;
}
p {
color: red;
}body {
color: green; font-size: 16px;
p {
color: red;
}Debugging Checklist 2022
so now we are doing to talk about best debugging checklist which will help you to desgin the website with less bugs and help you to complete is as soon as possible. this are the best debugging checklist of 2022 in my perspective.
- HTML element’s tag name
- HTML elements are closed properly or not
- HTML attribute names and values
- CSS property names and values
- Image element syntax
- Paragraph element syntax
- Heading element syntax
Difference between bug and error?
The error can be any mistake or can be an expected error when you are not giving the correct input. But the bug is when output deviates from the expected result. Bug is nothing but a formal name of error. When test engineer finds any error in the application, they called it as bug.
What is the difference between Bug and Debug?
A bug is some piece of code that causes errors or any unexpected behavior when we run the code.
Debugging is the process of identifying and removing the bug in the code to remove the unexpected behavior.
Difference between static, responsive and dynamic websites?
Static Websites, the most basic websites that include web pages with set content are static websites, also referred to as fixed websites. This means their content does not change depending on the user. Resizing the browser or viewing it on different devices won’t affect the way the website looks.
Static websites are the most basic type of website and are the easiest to create. Static website contains Web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor.
Responsive websites used actually look different on each device. The elements stretch or shrinks according to the screen size. These websites are built using a mobile-first approach.
Dynamic Websites, also known as fluid websites contain dynamic web pages that are generated in real-time. This implies that each time a user visits the website, different material will be shown on the web pages. Unlike Static websites, dynamic websites have a more personal and interactive user experience
What is a static website?
Static websites are the most basic type of website and are the easiest to create. A static website contains Web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor.
What is a web page?
A web page is a straight forward document that a browser can see. Such documents are written in the HTML language. A web page can embed a variety of different types of resources such as: style information — controlling a page’s look-and-feel.
A web page document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple’s Safari. These are also often called just “pages.”
What is the difference between .in and .com?
All the business websites have the domain commonly .com and .in but there is a difference among them.
.com – In .com extension, com stands for commercial. It is used for commercial business purposes. Many people believe that com is for computers. But it was created to represent commercial websites. .com domain is the most common among 100 million registered domains.
In addition to .com, there is also a .co domain – that represents Columbia. The .co extension is the Country’s top-level domain assigned to Columbia. However, there are no restrictions on the second level.co domains which are declared as the international domain for a company or a corporation.
.in – India’s top-level domain is designated with the.in suffix. After certain policy modifications in 2005, second-level registrations under the.in domain were permitted.
What is the difference between website and web application?
Websites (Static websites) are one-way informational feeds that contain information, they do not allow viewers to interact or communicate back to the site. Example: Wikipedia pages, Blogs, News sites, etc.
Web applications (or Dynamic websites) are websites that contain functionality and interactive elements. Example: Gmail, Facebook, YouTube, Twitter, etc
Instead, then being shown within a browser, mobile apps are genuine programmes that you download and install on your mobile device. If you have any additional queries, please don’t hesitate to contact us. Mark the discussion as clarified if your issue is resolved.
What is the difference between Debugging and Tweaking?
Debugging is the process of identifying and resolving errors in our HTML, CSS codes if there are any.
Tweaking is the process of making modifications in our HTML, CSS codes and observing how the output is being affected based on the changes in the code.
How to move the heading text to the center of the page?
By using CSS text-align:center; property we can move the text inside the HTML elements to the center of the page.
//HTML
<h1 class="h-center"> Learning </h1>
//CSS
.h-center{
text-align:center;
}Why the button element styles are not changed when we apply styles to the div element?
The button element has default styles like background-color, border, color, …etc properties. Due to that parent element styles will not be applied to the button.
To change the background color, text color, …etc of the button element. We have to apply styles separately to the button using the class attribute.
//HTML
<button class="button">Get Started</button>//CSS
.button {
background-color: #25b1cc;
color: white;
}What is the difference between the HTML tags, elements, and attributes?
HTML tags are almost like keywords where every single tag has a unique meaning. An example of a tag is: <h1>
HTML elements specifies the general content. Elements enclose the contents in between the tags. It generally consists of a start tag, content, and an end tag.
HTML attributes specify various additional properties to the existing HTML element.
For the example <h1 class="h-center">Content</h1>
The class is an attribute that specifies one or more class names for an element, h-center is the value that is used as a CSS selector.
You can go through HTML attributes here. There are some attributes in which we don’t need to specify the value. You will get to know about this in further sessions.
What is a class attribute?
The class is an attribute that specifies one or more class names for an HTML element.
The class attribute can be used on any HTML element.
The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
//HTML
<h1 class="heading">Main Heading</h1>
//CSS
.heading{
color:white;
background-color: blue;
}In the above example heading is the value of the class attribute which is the CSS class selector.
Using that class selector, we applied styles to the heading element.
Why do we place “.” in front of the class selector in the CSS file? What is the use of it?
There are different types of selectors in CSS. The class selector is one among them which you are learning now.
A dot( . ) prefix usually represents a class selector and CSS styles will not be applied if we don’t use dot as a prefix to the class selector, it’s the standard syntax.
We will get to know in further sessions about other CSS selectors.
Can we write p1, p2, p3, … for different paragraph elements like heading elements (h1, h2, h3, etc…)
No, we can’t use p1 , p2, p3 … elements instead of the p element.
For the heading elements, we can use h1, h2, h3, h4, h5 and h6. For the main heading, we can use the h1 element and for the sub-heading, we can use h2. So, like that, we can use the remaining heading elements.
But for the paragraph element, we can use only p element. Because the size of the p element is constant. If we want to change the size of the p element, we can change it externally.
Every HTML element has its own properties like font-size, width, margin, etc., In this way, the heading and paragraph elements have different font-size properties. So, the font size of the heading element is greater than the paragraph element.
Can we align the heading on the left side, paragraph in the center, and button on the right side in the output?
Yes, by using CSS property text-align with values as left , right and center we can align the HTML element in different positions in the output as shown below.
//HTML
<div>
<h1 class="align-left">Tourism</h1>
<p class="align-center">Plan your trip wherever you want to go</p>
<div class="align-right">
<button>Get Started</button>
</div>
</div>
//CSS
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}What is the use of div element?
The div tag is known as the Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc).
The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.
It is used to the group of various tags of HTML so that sections can be created and style can be applied to them. So, when you want to create a separate section in the HTML page and want to apply styles for that section you can use a div container.
How to align only the heading and paragraph elements to the center?
We can wrap the Heading and paragraph elements in one div element and apply CSS property text-align: center; to that div element. (or) We can apply CSS property text-align: center; to the heading and paragraph elements separately as shown below.
//HTML
<div class="h-center">
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
</div>
<button>Get Started</button>
(or)
<div>
<h1 class="h-center">Tourism</h1>
<p class="h-center">Plan your trip wherever you want to go</p>
<button>Get Started</button>
</div>
//CSS
.h-center {
text-align: center;
}Can we use any name for the class selectors or is it mandatory to use the names that are mentioned in the session?
- No, it is not mandatory to use the class names which are mentioned in the session.
- You can use any name for the class selector but it should be the same in HTML and CSS.
- You have to use a meaningful class name for faster debugging and code readability.
The heading, paragraph, and button elements are not moving to the center.
Making spelling mistakes in class selector names. Not using the same class selector name in HTML and CSS.
//HTML
<div class="hcenter"> <!--Wrote the spelling of h-center as hcenter-->
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</div>
//CSS
.h-center {
text-align: center;
}When we are applying styles to the HTML elements using CSS class selector, we have to provide the same CSS class selector name as a value to the class attribute to that HTML element else those styles won’t apply to that element. Copy the class attribute name from the HTML file and paste it in CSS.
//HTML
<div class="h-center">
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</div>
//CSS
.h-center {
text-align: center;
}MISTAKE 2 – Adding the class attribute to the HTML element but missing to add styles to that class selector in the CSS file.
//HTML
<div class="h-center"> <!--Added h-center as a value but didn't add styles for that in CSS-->
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</div>
To align the HTML elements to the center we have to apply the CSS property text-align: center; in the CSS file as shown below.
//HTML
<div class="h-center">
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</div>
//CSS
.h-center {
text-align: center;
}How to center a button horizontally?
To align the HTML button element to the center,
1. Wrap the HTML button element in a HTML container element.
2. Apply the CSS property text-align and value center to the HTML container element.
For example,
1. Wrap the HTML button element in a HTML container element.
// HTML
<div>
<button>Start</button>
</div>how to create a css file?
You can create a normal .txtfile and rename it to .css . You will learn more about this in further sessions.
Feel free to reach out to us if you have any other questions. Mark the discussion as clarified if your issue is resolved. Keep flexing your mind and have a happy time coding!
Are HTML tags case sensitive?
HTML tags are case insensitive. We can use both lower case and upper case to write the code.
We can write <html> as <HTML>, <head> as <HEAD> & <body> as <BODY>. However, it’s recommended to stick with the lower case for code readability.
What does the import statement written at the top of the CSS file do?
The first line is CSS in code playground helps you to use different font families in your website. However, It doesn’t affect your code.
Is it mandatory to enclose the class attribute value in double-quotes?
It will work fine with or without quotes if we are using a single value for the class attribute.
But if we are writing multiple values for the class attribute we have to enclose the value in quotes.
<h1 class=h-center>Heading</h1> //Works fine
<h1 class="h-center bg-dark">Heading</h1> //Here we added 2 class selectors, so to get the expected output we have to enclose them in quotesFor horizontal alignment we use text-align property, then for vertical alignment, what property name should we use?
Yes, it is possible to align the elements vertically. We can achieve that by using flex-box properties.
Why do we place “.” in front of the class selector in the CSS file? What is the use of it?
There are different types of selectors in CSS. The class selector is one among them which you are learning now.
A dot(. ) prefix usually represents a class selector and CSS styles will not be applied if we don’t use dot as a prefix to the class selector, it’s the standard syntax.
We will get to know in further sessions about other CSS selectors.
We can use the attribute in <body> also then why we use <div> container ? what’s the difference when we use the attribute in <body> and <div>?
Adding an HTML attribute to the HTML body element:
// HTML
<body class="h-center">
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</body>
// CSS
.h-center {
text-align:center
}If you run the above code, all the elements inside the body are aligned to the center.
In general development, we will have multiple elements in an HTML document. If we add text-align to the HTML body element, then all elements will be aligned to the center which might not be expected.
So, it’s better to add class attributes to the div elements.
Final Words –
so here i would like to end this article and i believe this article is ample knowledgeable for you all and help to enhance your skills.
