Most Frequently Asked HTML & CSS Interview Questions and Answers to Crack Any Interview

Explore more such useful questions here - 10 Most Common Interview Questions and Answers of HTML5 and CSS3

CSS Box Sizing

The CSS Box Model describes the way block boxes are formatted. Block boxes can be given dimensions, margins, padding, and borders.

When we add these properties to a block box, and that box has a height and / or width applied, that box will increase in size according to the values assigned to these properties.

Example:

Assume we have placed a div tag on the page. The div tag generates a Block Box.

Assume that we gave that div a width of 500px and gave it padding of 10px on all 4 sides of the box.

According to the CSS Box Model, the total width of that div is now 520px: 500px + 10px + 10px

In the above example, the box properties (padding, margins, borders) are added to the box, making it grow is size.

CSS - Box Sizing Property

Now, with the CSS3 box-sizing property, we can change the way box properties are calculated and rendered in a browser.

If we use box-sizing with a value of "border-box", then borders and padding will be added to the inside of the box and will not cause the total width or height of a block box to increase in size.

Box-Sizing with a value of 'border-box' can really come in handy. For instance, let's suppose you add a div tag to the page, you float the div to the left or right. Well, when you float a div, you need to give that div a width. Otherwise, you will not have control over the total width and your layout or design may suffer because of this. Thus, a width is needed.

Now suppose you need to add padding to this floated div that has a width, but you do not have enough space to accommodate this or you find yourself having positioning issues due to this -- a simple way to handle this is to use the box-sizing property with a value of border-box.

MUST USE VENDOR PRE-FIXES

Because box-sizing only has the partial support for most browsers, we must use these pre-fixes to gain full support in all the browsers.

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
} 

box-sizing:	used to control the way box properties are calculated when added to a Block Box.
Initial {Default) Value:	content-box (specified borders, padding, and margins will be added to the total height and or width if these dimensions are specified.)
Values:	content-box | border-box | Inherit
Inherited:	No
box-sizing:	Border-box; specified borders and padding will be added to the inside of the box and will not cause the total width or height of a block box to increase in size.

HTML5 Forms Elements

Now a days almost every one visit a website, at least one in the day. And we find sign-up form, registration form or inquiry form on almost every websites. These forms are generally created in HTML in beginning and in now a days HTML5 is widely used to create form. Because In HTML5 forms some elements are new and its very useful.

 

One of the best things about HTML5 forms is that we can use almost all of these new input types and attributes right now. They don’t even need any shivs, hacks, or workarounds. That isn’t to say they’re all “supported” right now, but they do cool things in latest browsers that do support them-and degrade gracefully in browsers that don’t understand them. 

New input types:

There are the some input types in HTML5. In these input types, few are directly connected to be displayed in the web browser, where remain are more useful for there semantic value and/or connected to validation of them. The main advantage input types too is that if it’s not supported in all web browser, it will default back to a regular <input type=”text”> element: no errors, no multiple code versions to handle.

 

Below are Some New Input Types in HTML5:

1. Color: Gives the end user a native color picker to choose a color.

Exp: <input type="color" value="#b97a57">

2. Date: Offers a datepicker.

Exp: <input type="date" value="2016-11-07">

3. Date time: An useful element to select both time and date.

Exp: <input type="datetime" value="2016-12-09T21:22:34.31">

4. Datetime-local: An useful element to select both time and date, with local settings support.

Exp: <input type="datetime-local" value="2016-02-07T21:52">

5. Email: It's a field for enter e-mail id(s).

Exp: <input type="email" value="raj@admecindia.co.in">

6. Month: Used to select a complete month.

Exp: <input type="month" value="2016-25">

7. Number: Use to insert a number

Exp: <input type="number" value="8">

8. Range: It's Offers a slider to set to a particular position.

Exp : <input type="range" value="26">

9. Search: A field, which is used for search queries.

Exp : <input type="search" value="[any search text like (admec multimedia institute)]">

10. Tel: used to selecting a telephone number.

Exp : <input type="tel" value="[Any integer value]">

11. Time: for keep certain time.

Exp : <input type="time" value="11:21">

12. URL: Used to Insert a URL.

Exp : <input type="url" value="admecindia.co.in">

13. Week: selecting a particular week.

Exp : <input type="week" value="2011-W24">

As you can seen In above mention topics with all the new input types, attributes a lot of the things we spent countless hours on implementing before will be native in web browsers, saving us a lot of work and offering users something extremely well tested and implemented. HTML5 really invoked a revolution on the web design and web development with open standards to try and meet all the needs of developers, and it is all implemented in a very fast pace.

Important Colors Names and Color Codes in HTML

Colors is most valuable things in our life. Without colors be cannot express our ideas . In electronic things (TV and computer display) use of RGB colors ( Red, Green, Blue). In HTML use of color name with codes. When in HTML methods describing and specifying those colors output in web page show colors. 

