Structure your website 👀

The most common aspect of all is that when you start with web development 3 things pop up with no dime -

HTML, CSS, JS -

Yup! We will also start with these building blocks of website creation.

Here are some resources to learn HTML.

🕸Youtube Channels:

🎯 Akshay Saini. 🎯 Fireship. 🎯 Anna College. 🎯 Codeevolution. 🎯 Lama Dev. 🎯 The Net Ninja. 🎯 Wed Dev Simplified. 🎯 Traversy Media. 🎯 Freecodecamp.

Next up CSS.. The soul of a website that attracts your eyes and smoothens the experience while navigating & working.

Enough theory till now, We all are fumbled up with hearing it all many times now just create something that can indeed give us real insights into how does website is structured so here's what spider told us -

Flexbox - The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown and dynamic. The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mainly to accommodate all kinds of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

📌Flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I Hope, you learned the coding part from the above link. Now practice making such box grid structures to get hands over flexbox working completely.

Now the question might appear what's the relation of this childish box creation game with website structure building -

Let's suppose, Here's what you need to build

Now behind the scenes, see the below image this website is actually made up of 4 containers and aligned them using flexbox.. Boom! That's how every website is structured.

Here's the code snippet for the above structure -

</> Html

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="styles.css" rel="stylesheet">
    <title>Portfolio structure</title>
</head>
<body>
    <nav></nav>
    <div class="whole">
        <div class="col1">
            <div class="row1"></div>
            <div class="row2"></div>
        </div>
        <div class="col2"></div>
    </div>
</body>
</html>

</> Css

*{
    padding: 0;
}

body{
   display: flex;
   justify-content: center;
   align-items: center;
}

nav{
    width: 100vw;
    height: 50px;
    /* background-color: rgb(54, 46, 36); */
}

.whole{
    display: flex;
    flex-direction: row;
}
.col1{
    height: 80vh;
    width: 50vw;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
}

.row1{
    height: 40vh;
    width: 50vw;
    /* background-color: bisque; */
}

.row2{
    height: 40vh;
    width: 50vw;
    /* background-color: pink; */
}

.col2{
    height: 80vh;
    width: 50vw;
    /* background-color: aqua; */
}