HTML / CSS Concepts

Box Model

The box model is a concept in web design that explains how elements on a web page are laid out and sized. Every HTML element is surrounded by a rectangular box, which consists of four parts:

• Content: This is where the text, images, and other media are displayed.
• Padding: This is the space between the content and the border of the box.
• Border: This is the line around the box that separates the content from the padding and margin.
• Margin: This is the space outside the border of the box.

Together, these parts make up the box model. The size and positioning of each box can be adjusted using CSS (Cascading Style Sheets) to create the desired layout and design of a web page.

Inline versus Block Elements. Examples.

In HTML, elements can be classified as either inline or block elements, which affects how they are displayed on a web page.

Block elements:

Block elements are elements that take up the full width of their parent container and create a new line after the element. Examples of block elements include headings (H1, H2, H3, etc.), paragraphs (p), lists (ul ,ol), and divs. Block elements are typically used for larger sections of content that require a clear separation from surrounding elements.

Inline elements:

Inline elements, on the other hand, only take up the necessary width of their content and do not create a new line after the element. Examples of inline elements include links (a), images (img), and spans. Inline elements are typically used for smaller pieces of content that are part of a larger block element.

The main difference between inline and block elements is how they affect the flow of content on a web page. Block elements create a new line and push surrounding content down, while inline elements do not affect the flow of content and can be placed within a block element.

Positioning: Relative/Absolute

In CSS, positioning refers to the way elements are placed and arranged on a web page. Two common types of positioning are relative and absolute.

• Relative positioning is based on the element's original position in the document flow. When an element is given a relative position, it can be moved up, down, left, or right from its original position using the top, bottom, left, and right properties. However, the element still takes up space in the original position, which can affect the positioning of surrounding elements.

• Absolute positioning, on the other hand, is based on the element's position relative to its nearest positioned ancestor. When an element is given an absolute position, it is removed from the normal document flow and positioned at a specific point on the page using the top, bottom, left, and right properties. The element does not take up any space in its original position, which means it can overlap other elements on the page.

Summarize that relative positioning moves an element from its original position while still taking up space in the document flow, while absolute positioning positions an element at a specific point on the page relative to its nearest positioned ancestor and does not take up any space in its original position.

Common CSS structural classes

In CSS, structural classes are used to apply styling to specific elements based on their position or relationship within the HTML document. Some common CSS structural classes include:

• .parent: This class selects an element that contains another element, known as a child element. It can be used to apply styling to the parent element based on the content of the child element.

• .child: This class selects an element that is contained within another element, known as a parent element. It can be used to apply styling to the child element based on the content of the parent element.

• .first-child: This class selects the first child element of a parent element. It can be used to apply specific styling to the first element in a list, for example.

• .last-child: This class selects the last child element of a parent element. It can be used to apply specific styling to the last element in a list, for example.

• .nth-child(n): This class selects the nth child element of a parent element, where "n" is a number. It can be used to apply styling to specific elements within a list or other type of container.

Common CSS styling classes

• .container is often used to define a block-level element that contains other elements, such as a navigation menu or a grid of images.

• .button is a popular class used to style clickable elements on a webpage, such as links or buttons, and can help to improve user engagement.

• .card is often used to create a box-like element that contains content, such as a product listing or a news article.

• .text-center can be used to horizontally center text within an element, such as a heading or a paragraph.

• .hidden can be used to hide an element from the page entirely, which can be useful for elements that should only be shown under certain conditions.

• .clearfix is a class used to fix issues that can arise when floating elements on a webpage, such as overlapping or misaligned content.

CSS Specificity

• CSS specificity is a set of rules that determines which styles should be applied to an element when there are conflicting styles. It is based on the selectors used to target an element in CSS.

• The specificity of a selector is determined by the number of ID, class, and element selectors used in the selector. For example, an ID selector has a higher specificity than a class selector, which has a higher specificity than an element selector.

• When there are conflicting styles applied to an element, the browser will use the style with the highest specificity. If two styles have the same specificity, the browser will use the style that appears later in the CSS code.

• By understanding CSS specificity, you can write more efficient and effective CSS code that produces the desired visual result on a web page.

CSS Responsive Queries

It also know as media queries. These are a way to apply CSS styles based on the size and characteristics of the device or screen that a website is being viewed on. It makes the responsive web design according to the different screens, sizes and resolutions.

@media (max-width: 767px) {
  body {
    font-size: 32px;
  }
}

The @media rule applies the CSS styles inside the block to the body element when the maximum width of the device is 767 pixels or less.
Some common media query conditions include:

• min-width: applies styles when the screen width is greater than or equal to a specified value
• max-width: applies styles when the screen width is less than or equal to a specified value
• orientation: applies styles based on the orientation of the device (landscape or portrait)
• device-width and device-height: applies styles based on the width and height of the device screen

Flexbox/Grid

Flexbox and Grid are two CSS layout systems that allow you to create more complex and flexible layouts than traditional CSS positioning techniques.

Flexbox is a layout system that allows you to arrange items in a single row or column.

• It is ideal for creating dynamic and responsive layouts that adjust to different screen sizes.
• Some common properties used with Flexbox include display: flex, flex-direction, justify-content, and align-items.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

Grid is a two-dimensional layout system that allows you to create complex, multi-column layouts.

• With Grid, you can create rows and columns, define the size and position of items within the grid, and control the spacing between items.
• Grid include display: grid, grid-template-columns, grid-template-rows, and grid-gap.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

Common header meta tags

• <title> tag: specifies the title of the webpage and is displayed in the browser tab.

• <meta name="description" content="...">: provides a brief description of the webpage and is often displayed in search engine results.

• <meta name="keywords" content="...">: specifies a list of keywords that describe the webpage and can help search engines categorize the content.

• <meta name="robots" content="index,follow">: tells search engines whether or not to index the page and follow links on the page.

• <meta name="viewport" content="width=device-width, initial-scale=1.0">: specifies how the webpage should be displayed on different devices and screen sizes.

• <meta property="og:title" content="...">: specifies the title of the webpage when shared on social media platforms like Facebook.

• <meta property="og:description" content="...">: provides a brief description of the webpage when shared on social media platforms.

CSS backgrounds

CSS backgrounds allow you to add color, images, and patterns to the background of an element on your webpage. Here are some ways to use CSS backgrounds:

• Solid color: You can set a solid background color for an element using the background-color property.

.element {
  background-color: #ffffff;
}

• Gradient: You can create a gradient background using the linear-gradient function.

.element {
  background: linear-gradient(to bottom, #ffafbd, #ffc3a0);
}

• Image: You can use an image as the background of an element using the background-image property.

.element {
  background-image: url('image.jpg');
}

• Pattern: You can create a pattern background by repeating a small image using the background-image property and the repeat or repeat-x/repeat-y values.

.element {
  background-image: url('pattern.png');
  background-repeat: repeat;
}

• Position: You can control the position of the background image using the background-position property.

.element {
  background-image: url('image.jpg');
  background-position: center center;
}

Resources:

• w3schools.com
• MDN DOCS
• geeksforgeeks