HTML/CSS concepts

Box model

In HTML and CSS, the box model specifies how elements are presented on a webpage. It consists of four components: content, padding, border, and margin.

Content: refers to the text, images, or other media contained within the element.
Padding: the space between the content and the border.
Border: the visual boundary for the element.
Margin: the area outside the border, which separates the element from other neighboring elements on the page.

Example:

<div style="padding: 10px; border: 2px solid black; margin: 20px;">
    Text content.
</div>

In the above example, the div element has 10 pixels of padding, a 2-pixel black solid border, and 20 pixels of margin. The text "Text content." is the actual content of the element.

The default box model is content-box. In this model, the size of the element is determined by its content, and any padding, border, or margin is added to the outside of the element. The border-box is a model where the size of the element includes the padding and border, but not the margin. It means that the content area will be smaller than in the content-box model, but the overall size of the element will be the same.

Example:

<div style="box-sizing: border-box; width: 100px; padding: 10px; border: 1px solid black; margin: 10px;">
    Text content.
</div>

In the above example, for the div element border-box mode is specified using the box-sizing property with a width of 100 pixels. The content area will be 78 pixels wide because 10 pixels of padding and 1 pixel of the border are added to each side. However, the overall width of the element will be 120 pixels, because the margin is added to the outside of the element.

Inline vs Block elements

In HTML, elements can be classified as either inline or block-level. Block-level elements are those that take up the full width of their container and are separated from other elements by a line break. Inline elements are those that are part of a line of text and are surrounded by other inline elements or text.

Examples of block-level elements include div, p, and h1 to h6, while examples of inline elements include span, a, and img.

Example:

<div style="display: inline-block; border: 1px solid black;">
    block-level element inside an inline element.
</div>

In the above example, we have a div element with an inline-block display style. This means that the element will be displayed inline, but will also behave like a block-level element in terms of width and height.

Relative vs Absolute positioning

In CSS, positioning helps to control the layout of elements on a webpage. Two commonly used types of positioning are relative and absolute positioning. It can be set by giving the property position values relative and absolute.

Relative positioning allows an element to be moved relative to its normal position in the document flow. When an element is relatively positioned, it can be moved using the top, right, bottom, and left properties. These properties define the distance by how much the element is moved from its original position in the corresponding direction. For example, setting top: 10px will move the element 10 pixels down from its original position.

Absolute positioning allows an element to be placed in a specific location on the webpage, regardless of its position in the document flow. When an element is absolutely positioned, it is positioned relative to its closest-positioned ancestor. If no ancestor is positioned, the element is positioned relative to the initial containing block, which is the body element. An absolutely positioned element can be moved using the top, right, bottom, and left properties.

The difference between relative and absolute positioning is that absolutely positioned elements are taken out of the normal document flow, while relatively positioned elements remain in the flow. This means that absolutely positioned elements can overlap other elements, while relatively positioned elements cannot. The position of an absolutely positioned element does not affect the position of other elements on the page, while the position of a relatively positioned element can affect the position of other elements.

CSS Structural Classes

:first-child Selects the first child element from the parent.
:last-child Selects the last child element from the parent.
:nth-child(n) Selects the nth child element from the parent.
:nth-last-child(n) Selects the nth child element from the end of the parent.
:first-of-type Selects the first element of its type in the parent.
:last-of-type Selects the last element of its type in the parent.
:nth-of-type(n) Selects the nth element of its type in the parent.
:nth-last-of-type(n) Selects the nth element of its type from the end of the parent.
:only-child Selects an element that is the only child of the parent.
:only-of-type Selects an element that is the only element of its type within the parent.
:empty Selects an element that has no child elements or text content.
:root Selects the root element which is normally HTML.

Common CSS Styling Classes

In CSS, a styling class is a way to apply a specific set of styles to one or more elements on a webpage.

.container This class is used to create a container element that holds the content of a webpage. The container can be styled with a fixed or fluid width and can be centered on the page using margin or padding depending upon the content.
.button This class is used to create buttons on a webpage. Buttons can be styled with background colors, borders, and hover effects to make them stand out and provide visual feedback.
.navbar This class is used to create a navigation bar at the top of a webpage. The navbar can be styled with background colors, borders, and dropdown menus to provide easy access to different sections of the site.
.card This class is used to create a container element that displays information in a card-like format. Cards can be styled with borders, background colors, and shadows to create a visually appealing layout.
.form This class is used to create input forms on a webpage. Forms can be styled with input fields, labels, buttons, and validation messages.
.header This class is used to style the header section of a webpage. Headers can be styled with background images, logos, and navigation links.
.footer This class is used to style the footer section of a webpage. Footers can be styled with copyright information, contact links, and social media icons.