In HTML colors write to use with proper hex and colors (as like for put white color in our web page be have to write code #ffffff )and it colors code use in CSS property with HTML. CSS property be use for a particular situation will depend on what it is you're applying color to. 
 

For example

In CSS properties use of two types foreground-color property (for applying color to an element's text ) and background-color property (for applying color to an element's background).

HTML Color Name :-

HTML Color codes :-

 

RGB (Red, Green, Blue):

With HTML, RGB color values can be specified using this formula: RGB (red, green, blue).Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

CSS Coding for Colors :-

!DOCTYPE html>

<html>

<body>

    <h2 style="background-color:red">

    Background-color set by using red

    </h2>

    <h2 style="background-color:orange">

  Background-color set by using orange

    </h2>

    <h2 style="background-color:yellow">

  Background-color set by using yellow

    </h2>

    <h2 style="background-color:blue;color:white">

  Background-color set by using blue

    </h2>

    <h2 style="background-color:cyan">

  Background-color set by using cyan

    </h2>

</body>

</html> 

CSS Coding for Colors (output) :-

Background-color set by using red
Background-color set by using orange
Background-color set by using yellow
Background-color set by using blue  
Background-color set by using cyane

CSS supports140 standard color names.  

Make a Career as a Back-end Developer or Front-end Developer at ADMEC Multimedia Institute

Communication is known as source of medium to share our products, services, business, and information. Modern time website is one of the best platforms to communicate within the audience in a particular area related to geography, interest, time, age etc. Due to the availability of the internet among people more and more people go online each day and it is increasing rapidly too.

According to a research only 10-12% of the total population of India uses online shopping on regular or occasional basis while in contrast china 35%-45% and USA 75%-85%. So, this is the reason why India is a booming industry for web designers and developers.

There are millions of websites that offer online shopping, services, education, free of cost information, and entertainment. So choosing a career in web design and web development can be a right decision for you. It is important to know the aspects of website before selecting website development as a career. There are two aspects of any websites called front end and back end.

You can choose your career either in front end development or back end development. Front end developers, develop interface through which customer interact and back end developers, represents websites in the coded form through which its internal features works. The front end through which customer or visitor interacts with a website is called web page and creation of it called web designing or UI development.

These web pages are designed using HTML, CSS, JavaScript, jQuery, BootStrap, AngularJS, Photoshop etc. These pages involve all the things that users see including text, images, header, footer, sidebar, menus, newsletter, audio, video etc.

Who can make career in Web Designing or UI Development?

If some one has great deal of creative energy within with logical thinking then it is a right option to make a career.

For the database connectivity back-end developers use PHP, Python, Java, ASP .Net and Ruby mostly although there are so many other also available. These languages also called server side languages. We can also say that all the activity done on the server-side no users can analyze in the browser as it is compiled on servers and preferred to the browser in HTML format. These developers are called programmers. They generally focus on features of websites like: security, structure, database management, user management, comments management, content management etc.

A professional developers or programmers usually know HTML and CSS, but definitely they do not focus on it. They always try to focus more and more on advanced programming languages through which they handle payment gateway integration, search feature, and many similar features. Because in comparison to static websites, management of database of dynamic websites is very tough. A dynamic site requires a database to work properly.

Who can make career in Web Development?

If some one has average level of interest in creative things but higher logical thinking and strategy making skills then it is a right option to make a career.

Hopefully, my explanation on front end development and back end development will help you in understanding the difference between both and you will be able to take decision for your career.

We offer web master course, which help us to become a complete front end and back end developer along with web promotion and web maintenance. We teach us to design and develop e-commerce websites, responsive websites, static and all types of dynamic websites, web applications, content management, database connectivity and digital marketing etc. After completion of web master courses, we can get highly paid jobs in GUI Designing, UI Development, Web Designing, Web Development, WordPress Development, Drupal Development, E-commerce Website Development, and Web Promotion.

Transform Functions in CSS3

CSS 3 transform property changes the coordinate position of CSS. By this property element can be translated,rotated, scaled, skews .

The transform functions include:

translate()

The translate(x, y) function is similar to relative positioning, translating, or relocating, an element by x from the left, and y from the top.

translateX()

The translateX(x) function is similar to the translate() function above, but only the left/right value is specified.

translateY()

The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified.

scale()

The scale(w, h) property scales an element by w width and h height. If only one value is declared, the scaling will be proportional. Since you likely don’t want to distort an element, you’ll generally see only one parameter in this transform function.

scaleX()

The scalex(w) function is similar to the scale() function above, but only the width value is specified. It is the same as declaring scale(w, 1).

scaleY()

The scaley(y) function is similar to the scale() function above, but only the height value is specified. It is the same as declaring scale(1, h)

rotate()

The rotate(angle) function with rotate an element about the point of origin (described below) but the angle value specified.

skew()

The skew(x,y) function specifies a skew along the X and Y axes. The x specifies the skew on the x-axis, the y specifies the skew on the y-axis. If there is only one parameter, then it’s the same as skew(x, 0), or skewX(x) . The values are angles: degrees, turns or grads.

skewX()

The skewx(x) function is similar to the skew() value above, but only the x-axis value is specified. It is the same as declaring skew(x,0).

skewY()

The skewy(y) function is similar to the skew() value above, but only the y-axis value is specified. It is the same as declaring skew(0,y).

The elements styled with CSS3 can be transformed in 2D or 3D space using CSS transform functions. CSS3 is a useful language to describe the rendering of structured documents like (HTML5 and XML) on screen, on paper etc.

Learn The Basic Concepts of The HTML5 and CSS3

HTML stands for hypertext markup language, which is widely used for structuring and presenting content for the world wide web. The latest version of the HTML is called HTML5 i.e.,the fifth revision. The main aim behind of this language is to improve it for the latest multimedia while keeping it easily readable by humans and clearly understood by computers and all other devices (web browsers, parsers, etc).

HTML5 is a single markup language, which includes HTML and XHTML syntax. This language includes detailed processing models to encourage more inter-operable implementations; it extends, improves and rationalists the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. Due to this reason this language is much more useful for the cross-platform mobile applications. Lots of feature of HTML5 is develop with the consideration of being able to run on small-screen devices such as smartphones and tablets.

There are some semantic feature in HTML5, which includes the new elements like:(video), (audio) and (canvas), as well as the integration of scalable vector graphics (SVG) content and MathML for mathematical formulas. The main concept of developing this feature is to handle multimedia and graphical content on the world wide web easily without using plugins and APIs. Another elements of this language is (section), (article), (header) and (nav), which is designed to enrich the semantic content of documents.

What Is CSS3?

CSS3 is stands for Cascading style sheet version 3. The main changes of latest CSS level 3 is introduction of modules.

Some important modules of the CSS3 are :

• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Using CSS3 we can easily maintain the look and design of the Website. Using combination of Html5 and CSS3 we can make our website much more attractive to the users. Using the CSS3 code we can represent our html5 code in different styles for the different rendering methods like in smartphones, tablets,in print or by voice on speech based browsers. Responsive web designs allows us to adjust the website according to the size of screens like smart phones, tablets and small screen devices. Using CSS3 we can design table less website, which is helpful in developing responsive websites.With the power of CSS3, it is possible to create some very cool and effective web elements that can just slot into place on any eCommerce website.

Practical Differences in Opacity and Alpha in CSS3

Both Opacity and Alpha refers to the same feature: the level of transparency. However, their usage and effect is very different.

1.The “Opacity” means the transparency of an element. “RGBA” stands for Red Green Blue Alpha. RGB will set the color of an object and “Alpha” sets the level of opacity.

2. Opacity is a property. Alpha is the one of the components of RGBA.

3. Opacity affects the entire element (including child elements) on which it is applied, whereas Alpha value will affect the color and level of transparency of the object where it is applied. This can be further explained with below example.

Example:-

 If a square is made and text is written inside the square and Opacity property is applied, then depending upon the opacity values, transparency effect will be reflected on entire element i.e. both on the shape as well as text. (See Figure 1.)

                                                 Figure 1. Opacity Example

Whereas if the same square and text is made and “Alpha” effect in RGBA is applied then only square will be affected and square color will be changed depending upon the alpha values. Text will remain unaffected. (See Figure 2.)

4. The value of Opacity and Alpha can be an integer or decimal depending upon the values taken between 0-1.

VALUE	MEANING
0	Element would be fully transparent
Any value between 0 (eg. 0.5) and 1	Element would be translucent.
1	Element would be fully opaque

Learn more about HTML5 and CSS3 at ADMEC Multimedia Institute.

HTML5 & CSS3 Courses institutes in Delhi

Are you looking for HTML5 and CSS3 training institute? If you are aiming to gain in-depth knowledge of HTML5 and CSS3 then ADMEC multimedia is right place for you. Our course content based on core techniques in HTML5 and CSS3. Our complete course is fully theoretical and practical based. As we like to focus on both sides of it to prepare our students for the big companies. We believe that without the theoretical knowledge of HTML and CSS one can not use it fully. Our experienced professional trainers aiming to train students on HTML5 based live projects, so that after completion of the course student can easily develop HTML5 based websites or applications  themselves.

Our HTML5 and CSS3 practical training ensures students to go through the HTML5 and CSS3 very advanced and new features like: HTML5 Semantic Tags, HTML5 Audio and Video, Canvas, HTML5 values and units, HTML5 Geolocation, HTML5 Drag and Drop, CSS3 values and units, CSS3 Selectors, CSS3 Typography, CSS3 Transitions and Transforms, Testing and Validating CSS3, Media Queries etc. The complete HTML5 CSS3 course content is also mentioned on our website.

Our HTML5 and CSS3 web design course is designed to get you started with HTML5 and CSS3 website designing. During the training period you can turn any project or idea in HTML5 and CSS3 website with the direct help of our instructors. Our experienced HTML5 & CSS3 professionals cooperate student to develop website as the student wishes.

Our professional trainer creates HTML5 and CSS3 websites in the classroom while teaching so that you can understand the exact process of HTML5 and CSS3 website development. ADMEC Multimedia have been implementing professional website solutions across a range of websites. Our course content is a perfect fit all the purposes and websites even if you are interested to develop HTML5 and CSS3 based website for yourself or for someone else.

Our training courses are available in both classroom and online mode. This training can be taken as a morning, evening, weekday or even on the weekends.