WEB DESIGN TUTORIALS
WEB DESIGN TUTORIALS
Easy ready tutorials
for important pieces of code that almost never change.
Select from the list the tutorial of interest
Select from the list the tutorial of interest
Flexible height
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
height: fit-content;
to define a flexible height that depends on the content of the DIV
Making space: Padding or Margin?
Use padding to create space between the content of a box and the box's edges
Use margin to create space between boxes
Use margin to create space between boxes
Centering a DIV element
When centering a DIV element, give it a width and use:
margin: auto
in the CSS of the DIV element
margin: auto
in the CSS of the DIV element
Centering any element using
display: flex;
display: flex;
A child element can be centered horizontally, vertically, both
by giving display: flex;
together with one or two of the alignment's properties to the parent element
by giving display: flex;
together with one or two of the alignment's properties to the parent element
Dealing with images
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
(you could use instead display: table)
Set the width (and the height only if you used display: table) of the child image at 100%
Set the width of the DIV as you like but do not set its height
(you could use instead display: table)
Set the width (and the height only if you used display: table) of the child image at 100%
Dealing with images
alternative method
alternative method
To scale an image correctly and make it responsive:
set it to be display: block
set the width of the image as you like but do not set its height
set it to be display: block
set the width of the image as you like but do not set its height
Fixed (NON-responsive) background image
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 fixed and fill the entire screen
the image to be sent to the backgroung
the image to be a real html element (not a background image)
the image to be fixed and fill the entire screen
the image to be sent to the backgroung
Fixed (responsive) background image
If you want a responsive background image for the body (and that doesn't scroll) you need:
the image to be the background image of an empty DIV
the DIV to be fixed and fill the entire screen
the DIV to be sent to the backgroung
the image to be the background image of an empty DIV
the DIV to be fixed and fill the entire screen
the DIV to be sent to the backgroung
Flexbox layout - one row of boxes
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)
- 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)
Flexbox layout - more rows of boxes
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
- Set the width of each flex item as you like, the browser will arrange them in rows
- 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
- Set the width of each flex item as you like, the browser will arrange them in rows
PYTHON TUTORIALS
Easy ready tutorials
for important pieces of code that almost never change.
Select from the list the tutorial of interest
Select from the list the tutorial of interest
Python sample tutorial 1
Python sample tutorial description
Python sample tutorial 2
Python sample tutorial description
Python sample tutorial 3
Python sample tutorial description
Python sample tutorial 4
Python sample tutorial description
Python sample tutorial 5
Python sample tutorial description
Python sample tutorial 6
Python sample tutorial description
Python sample tutorial 7
Python sample tutorial description
PYTHON TUTORIALS