programming beginner 10 sample questions

Html/css MCQ Practice Test

Creating semantic HTML elements like <div>, <span>, <p>. Styling text and layouts using CSS properties.

Q1. You want to create a CSS animation that smoothly scales an element from 100% to 50% of its original size over 2 seconds, then back to 100% over another 2 seconds, and repeats infinitely. Which animation shorthand property correctly achieves this, using only one line of code for the `animation` property?

Explanation: The keyframes run one direction (100%→50%); with 'alternate', a 2s duration yields 2s shrinking then 2s growing. 4s would double each phase.

Q2. Which animation-timing-function creates the most natural smooth start and finish for a scale animation that shrinks and grows repeatedly?

Explanation: ease-in-out starts slowly, accelerates, and slows again at the end - the gentlest feel for repeated scaling. 'linear' moves uniformly and feels mechanical, and cubic-bezier(0.25, 0.1, 0.25, 1.0) is literally the definition of 'ease' (a duplicate option with a fast middle).

Q3. You want to create a CSS animation that smoothly scales an element from 100% to 50% of its original size over 2 seconds, then back to 100% over another 2 seconds, looping infinitely. Which of the following `animation` properties correctly achieves this, assuming you have already defined a keyframes rule named 'scaleAnimation'?

Explanation: The keyframes animate one direction (100% to 50%). With 'alternate', each cycle plays one direction, so a 2s duration gives 2 seconds shrinking and 2 seconds growing — exactly as required. A 4s duration would make each direction take 4 seconds.

Q4. You need a CSS-only animation that transitions an element's background-color from red to blue over 5 seconds, then back to red over another 5 seconds, repeating forever. Given the keyframes @keyframes color-cycle { 0% {background-color: red;} 50% {background-color: blue;} 100% {background-color: red;} }, which animation declaration is correct?

Explanation: With blue at the 50% keyframe and red at 100%, a 10-second duration gives exactly 5 s red→blue and 5 s blue→red, and 'infinite' repeats the cycle forever. 5 s would make each leg 2.5 s; 'alternate' is redundant because the keyframes already return to red; and 20 s doubles each leg to 10 s.

Q5. What is the purpose of the "alt" attribute in an HTML <img> tag?

Explanation: The "alt" attribute in an HTML <img> tag is used to provide a text description of the image for users who are unable to view the image, such as those with visual impairments or those who have disabled images in their browser. This text is also used by search engines to understand the content of the image.

Q6. What is the difference between the "margin" and "padding" properties in CSS?

Explanation: In CSS, the margin property is used to set the space between an element and its border, while the padding property is used to set the space between an element's content and its border. This means that margin is used for creating space between elements, while padding is used for creating space within an element.

Q7. What is the correct syntax to add a comment in an HTML document?

Explanation: In HTML, comments are added using the "<!--" and "-->" syntax. This allows developers to add notes to their code without affecting the functionality of the page.

Q8. Which CSS property is used to set the vertical alignment of a table cell?

Explanation: The vertical-align property is used to set the vertical alignment of a table cell. It can have values like top, middle, bottom, baseline, and others.

Q9. What is the purpose of the <style> tag in HTML?

Explanation: The <style> tag is used to embed a CSS stylesheet directly into an HTML document, allowing for in-line styling.

Q10. What is the difference between the "block" and "inline" display properties in CSS?

Explanation: In CSS, block elements are used to define elements that start on a new line and take up the full width available, such as headings and paragraphs. Inline elements, on the other hand, are used for elements that only occupy the space needed for their content, such as images and text.

That was just a sample. Sign up to unlock the full question bank with timed tests and certificates.

Sign Up Free
Html/css MCQ Practice Test | Mind Hustle