for a number of important page-design code that almost never change.


Select the tutorial of interest from the drop-down-list

or

use this slide show and click the slide to focus on a specific topic

The CSS property height is usually used to define a fixed height in px for a DIV. Use instead:

height: fit-content;

to define a flexible height that depends on the content of the DIV

Use padding to create space between the content of a box and the box's edges

Use margin to create space between boxes

When centering a DIV element, give it a width and use:

margin: auto

in the CSS of the DIV element

A child element can be centered both horizontally and vertically
by using

display: flex;

together with

justify-content: center;
align-items: center;

in the parent element's CSS

The parent element must have a height

To scale an image correctly and make it responsive, put it inside a parent DIV.

Set the width of the DIV as you like but do not set its height unless it is necessary (you can use height: auto;)

Set the width (and the height - only if the DIV has it) of the child image at 100%

To scale an image correctly and make it responsive:

use in CSS display: block

then set the width of the image as you like but do not set its height

If you want a background image for the body that doesn't scroll you need:

the image to be a real html element (not a background image)

the image to be position:fixed; and fill the entire screen

the image to be sent to the backgroung

If you want a responsive background image for the body that doesn't scroll you need:

the image to be the background image of an empty DIV

the DIV to be position:fixed; and fill the entire screen

the DIV to be sent to the backgroung

Design a single row of boxes (flex items) in a parent flex container:

- The (DIV) flex container must have display: flex;

- You can set an equal space between the (DIV) flex items by using

justify-content: space-between;

in the flex container

- Set the width of each flex item in such a way so that
the total of the widths is less than 100% (of the parent div)

Design more rows of boxes (flex items) in a parent flex container:

- The (DIV) flex container must have

display: flex;
flex-wrap: wrap;

- You can set the space between the (DIV) flex items by using

justify-content: space-between; or justify-content: space-around; or(better) gap: #px in the flex container

The gap property sets also the vertical spacing between the flex items

- Set the width of each flex item as you like, the browser will arrange them in rows accordingly

However, if the total widths of the flex items is less than 100% of the flex container, then all the items will be aligned in a single row!