Styling classes help to maintain the same look throughout the website and easier to manage changes to the style of the website.

CSS Specificity

In CSS, specificity is a way of determining which styles should be applied to an element when there are conflicting styles. Each CSS selector has a specificity value, which is based on the number of ID, class, and element selectors used in the selector.

ID selectors have the highest specificity value and are calculated as 1-0-0. For example, #my-id has a specificity value of 1-0-0.
Class and attribute selectors have the next highest specificity value, and are calculated as 0-1-0. For example, .my-class or [type="text"] has a specificity value of 0-1-0.
Element selectors have the lowest specificity value and are calculated as 0-0-1. For example, p or div has a specificity value of 0-0-1.
When multiple selectors are used in a single selector, the specificity value is calculated by adding up the values for each selector. For example, the selector #my-id .my-class would have a specificity value of 1-1-0, because it contains one ID selector and one class selector.
If two selectors have the same specificity value, the one that appears later in the CSS code will be applied.

CSS responsive queries

CSS responsive queries, also known as media queries, are used to adjust the presentation of a webpage based on the characteristics of the device that it is being viewed on. This allows webpages that are optimized for different screen sizes, orientations, and device types.

Example:

@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

In the above example, a media query is used to adjust the font size of the body element on devices with a screen width of 600 pixels or less. When the device's screen width is greater than 600 pixels, the default font size will be used. Media queries are used to create webpages that are flexible and adaptable to different screen sizes.

Flexbox and Grid

Flexbox and Grid are layout tools in CSS that allows the creation of flexible and responsive layouts for web pages. Both of them can be used depending on the situation.

Flexbox

Flexbox is a layout module in CSS that helps to arrange elements within a container. To use Flexbox, we first define a container element with the display: flex property. This creates a flex container, and all child elements of the container become flex items. Some of the key properties of Flexbox are:

flex-direction: Determines the direction of the main axis of the Flexbox. It can be set to row, row-reverse, column, or column-reverse.
justify-content: Determines how flex items are distributed along the main axis of the Flexbox. It can be set to flex-start, flex-end, center, space-between, space-around, or space-evenly.
align-items: Determines how flex items are aligned along the cross-axis of the Flexbox. It can be set to flex-start, flex-end, center, baseline, or stretch.
flex-wrap: Determines whether flex items should wrap onto multiple lines if they cannot fit within the Flexbox. It can be set to nowrap, wrap, or wrap-reverse.

Grid

CSS Grid is a layout system that provides a two-dimensional grid-based layout for the placement and sizing of elements. To use Grid, we first define a container element with the display: grid property. This creates a grid container, and child elements of the container become grid items. Some of the key properties of Grid are:

grid-template-columns and grid-template-rows: To define the columns and rows of the grid respectively. We can specify the size and position of each column and row using % fr px etc, as well as keywords like auto and minmax.
grid-template-areas: It is to define named areas within the grid, which we can be assigned to specific grid items using the grid-area property.
grid-gap: It is to add spacing between grid items horizontally and vertically.
grid-auto-columns and grid-auto-rows: It helps determine the size of grid tracks that are not explicitly defined by the grid-template-columns or grid-template-rows properties.

Common meta tags in the header

<meta charset="utf-8">: Specifies the character encoding of the document. "utf-8" is the common character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport width to the device width and specifies the initial zoom level when the page is first loaded.
<meta name="description" content="description of the page">: It is to mention a brief description of the page content. It is used by search engines to display site descriptions in search results.
<meta name="keywords" content="comma-separated list of keywords">: It specifies a list of keywords related to the page content. It is used in SEO and to help index the page.
<meta name="author" content="name of the author">: It specifies the author of the page.
<meta name="robots" content="index">: It specifies whether search engines should index the links on the page or not.
<meta name="theme-color" content="black">: It specifies the theme color of the page. It is used to customize the browser UI.