CSS specificity is the set of rules that determine which CSS styles are applied to an HTML element when multiple CSS rules are targeting the same element with conflicting styles.

CSS specificity is based on the number and type of selectors used in a CSS rule. Specificity is calculated by assigning a weight to each selector and then combining the weights to determine which rule takes precedence. The order of precedence in CSS specificity is:

1. Inline styles - Styles that are applied directly to an HTML element using the style attribute.
2. ID selectors - Selectors that target an HTML element by its ID attribute.
3. Class selectors, attribute selectors, and pseudo-classes - Selectors that target an HTML element by its class attribute, attribute values, or state (such as :hover).
4. Element selectors and pseudo-elements - Selectors that target HTML elements by their tag name or by a specific part of an element (such as ::before and ::after).

   If two or more CSS rules have the same level of specificity, then the rule that appears last in the CSS document will take precedence.

Is the ability of child elements to inherit CSS styles from their parent elements. This means that if a style is applied to a parent element, all of its child elements will inherit that style by default. For example, if a font size is set on the body element, all text inside the body will inherit that font size unless a more specific style is applied to override it.

Is the process by which styles are applied to HTML elements based on their specificity and order in the CSS document. When there are conflicting styles targeting the same element, the style with the highest specificity takes precedence. If two styles have the same specificity, the style that appears last in the CSS document will take precedence.

overrides other styles, even if they have higher specificity

SASS helps to make writing and managing CSS more efficient and scalable, allowing developers to write cleaner, more organized, and maintainable code. Some of the key features of SASS include:

• Variables: Allows developers to store and reuse values throughout their stylesheets.
• Nesting: Provides a way to write more organized and readable styles by nesting selectors within one another.
• Mixins: Allows developers to define and reuse sets of CSS declarations across their stylesheets.
• Inheritance: Provides a way to create a hierarchical relationship between CSS classes, allowing one class to inherit styles from another.
• Functions: Provides a way to write reusable code that can be used to perform calculations or manipulate values in CSS.

GIF89a is an updated version of the GIF87a format that supports transparent backgrounds, animation loops, and additional features.

The float property in CSS is used to position an element to the left or right of its container, allowing text and other elements to wrap around it.

Image interlacing

Image interlacing is a technique used to load images gradually, where a low-resolution version of the image is displayed first and then progressively more detailed versions are added until the full image is displayed.

The video element is used to embed video content into a web page, allowing users to play, pause, and control the playback of video files directly in the browser without the need for a separate video player.

• attributes
• controls
• Adds standard controls
• loop
• continuously loops the video playback.
• poster
• Specifies image
• file formats
• MP4
• widely supported by most devices and platforms and is commonly used for sharing video content online
• WebM
• designed to be used for HTML5 video and is supported by popular web browsers such as Chrome and Firefox
• Ogg
• used primarily for high-quality streaming and is often used in combination with the Vorbis audio codec

The box model is essentially a rectangular box that encloses the content of an element, along with optional borders, padding, and margins.

• Content
• The actual content of the HTML element, such as text or images.
• Padding
• The space between the content and the border.
• Padding is used to create space around the content, making it easier to read and more visually appealing.
• Border
• A line or area that surrounds the padding and content, creating a boundary between the element and the rest of the page
• Margin
• The space outside the border, which separates the element from other elements on the page.

• Static
• This is the default positioning scheme, in which an element is positioned according to the normal flow of the document.
• Relative
• In relative positioning, an element is positioned relative to its normal position in the document flow
• Absolute
• In absolute positioning, an element is positioned relative to the nearest positioned ancestor element (an element with a position property other than static).
• If no ancestor elements are positioned, the element is positioned relative to the document itself.

• HTML 1.0 (1991) - The first version of HTML, which introduced basic markup tags for creating web pages.
• HTML 2.0 (1995) - An improved version of HTML 1.0 that introduced new features like tables, image maps, and form elements.
• HTML 3.2 (1997) - A major upgrade that standardized many of the features previously implemented differently by different browsers and added support for style sheets.
• HTML 4.01 (1999) - The last version of HTML before the introduction of XHTML, which added more features like frames and multimedia support.
• XHTML 1.0 (2000) - A stricter, more modular version of HTML that follows the rules of XML and requires all tags to be closed and all attributes to be quoted.
• HTML5 (2014) - The current version of HTML that introduces new tags and attributes for multimedia, graphics, and interactivity, as well as new APIs for web applications.

