REVIEWER 2.pdf

HTML Fundamentals 1. What is the correct structure of a basic HTML document? a) b) c) d) Explanation: A well-formed HTML document starts with the element, which contains both the and elements. The section includes metadata, links to external stylesh...

HTML Fundamentals 1. What is the correct structure of a basic HTML document? a) b) c) d) Explanation: A well-formed HTML document starts with the element, which contains both the and elements. The section includes metadata, links to external stylesheets, and scripts, while the section holds the visible content of the webpage. 2. What does the DOCTYPE declaration do in HTML? a) Defines the type of HTML document. b) Defines the title of the HTML page. c) Describes the content type. d) Describes the CSS rules. Explanation: The declaration informs the browser that the document is written in HTML5. This helps the browser render the content according to HTML5 standards 3. What is the correct syntax for adding a comment in HTML? a) // This is a comment b) c) d) # This is a comment Explanation: HTML comments are written inside. These comments are not displayed by the browser and are used to add notes or explanations in the HTML code. 4. What tag is used to create hyperlinks in HTML?  a) b) c) d) Explanation: The tag (anchor tag) is used to create hyperlinks in HTML. The href attribute specifies the destination URL. 5. Which attribute is required in the tag? a) href b) alt c) src d) type Explanation: The src (source) attribute is required in the tag and defines the location of the image file to be displayed on the webpage. The alt attribute is also highly recommended for accessibility. 6. What does the meta charset="UTF-8" tag do in HTML? a) Specifies the text encoding used by the browser. b) Defines the type of browser used. c) Embeds a font style. d) Describes character encoding. Explanation: The tag specifies that the webpage uses UTF-8 character encoding, which supports a wide range of characters, including those from different languages and symbols. 7. Which element is used for the largest heading? a) b) c)  d) Explanation: The tag represents the top-level heading in HTML and is the most prominent heading, often used for the main title or heading of a webpage. Headings from to decrease in size and importance. 8. Which HTML element represents a section of navigation links? a) b) c) d) Explanation: The element is used to define a section of the webpage that contains navigation links, such as a menu or links to different sections of the site. 9. Fill in the blank: The _______ attribute in an tag specifies where the link will open. ANSWER: target/target=”” Explanation: The target attribute specifies where the linked document will open. For example, target="_blank" opens the link in a new tab or window. 10. True or False: The element is always placed inside the section of an HTML document. ANSWER: FALSE, the title element is always placed inside the section. Explanation: The element is placed inside the section of the document. It sets the title of the webpage, which is displayed on the browser tab or window title, not in the body content. HTML Forms 11. Which of the following is NOT a valid input type in an HTML form? a) text b) checkbox c) date d) colorpicker Explanation: While text, checkbox, and date are valid input types in HTML forms, colorpicker is not an official input type. However, the correct type for a color picker in HTML5 is color. The answer could be misleading as the terminology can vary. 12. What is the purpose of the action attribute in the element? a) Specifies the method of form submission. b) Specifies the URL to which the form data will be sent. c) Defines the type of input fields. d) Determines the form's layout. Explanation: The action attribute in the tag indicates where the form data should be sent upon submission. This URL is usually the endpoint of a server-side script that processes the data. 13. Which input type is used to create a password field? a) text b) password c) email d) hidden Explanation: The password input type masks the text entered by the user, displaying it as dots or asterisks to protect sensitive information. 14. Fill in the blank: The _______ attribute makes a form field mandatory for the user to fill in. ANSWER: required 15. Explanation: The required attribute in an input field specifies that the user must fill in that field before submitting the form. If the field is left empty, the browser will alert the user. 15. True or False: The method="GET" in the form sends data in the URL query string. ANSWER: True Explanation: When method="GET" is used, the form data is appended to the URL in the query string, allowing users to see the data being sent. This is often used for search forms or when data does not need to be kept confidential. 16. What is the correct HTML for creating a drop-down list? a) b) c) d) Explanation: The element is used to create a drop-down list in HTML, with elements nested inside to define the individual options available for selection. HTML5 Semantic Elements 17. What is the purpose of HTML5 semantic elements? a) Improve SEO by defining sections clearly. b) Only style the webpage. c) Provide extra functionality for JavaScript. d) Offer advanced animations. Explanation: HTML5 semantic elements provide meaning and structure to web pages by defining different sections clearly (e.g., , , , , ). This improves search engine optimization (SEO) because search engines can better understand the content and context of the webpage. 18. Which of the following is a semantic element in HTML5? a) b) c) d) Explanation: The element is a semantic element that defines a section in a document, typically with a heading. In contrast, and are non-semantic elements that do not convey any meaning about their content. 19. What tag is used to define a footer in an HTML document? a) b) c) d) Explanation: The element is used to define a footer for a document or section, typically containing information such as copyright notices, links to related documents, or author information. 20. Fill in the blank: The _______ element is used to group content that relates to the main content, but is not essential to it. ANSWER: aside Explanation: The element is used to mark content that is tangentially related to the main content, such as sidebars, pull quotes, or related links, which provide additional context but are not essential to the main content. 21. True or False: The element is used to define independent, self-contained content, such as blog posts. ANSWER: True Explanation: The element is designed to represent a self-contained composition in a document, such as a blog post, news article, or user-generated content. It can be independently distributed or reused, and it typically has a heading and can include its own footer. HTML Links and Media 22. Which attribute of the element opens a link in a new tab? a) rel b) target="_blank" c) window="new" d) ref="_new" Explanation: The target="_blank" attribute in the (anchor) tag specifies that the linked document should open in a new tab or window. This is commonly used for external links to keep the user on the original page. 23. How do you embed a YouTube video in HTML? a) b) c) d) Explanation: The element is used to embed external content, such as a YouTube video, within a webpage. YouTube provides an embed code that includes an with the video source URL. 24. Fill in the blank: The _______ attribute in the tag defines the path to the image file. ANSWER: src/src=”” Explanation: The src (source) attribute in the tag specifies the path to the image file that will be displayed on the webpage. It can be a relative or absolute URL. 25. True or False: The element is used to embed audio content in HTML. ANSWER: True Explanation: The element is designed to embed audio content in HTML documents. It can include attributes like controls to display playback controls, src for the audio file source, and various formats supported by browsers. 26. Which element is used to display an image as a link? a) b) c) d) Explanation: This combination of the tag and tag allows an image to be clickable, redirecting the user to the URL specified in the href attribute when they click on the image. CSS Fundamentals 27. What does CSS stand for? a) Cascading Style Syntax b) Computer Styling System c) Cascading Style Sheets d) Creative Style Sheets Explanation: CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation and layout of HTML documents, enabling web designers to control the visual appearance of web pages. 28. Which HTML tag is used to reference an external CSS file? a) b) c) d) Explanation: The tag is used in the section of an HTML document to reference an external CSS file. It includes attributes like rel (relationship) and href (the URL of the CSS file). 29. Where should the CSS tag be placed in the HTML document? a) In the section. b) At the bottom of the. c) After the. d) Inside a. Explanation: The tag referencing an external CSS file should be placed in the section of the HTML document. This allows the browser to load the CSS before rendering the content. 30. Fill in the blank: The _______ property in CSS is used to change the background color of an element. ANSWER: background-color/background-color: [color];  Explanation: The background-color property in CSS is used to specify the background color of an element. This can be set using color names, hexadecimal values, or RGB/RGBA values. 31. True or False: Inline CSS has higher specificity than external or internal styles. ANSWER: True Explanation: Inline CSS (styles applied directly on an HTML element using the style attribute) has higher specificity than styles defined in external or internal CSS stylesheets. This means that if there is a conflict, inline styles will take precedence. 32. What is the correct syntax for applying a class selector in CSS? a) #classname { } b).classname { } c) classname { } d) Explanation: The correct syntax for applying a class selector in CSS is to prefix the class name with a period (.), indicating that the styles should be applied to all elements with that class. 33. How do you apply a style to all elements inside a element? a) p div { } Purpose: This selector targets all elements that are descendants of elements. However, this is not a valid scenario in HTML, as cannot contain block elements like. Therefore, this selector will not apply any styles effectively. b) div p { } Purpose: This is the correct answer. It targets all elements that are descendants of any element. This means any tag nested within a will receive the specified styles. c) div+p { } Purpose: This selector targets any element that immediately follows a element (adjacent sibling selector). It will not apply styles to elements that are nested within a , so it is not the correct choice for the question.  d) div~p { } Purpose: This selector targets all elements that are siblings of a element, meaning it applies styles to any that comes after a , but they must be on the same level (i.e., at the same nesting level). Again, this will not apply styles to elements inside a , so it is also not correct for the question. 34. What is the default display value of a element in CSS? a) inline b) block c) inline-block d) none Explanation: The default display value of a element is block. This means that elements occupy the full width available and start on a new line, stacking vertically in the document flow. CSS Box Model 35. What are the four components of the CSS box model? a) Content, Border, Margin, Text b) Padding, Margin, Width, Height c) Content, Padding, Border, Margin d) Width, Height, Margin, Background Explanation: The CSS box model consists of four components: Content: The actual content of the box (text, images, etc.). Padding: The space between the content and the border, which creates an inner space. Border: The edge around the padding (if any) and content, defining the box's outer edge. Margin: The space outside the border that separates the box from other elements. 36. Fill in the blank: The _______ property adds space between the content and the border of an element. ANSWER: padding Explanation: The padding property in CSS is used to create space between the content of an element and its border. It can be specified for all four sides or individually for each side. 37. True or False: The margin property affects the space inside the border of an element. ANSWER: False, padding property affects the space inside the border of an element. Explanation: The margin property affects the space outside the border of an element, separating it from other elements. It does not impact the space inside the border; that is controlled by the padding property. 38. Which CSS property controls the width of an element's border? a) border-size b) border-width c) border-style d) border-thickness  Explanation: The border-width property specifies the width (thickness) of the border around an element. It can be set to specific values (like 2px, 5px, etc.) or predefined keywords like thin, medium, or thick. 39. What CSS property can be used to create rounded corners? a) border-radius b) border-curve c) corner-style d) curve-radius Explanation: The border-radius property is used to create rounded corners on elements. You can specify different radii for each corner or use a single value for uniform rounding. 40. Fill in the blank: The _______ property specifies how elements should wrap in a flex container. ANSWER: flex-wrap Explanation: The flex-wrap property in a flex container controls whether the flex items should wrap onto multiple lines when there is not enough space in a single line. It can take values like nowrap, wrap, or wrap-reverse. CSS Positioning 41. Which CSS property is used to make an element position relative to its nearest positioned ancestor? a) position: fixed b) position: static c) position: absolute d) position: relative 42. What is the default position of an HTML element? a) absolute b) fixed c) relative d) static 43. True or False: An element with position: fixed stays in the same position even when the page is scrolled. ANSWER: True Explanation: An element with position: fixed is positioned relative to the viewport, meaning it will stay in the same position on the screen regardless of scrolling. This is useful for elements like navigation bars that should remain visible at all times. 44. Fill in the blank: The _______ property controls the stacking order of elements. ANSWER: z-index Explanation: The z-index property controls the stacking order of positioned elements (those with position values other than static). Elements with a higher z-index are displayed in front of those with a lower z-index. 45. What does the float property do in CSS? a) Controls the flow of text around an image. b) Fixes the position of an element. c) Stretches the element to full width. d) Changes the z-index of an element. Explanation: The float property allows elements, usually images, to be taken out of the normal document flow and have text wrap around them. When an element is floated, other inline elements will flow around it according to the float's positioning (left or right). Responsive Web Design 46. What is the purpose of a media query in CSS? a) To apply styles based on device features such as screen width. b) To embed media files into the web page. c) To change font size based on the viewport size. d) To create flexible grids. Explanation: Media queries are a key feature of CSS that allow developers to apply different styles to different devices or screen sizes. They enable responsive design by letting you specify styles based on conditions such as width, height, resolution, and orientation. 47. What CSS unit is commonly used for responsive design to define font sizes and layout dimensions? a) px b) em c) rem d) vw Explanation: While em and rem are also useful units for responsive design, vw (viewport width) is commonly used to define dimensions relative to the width of the viewport. It allows elements to scale relative to the size of the viewport, which is important for creating fluid layouts. 48. True or False: Media queries allow developers to target specific devices like smartphones and tablets. ANSWER: True Explanation: Media queries can indeed target specific devices by checking their characteristics (like screen size or orientation). This helps developers to tailor the website's layout and styles to provide a better user experience across different devices. 49. Fill in the blank: The _______ property in CSS ensures that an image scales responsively while maintaining its aspect ratio. ANSWER: max-width Explanation: The max-width property, when set to 100%, ensures that an image scales down with the viewport while maintaining its aspect ratio. For example:  img { max-width: 100%; height: auto; } 50. What CSS framework is popular for building responsive websites? a) Foundation b) Bootstrap c) jQuery d) Node.js Explanation: Bootstrap is a widely used CSS framework that includes responsive design features. It provides a grid system and components that make it easier to create responsive layouts without having to write extensive CSS code from scratch. Advanced CSS 51. Which CSS pseudo-class is used to select elements that are being hovered over by the mouse pointer? a) :hover b) :focus c) :active d) :pointer Explanation: The :hover pseudo-class applies styles to an element when the mouse pointer is over it. It is commonly used to change the appearance of buttons, links, and other interactive elements to improve user experience. 52. What is the correct CSS syntax for creating a linear gradient background? a) background: linear-gradient(to right, red, blue); b) background-color: gradient(red, blue); c) linear-gradient(to red, blue); d) background-gradient: red, blue; Explanation: This syntax correctly creates a linear gradient that transitions from red to blue from left to right. The linear-gradient() function is used to define the gradient, and the direction can be specified (e.g., to right, to left, to top, to bottom, or using angles). 53. Fill in the blank: The _______ property in CSS is used to apply transition effects on hover or focus states. ANSWER: transition Explanation: The transition property in CSS allows you to change property values smoothly (over a specified duration) when an element changes state, such as on hover or focus. For example:.button { transition: background-color 0.3s ease; } 54. True or False: CSS grid allows developers to create two-dimensional layouts. ANSWER: True  Explanation: CSS Grid Layout is a powerful layout system that allows developers to create two-dimensional layouts. It can manage both rows and columns, enabling complex designs with ease compared to other layout techniques like Flexbox, which is primarily one-dimensional. 55. Which CSS property would you use to make an element partially transparent? a) opacity b) visibility c) transparency d) alpha Explanation: The opacity property in CSS controls the transparency of an element. Its value can range from 0 (completely transparent) to 1 (completely opaque). For example:.transparent { opacity: 0.5; } 56. What is the primary difference between display: inline-block and display: block? a) Inline-block allows elements to flow inline but behave like block elements. b) Block elements are always stacked, inline-block elements are hidden. c) Inline-block elements are invisible. d) Block elements float while inline-block doesn't. Explanation: Elements with display: inline-block can sit next to each other on the same line (like inline elements), while still accepting width and height properties (like block elements). In contrast, block elements always start on a new line and take up the full width available. Practical Coding Questions (Fill-in-the-Blanks) 57. Fill in the blanks in the HTML code below to create a form that collects a user's name and email: Name: Email: 1. Fill in the blank for the form method: method Explanation: The method attribute specifies how to send form data. POST is commonly used for sending data securely. 2. Fill in the blank for the name input type: text Explanation: The input type for collecting a user's name should be text. 3. Fill in the blank for the email input type: email Explanation: The input type for collecting a user's email should be email, which provides basic validation for email formats. 58. Fill in the blanks to make the following paragraph text red, bold, and centered using CSS: This is a styled paragraph..styled-text {  color: red; font-weight: bold; text-align: center; } 1. Fill in the blank for color: red Explanation: The color property sets the text color. 2. Fill in the blank for font-weight: bold Explanation: The font-weight property sets the weight of the font, where bold makes the text bold. 3. Fill in the blank for text-align: center Explanation: The text-align property sets the horizontal alignment of the text. 59. Fill in the blanks to create a responsive image that adjusts to the screen size: Fill in the blank for max-width: 100 Explanation: Setting max-width to 100% ensures that the image scales down to fit within its container while maintaining its aspect ratio. CSS Specificity and Inheritance 60. What is CSS specificity? a) The priority of CSS rules. b) A new CSS framework. c) The CSS inheritance model. d) The browser's rendering process. Explanation: CSS specificity determines which CSS rules are applied to an element when multiple rules could apply. It is calculated based on the types of selectors used (inline styles, IDs, classes, and element types). 61. Fill in the blank: The CSS selector with the highest specificity score is _______. ANSWER: inline styles Explanation: Inline styles (defined directly on an element using the style attribute) have the highest specificity, followed by IDs, classes, attributes, and then elements. 62. Which of the following selectors has the highest specificity? a) #id b).class c) element d) * Explanation: The ID selector (#id) has higher specificity than class selectors (.class), element selectors (like div), and universal selectors (*). The specificity hierarchy is as follows: 1. Inline styles (highest) 2. ID selectors 3. Class selectors, attribute selectors, and pseudo-classes 4. Element selectors and pseudo-elements (lowest) 63. True or False: CSS styles defined with an ID selector have a higher specificity than styles defined with a class selector. ANSWER: True Explanation: ID selectors have a higher specificity than class selectors. Therefore, if both are applied to the same element, the styles defined with the ID selector will take precedence. CSS Flexbox and Grid 64. What is the main purpose of the CSS Flexbox layout model? a) To create responsive tables. b) To provide a one-dimensional layout for arranging items in rows or columns. c) To create animations. d) To apply font styles to text. Explanation: Flexbox is designed to handle layout in one dimension, either horizontally (rows) or vertically (columns), making it easier to distribute space and align items within a container. 65. Which CSS property defines the space between flex items in a flex container? a) flex-basis b) gap c) space-between d) padding Explanation: The gap property (previously known as grid-gap in CSS Grid) defines the spacing between flex items. It can be used to set both row and column gaps in a flex container. 66. Fill in the blank: The _______ property is used to align flex items vertically within a flex container. ANSWER: align-items Explanation: The align-items property aligns flex items vertically within the flex container according to the specified alignment (e.g., flex-start, flex-end, center, baseline, or stretch). 67. True or False: Flexbox is a one-dimensional layout model that allows items to be arranged in either a row or a column. ANSWER: True Explanation: Flexbox indeed allows for the arrangement of items in a single direction (either as a row or a column), which is its main advantage for building responsive layouts. 68. What is the purpose of the CSS Grid layout model? a) To create animations.  b) To style fonts and text. c) To create two-dimensional layouts with rows and columns. d) To manage transitions. Explanation: The CSS Grid layout model allows for the creation of complex layouts in two dimensions, enabling designers to define both rows and columns within a container, providing greater flexibility and control over the layout. 69. Fill in the blank: The _______ property in CSS Grid defines the number of columns in a grid container. ANSWER: grid-template-columns Explanation: The grid-template-columns property specifies the number of columns and their widths in a grid container. You can define fixed widths, percentages, or use the fr unit to allocate space proportionally. CSS Animations and Transitions 70. Which CSS property is used to create smooth transitions between styles? a) animation b) delay c) transition d) transform Explanation: The transition property allows for smooth changes from one style to another over a specified duration. It can be applied to any CSS property that has a numeric value or color. 71. True or False: CSS animations allow developers to create keyframe-based animations. ANSWER: True Explanation: CSS animations utilize keyframes to define the styles at various points during the animation sequence, enabling complex animations that can change styles smoothly over time. 72. Fill in the blank: The _______ property in CSS animations defines the time duration for each keyframe. ANSWER: animation-duration Explanation: The animation-duration property specifies how long the animation will take to complete one cycle from start to end. This affects the overall speed of the animation. 73. What CSS property is used to apply 2D and 3D transformations to elements? a) translate b) rotate c) transform d) perspective Explanation: The transform property allows developers to apply various transformations to elements, including translations (moving), rotations, scaling, and skewing, as well as 3D transformations for depth. Browser Compatibility and Testing 74. True or False: All CSS properties work the same across all web browsers. ANSWER: False Explanation: While many CSS properties are standardized, there can be variations in how different browsers implement them, which can lead to inconsistencies in rendering. It's important to test websites across multiple browsers to ensure compatibility. 75. Fill in the blank: To ensure your website works on multiple browsers, you can use _______ to check browser compatibility for specific CSS features. ANSWER: ‘Can I use’ 76. What tool is built into most browsers to inspect and debug HTML and CSS? a) CSS Linter b) Browser Developer Tools c) HTML Inspector d) CSS Framework Explanation: Browser Developer Tools (often accessed via right-clicking and selecting "Inspect" or pressing F12) allow developers to inspect HTML elements, modify CSS styles in real-time, and debug JavaScript, making it an essential tool for web development. Final Review 77. True or False: The element is often used to group block-level elements for CSS styling. ANSWER: True Explanation: The element is a block-level container that is often used to group elements together so that they can be styled with CSS or manipulated with JavaScript. 78. Fill in the blank: The _______ pseudo-class is used to target the first child of an element. ANSWER: : first-child Explanation: The :first-child pseudo-class is used in CSS to apply styles to the first child element of a parent container. 79. What is the difference between the display: block and display: inline properties? a) Block elements take up the full width of the container, while inline elements do not. b) Inline elements are hidden. c) Block elements are responsive by default. d) Inline elements float while block does not. Explanation: A block element takes up the full width available and starts on a new line, whereas an inline element only takes up as much width as its content and can sit alongside other inline elements. 80. Fill in the blank: The _______ property in CSS controls the size of an element's text. ANSWER: font-size Explanation: The font-size property in CSS is used to control the size of the text within an element. Code Exercises (Advanced Fill-in-the-Blanks) 81. Fill in the blanks in the following CSS rule that creates a two-column grid layout:.container { display: grid; grid-template-columns: 1fr 1fr; } Explanation: The display: grid; property creates a grid layout, and grid-template-columns defines two equal-width columns using the 1fr unit, which represents a fraction of the available space. 82. Fill in the blanks to create a transition effect for the background color of a button: button { background-color: blue; transition: background-color 0.5s ease; } button:hover { background-color: red; } Explanation: The transition property is used to create a smooth change in the background color over 0.5 seconds, with the transition effect being ease, which starts slow, speeds up, and then slows down again. 83. Fill in the blanks to center an element both horizontally and vertically inside its parent using Flexbox:.container { display: flex; justify-content: center; align-items: center; } Explanation: The display: flex; property enables Flexbox layout, and justify-content: center; horizontally centers the items, while align-items: center; vertically centers them. 84. Fill in the blanks to apply a simple fade-in animation to an element using CSS animations: @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }.element { animation: fadeIn 2s ease-in; } Explanation: The animation property applies the fadeIn animation over 2 seconds, with the ease-in timing function causing the animation to start slowly and then accelerate. Wrap-Up Questions 85. What is the difference between a class and an ID in CSS? ANSWER: class is reusable while id is not or its unique. 86. What does the position:sticky property do? ANSWER: allows the element to switch between relative and fixed depending on the scroll position and within the bound of its parent element or containing element. 87. Why is it important to use semantic HTML? ANSWER: for readability of code by using meaningful elements. 88. What is the box-sizing property in CSS, and why is it useful? ANSWER: defines the width and height of an element are calculated, with box-sizing: border-box, the padding and border are included in the calculation of width and height or layout calculations. 89. Explain the purpose of the z-index property in CSS. ANSWER: controls the stocking order of the elements. Meaning those element with higher z-index will appear above with those lower values. And this will only work with elements position value other than static. 90. How can you make a website mobile-friendly? ANSWER: by using responsive design like flexible grid layouts, media queries, and responsive images. 91. What is the difference between absolute and relative positioning in CSS? ANSWER: relative positioning moves an element relative to its normal position in the document, while absolute positioning removes the element from the document flow. 92. How can you make an image responsive in CSS? ANSWER: set the max-width to 100% and height to auto. 93. What are some common tools for testing cross-browser compatibility? ANSWER: BrowserStack, CrossBrowserTesting, and Can I use. 94. What is the viewport meta tag, and why is it important for responsive design? ANSWER: controls the layout of the webpage on mobile devices. 95. What is the difference between visibility: hidden and display: none in CSS? ANSWER: visibility hides element but still occupies space in the layout, while the other one completely remove the element from the layout.