to struct my webpage i can use the following tags :

<header>: This tag is used to define the header of a webpage, typically containing
the site logo, navigation menu, and other elements that appear at the top of every
page.

<main>: This tag is used to define the main content area of a webpage. It should
contain the most important content on the page, such as text, images, and videos.

<footer>: This tag is used to define the footer of a webpage, which typically
contains copyright information, links to other pages, and other elements that
appear at the bottom of every page.

Using these tags is not strictly necessary, but it can help make your code more
organized and easier to understand.

<section> vs <div> : generic container that is used for grouping elements, while
<section> is used to group related content that is thematically related and has
semantic meaning.

if i wanna set an image all the way the web site i can do this :
height:100vh;
or
height: calc(100vh - 100px); 100view height -100px of the banner (i have to put
space betwwn -)

if i wanna add shadow for a text :

text-shadow: 2px 2px 10px #111;
hor vert blur color

if i want to center a text inside a banner section there is a trick that goes along
for all devices which is :
setting the text inside a div

display:block":means that it takes up the full width of its parent container and
starts on a new line.