The purpose of an HTML form is to collect and submit data from website visitors to a server, allowing users to input data through various form controls and interact with a website in a more personalized and effective manner.

• <form> element: This is the container element that defines the start and end of the form.
• Form controls:
  • <input> element: This is the most commonly used form control, and it allows users to enter text, numbers, dates, and other types of data.
  • <textarea> element: This form control allows users to enter multi-line text, such as comments or messages.
  • <select> element: This form control allows users to select options from a dropdown list.
  • <button> element: This element is used to create a clickable button that can trigger an action or submit the form.
  • Other form controls include checkboxes, radio buttons, and file upload controls which I will give examples for below.
• <label> element: This element is used to provide a label or description for each form control, which helps users understand what information they should enter.
• Action attribute: This attribute specifies the URL of the server-side script that will process the form data.
• Method attribute: This attribute specifies the HTTP method used to submit the form data to the server, which is typically either GET or POST.

<form action="/submit-form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="USA">United States</option>
    <option value="CAN">Canada</option>
    <option value="MEX">Mexico</option>
  </select>

  <label for="subscribe">Subscribe to newsletter:</label>
  <input type="checkbox" id="subscribe" name="subscribe" value="yes">

  <label for="gender">Gender:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>

  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>

  <button type="submit">Submit</button>
</form>

• Server-side languages are executed on the server.
• Server-side languages are used to create dynamic web content.
• Server-side languages are typically more powerful than client-side languages.

• Common languages:
• PHP
• Ruby
• Python
• Java
• JavaScript (Node.js)
• Commonly used for:
• Dynamic web content generation
• User authentication and security
• Data processing and manipulation

The DOM stands for Document Object Model. It is a programming interface for HTML and XML documents, which represents the document as a tree-like structure of objects.

The DOM allows developers to:

• Manipulate content
• Handle events
• Change styles dynamically

By using the DOM, developers can create dynamic and interactive web pages using programming languages like JavaScript. This allows for rich user experiences without the need for server-side processing or page reloads.

// Get the div element by its ID
var myDiv = document.getElementById("myDiv");

// Create a DOM object for the div element
var myDivObject = new Object();
myDivObject.element = myDiv;
myDivObject.color = "blue";
myDivObject.showColor = function() {
  alert(this.color);
};

In this example, we first use the getElementById() method to get the <div> element with an ID of "myDiv". We then create a new JavaScript object called myDivObject, which has three properties:

• element - This property contains a reference to the DOM element that we retrieved earlier.
• color - This property stores the color "blue".
• showColor() - This is a method that displays the value of the color property in an alert dialog box.

Now we can use the myDivObject object to manipulate the <div> element and its properties. For example, we could change the color of the element like this:

                myDivObject.element.style.backgroundColor = "red";

This would change the background color of the <div> element to red. We could also call the showColor() method to display the color property in an alert dialog box:

myDivObject.showColor();

This would display the message "blue" in an alert dialog box.

HTML5 API

An HTML5 API is a set of JavaScript functions and methods that are provided by modern web browsers as part of the HTML5 specification.

• Use responsive web design to ensure the website adapts to different screen sizes
• Minimize page load times by optimizing images, reducing code and scripts, and using caching
• Optimize navigation for mobile by using dropdown menus, hamburger menus, or other mobile-specific options
• Make sure all interactive elements (buttons, links, forms, etc.) are easy to use on touchscreens
• Test the website across different mobile devices and web browsers to ensure compatibility and functionality

The viewport meta tag is used in HTML to provide instructions to web browsers on how to display the content of a web page on different devices.

AJAX (Asynchronous JavaScript and XML) is a web development technique that allows web pages to dynamically update content without requiring a full page reload.

The W3C Authoring Tools Accessibility Guidelines (ATAG) 2.0 is a technical standard that explains how to make web content authoring tools more accessible and supportive of accessible web content12. It has two parts:

1. Covers how to make the authorinag tools themselves accessible to people with disabilities
2. Covers how to help authors create more accessible web content that conforms to Web Content Accessibility Guidelines (WCAG)1