Have to apply as a front-end-developer? or HTML5 & CSS3 expert? But do not know that from where you can prepare for the interview. So that you can crack it in first go. This blog will guide you through the overview of HTML as well as CSS and along with that it gives you the list of most popular questions that are asked in its interview.
But before going through this list be sure that you have practical knowledge about the subject and have learnt from the best HTML & CSS institute in Delhi.
Overview of HTML
HTML stands for Hyper Text Mark-up Language, first launched in the year 1995. It is used to arrange the structure of the webpage in a way it is going to be displayed in the different browsers. Web browsers get the code from either the server or from the localhost.
HTML elements are the ones which play a vital role in building a webpage. They are considered as the building blocks and are portrayed as tags such as <img/>, <h1>…</h1> etc. There is proper semantics that are followed such as for text semantics used are headings, paragraphs, quotes etc. These tags are not displayed by any browser because the content is interpreted to be displayed on the webpage.
The latest version that is in use is HTML 5 which was last updated in the year 2017. It came up with some amazing as well as useful features such as video tag to add videos, figure, section, nav, header, footer etc. These made the understanding of the code for even non programmers easier.
Click Here To know about the HTML5 Features in Detail
It is not used alone. It is always accompanied with CSS and JavaScript.
Overview of CSS
HTML is always accompanied with CSS. CSS i.e., Cascading Style Sheet gives color and life to a normal structure that is designed by HTML. HTML gives content to the webpage whereas CSS gives presentation to the webpage. This increases the accessibility of the website.
There are 3 ways to add CSS i.e., inline, internal and external. When writing internally it is written in style tag which is contained in head tag. Whereas, while writing it externally, a separate file is there with .css extension.
It not only helps in formatting the content according to web but is also used to format it according to mobile and tablet. This is done with the special feature that is there in it i.e. media query.
It is not only supported by HTML but also by XHTML. SVG, XUL etc. There are various style properties which are used by the specific keywords.
Using CSS one can change font, color, background color, give transition, add animation, add border etc.
Ids, classes and pseudo classes play a vital role in designing a webpage and in making it presentable.
List of 10 Most Common Interview Questions and Answers of HTML5 and CSS3 are:
Before you read the given questions and answers, have a look at this video.
Q 1: What are the features of HTML 5 that have been recently introduced?
Answer 1:
1. It has become easy to add audio, video as well as graphic content in a webpage with the use of <audio>, < video > and <canvas> tag respectively.
2. Now there is improvement in JavaScript APIs as well such in the one for geolocation and drag and drop one.
3. There is new JavaScript feature i.e. web workers that has been introduced in this version.
4. Also, to structure the content in a better manner, some semantics have been introducing namely,<aside>, <nav>, <article>, <header>, <footer>, <main> etc.
5. There are some updates that have been made in form control such as introduction of <calender>, <date>, <time>, <search> etc.
Q 2: Enlist the difference between span and div?
Answer 2:
When writing an HTML code, if you want to display something in the next line then that content is placed inside a div tag. It has display type block.
Whereas, when we want a content in same line then it is written in span tag instead of div tag. It has display type inline. Now content will be beside the previous content.
Q 3: What is the meaning of CSS selector?
Answer 3:
CSS selectors are used to select the element in HTML code which you want to modify. It is done with the help of selecting id, class, attribute, universal selector etc.
Following are the syntax :
universal selector : *
class selector: .nameofclass
id selector : #nameofid
type selector: There are various input types such as – input, body, p, h1-h8, button etc.
attribute selector: It basically selects all the elements that have that the same attribute such as [autoplay]. Now, the ones with autoplay will be selected.
Q 4: What are Pseudo-elements and Pseudo-classes?
Answer 4:
Pseudo elements are the elements that are used to form the elements that are not the part of mark-up language and work outside the DOM. It increases the functionality of the webpage with very less code. Also, one can create animations using this feature. For example: – ::before, ::after, ::first-child, ::nth-child etc.
Pseudo classes are the elements which function under the certain conditions. Such as when you hover on something then it reacts differently. Example of pseudo classes are- :link, :visited, :active, :focus.
With the introduction of CSS3, it has become convenient to differentiate between the two, as pseudo elements are recognized by (::) double colon and pseudo classes are recognized by (:) single colon.
Q 5: What are the different elements of CSS box model?
Answer 5:
CSS Box model is responsible for providing dimensions to each and every element that is there in a webpage whether it is inline and block. There are 4 elements that consider this rule:
First one is Content – It contains the text, image, video and various content.
Second one is Padding – It is used to add spacing between the border of the box and the content that is inside the box.
Then third one is Border – It is the line between the padding and margin of the box.
Then the last one is Margin – It is used to adjust the space between the main box and the boxes that are surrounding that box.
Q 6: Explain the functioning of z-index?
Answer 6:
The first and most important thing of z-index is that it works with positioned elements. Here, a proper stack order is assigned to the elements. The more the stack number, then this will bring the element in front of the one which has lower stack order.
The maximum value of the stack order is 0. And less we can use the negative values specially in the case of pseudo elements while placing one above the another.
Q 7: Explain different types of positions?
Answer 7:
There are 5 different positions in CSS namely:
1. static – These elements go with the flow of the page and are not at all affected by the top, bottom, right and left properties. It is a default value that is given to any element.
2. relative – In this type of position the elements are comparative to their normal position. To this you can add properties such as top, left, bottom and right. These elements are relative to themselves.
3. absolute – In this the positioning of the element will be relative to the position of another element that is enclosed in the element.
4. fixed – The elements that have fixed position are positioned relative to the window of the browser or the viewport. That is why these elements do not move any where even when scrolling the page.
5. sticky – When you want to fix and element with respect to its parent then we use position sticky. It works similar to the position fixed.
Q 8: What is the difference between active, visited and normal or not visited links?
Answer 8:
The selector :active shows that a content is active that is currently in use. The default color of this link is the color of the link.
The selector :link denotes the unvisited link. The link that has not been visited even once. The default color of these kinds of link is blue (#0066cc).
The selector :visited denotes the link that has been visited. The default color of these kinds of link is purple (#cc33cc).
Q 9: How can we get the scrolling text in a web page?
Answer 9:
The scrolling behavior on a particular content can be easily achieved with the help of marquee tag. With this one can scroll the text from left to right, right to left, top to bottom and even bottom to top with different speeds.
Q 10: What are the different types of lists that are used while designing a web page?
Answer 10:
There are mainly three types of lists that are used:
First, Unordered List:
The items which can be placed in any order, these kinds of elements are placed in ul list format.
For example:
List of fruits –
- Orange
- Apple
- Grapes
- Banana
Then second one is Ordered List:
When it is mandatory to keep items or particular steps in order then ol list format is used. It can be decimal number, roman numbers, upper-case alphabets, lower class alphabets etc.
For Examples: Steps of explaining a recipe need to listed in an order manner.
- Pizza
- Pasta
- Burger
Last one is Description List:
Before the introduction of HTML5 these used to be called as definition lists. It consists of name and value. One name can be associated with more than one value and vice-versa is also true.
Are you not feeling confident enough for going for an interview? Then you should first go for a proper HTML and CSS course from an institute where you will be guided by industry expert professionals and make your concepts clear.
Here, I am going to give you details of a course while will give you proper insights about HTML and CSS.
HTML5 & CSS3 Course Details
Course Name: HTML5 and CSS3 Master Course
Mode of Training: Classroom as well as Online Training Mode
Duration of Course: 02 Months
Overview of contents of course:
Before, going for this course you just need to have knowledge of how to operate a computer. If you have fair idea of Adobe Photoshop as well as JavaScript that will be an added advantage during learning process.
During this course you will learn:
Basic to advance level of HTML which will include how is it related to web, forms, tables, lists, frames, differences between HTML as well as HTML5 and many more things.
As HTML and CSS go hand in hand.
In CSS you will learn about its basics, how to format a text, different kind of font properties, different types of positions, how can HTML5 elements be dynamically be generated in CSS3 and many other tips as well as tricks that are there in CSS3.
After providing you complete knowledge of these then you will be guided that how can you:
Firstly, test as well as validate using CSS3.
Then, you will be taught that how can you deal with the issues that occurs in cross-browsers, how to add a feature that makes your website search engine friendly and many more.
After the successful completion of the learning process you will be assigned a complete project that will build up your confidence.
Career Options for HTML Developers
After completion of this course you can go for the following career options such as HTML5 Developer, Front end developer, Web designer, UI designer, Website Designer, CSS expert and many more.
Conclusion
All the Best who are planning to appear for an interview and I am sure the list that I have provided will be of great help to you. Other than that, if you are planning to take the HTML & CSS course that I have listed, then go for it as it is provided by the best HTML and CSS training institute in Delhi i.e. us, ADMEC Multimedia Institute. For any further information feel free to contact on 9811818122 and 9911782350.
