HTML5 & CSS3

Semantic HTML refers to using HTML markup that reinforces the meaning of the information (e.g., `<article>`, `<header>`, `<nav>`). It is crucial for SEO, accessibility, and machine readability.

Flexbox is a one-dimensional layout system used for aligning items along a single row or column. CSS Grid is a two-dimensional layout system designed for complex layouts over both rows and columns simultaneously.

The CSS Box Model describes rectangular boxes generated for elements in the document tree. It consists of: Content area, Padding area, Border area, and Margin area.

Specificity is the algorithm used by browsers to determine which CSS rule should be applied if multiple competing rules match the same element. In-line styles > IDs > Classes > Elements.

The 'DOCTYPE' declaration is used to inform the browser that the document is written in HTML5, allowing it to render the page correctly.

You can create a responsive image in HTML5 by using the 'img' tag with the 'srcset' attribute, which allows you to specify multiple image sources for different screen sizes.

The 'section' element is used to represent a generic section of a document, while the 'article' element is used to represent an independent piece of content, such as a blog post or news article.

You can style a HTML5 'canvas' element using CSS3 by applying styles to the 'canvas' element itself, such as background-color, border, and width.

The ':before' and ':after' pseudo-elements are used to insert content before or after an element, allowing you to add decorative elements or other visual effects to your design.

You can create a CSS3 gradient by using the 'linear-gradient' or 'radial-gradient' functions, which allow you to specify the colors and direction of the gradient.

The 'ems' unit is relative to the font size of the parent element, while the 'rems' unit is relative to the root element of the document, allowing for more consistent sizing across the page.

You can use CSS3 media queries to apply different styles based on screen size by using the '@media' rule and specifying the screen size or other conditions, such as orientation or device type.

The 'box-shadow' property is used to add a shadow effect to an element, allowing you to create depth and visual interest in your design.

You can create a CSS3 transition effect by using the 'transition' property and specifying the properties to be transitioned, the duration of the transition, and the timing function.

The 'flex' layout mode is used for one-dimensional layouts, while the 'grid' layout mode is used for two-dimensional layouts, allowing for more complex and flexible layouts.

You can use CSS3 to create a sticky footer by using the 'position' property and setting it to 'fixed' or 'absolute', and then specifying the bottom and left positions.

The 'transform' property is used to apply transformations to an element, such as rotation, scaling, or translation, allowing for complex visual effects.

You can create a CSS3 animation by using the '@keyframes' rule and specifying the animation sequence, and then applying the animation to an element using the 'animation' property.

The 'margin' property is used to set the space between elements, while the 'padding' property is used to set the space between an element's content and its border.

You can use CSS3 to create a horizontal navigation menu by using the 'display' property and setting it to 'inline-block', and then styling the menu items and links.

The 'border-radius' property is used to set the radius of an element's corners, allowing for rounded corners and other curved shapes.

You can create a CSS3 dropdown menu by using the ':hover' pseudo-class and the 'display' property to show and hide the menu items.

The 'absolute' positioning scheme is used to position an element relative to its nearest positioned ancestor, while the 'relative' positioning scheme is used to position an element relative to its normal position.

You can use CSS3 to create a full-screen background image by using the 'background-size' property and setting it to 'cover', and then specifying the background image and position.

The 'z-index' property is used to set the stacking order of an element, allowing you to control which elements appear on top of others.