Building a Web Page Layout with Flexbox

After walking through the boring rigorous stuffs, you deserve some fun project.

It’s time to walk through a practical example and apply your newly acquired Flexbox skills.

Out of the lack of a creative option, I came up with a web page layout.

Here’s what the finished layout looks like, and it is completely laid out with Flexbox.

So where do you start?

Whenever building a layout with flexbox, you should start by looking out for what sections of your layout may stand out as flex-containers. You may then leverage the powerful alignment properties flexbox makes available.

<!–Header–>

<div class="header" , style="background-image: url(img/bscHCS.jpg);">
        <h1>BSc. (Hons) Computer Science</h1>
</div>
.header {
            display: flex;
            padding: 25px;
            text-align: center;
            background: #1abc9c;
            color: white;
            background-position:left;
            background-size: cover;
            
            
        }
        .header h1{
            
            box-sizing: border-box;
            background-color: #f5f5f5;
            padding: 5px 15px;
            color: #333333;
            border-radius: 5px;
        }

<!–Navbar–>

<div class="navbar">
        <ul>
            
            <li><a href="#">Home</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Project</a></li>
            <li><a href="#">Contact</a></li>
            <input id="search" type="search" name="" placeholder="search">
            
        </ul>
    </div>
/* Style the top navigation bar */
        .navbar{
            /* flex: 1;
            text-align: left; */
            display: flex;
            background-color: black;
        }

        .navbar ul li{
            box-sizing: border-box;
            list-style: none;
            display: inline-block;
            padding: 0px 38px;
            position: relative;
        }

        .navbar ul li a{
            
            padding: 14px 20px;
            border-radius: 5px;
            color:white;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
        }
/* Change color on hover */
        .navbar a:hover {
            background-color: whitesmoke;
            color: black;
        }

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */
        .side {
            flex: 25%;
            background-color: #ffd3d3;
            padding: 20px;
            text-align: left;
        }

    /* Main column */
        .main {
            flex: 75%;
            background-color: white;
            padding: 20px;
          
        }
  <!-- The flexible grid (content) -->
<div class="row">
    <div class="side">
      <h2>Important Links</h2>
      <h4>1<sup>st</sup> Semester Subject are :</h4>
    <ol><a href="https://www.javatpoint.com/cpp-tutorial" target="main">
            <li>
                C++
            </li>
        </a>

        <li>
            CSA
        </li>
        <li>
            AECC
        </li>
        <li>
            GE-English
        </li>

    </ol>
    <h4>2<sup>nd</sup> Semester Subject are :</h4>
    <ol><a href="https://www.javatpoint.com/java-tutorial" target="main">
            <li>
                Java
            </li>
        </a>

        <li>
            DS
        </li>
        <li>
            EVS
        </li>
        <li>
            GE-Linear Algebra
        </li>

    </ol>
    <h4>3<sup>rd</sup> Semester Subject are :</h4>
    <ol>
        <li>
            OS
        </li>
        <a href="https://www.javatpoint.com/data-structure-tutorial">
            <li>
                Data Structurs
            </li>
        </a>
        <li>
            Computer Networks
        </li>
        <li>
            Web Design and Development
        </li>
        <li>
            GE-Differential Equation
        </li>

    </ol><br>


    </ul><br>
      
      
      
      
    </div>
    <div class="main">
      <h2>Web Design and Development</h2>
      <p>This course will introduce students to the fundamental concepts of web 
          development. This course will equip students with the ability to design 
          and develop a dynamic website using technologies like HTML, CSS, JavaScript, 
          PHP and MySQL on platform like WAMP/XAMP/LAMP.
        </p><br>
        <p>
            <b>Introduction</b> :-	Introduction to Static and Dynamic Websites (Website Designing and Anatomy of Webpage)<br><br>
            <b>HTML, CSS & DOM </b>:-	Introduction to HTML and CSS (Basic Tags, Lists, Handling Graphics, Tables, Linking, Frames, Forms), Introduction to DOM<br><br>
            <b>JavaScript </b>:-	Introduction to JavaScript (Basic Programming Techniques & Constructs, GET/POST Methods, Operators, Functions, DOM Event handling, Forms Validation, Cookies), Inter-page communication and form data handling using JavaScript<br><br>
            <b>PHP: Backend Of Websites </b>:-	Introduction to PHP (Working, Difference with other technologies like JSP and ASP), PHP Programming Techniques (Data types, Operators, Arrays, Loops, Conditional statements, Functions, Regular expressions)<br><br>
            <b>Databases in Websites</b> :-	Form Data Handling with PHP, Database connectivity and handling using PHP-MySQL
        </p>


    </div>
  </div>

<!– Footer –>

  <div class="footer">
    
    Contact Us: <email>abc@gmail.com</email>
  </div>

    /* Footer */
        .footer {
            padding: 20px;
            text-align: center;
            background: black;
            color: white;
        }

Wow. I can’t believe you got to this point. That’s great! You’re becoming a Flexbox ninja now.

Next, you will see how Flexbox can help with responsive designs.

Project1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BSc. (Hons) Computer Science</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

    /* Style the body */
        body {
            font-family: Arial;
            margin-left: 10px;
            background-image: url(img/bg.jpg);
	        background-size: cover;

        }

    /* Header/logo Title */
        .header {
            display: flex;
            padding: 25px;
            text-align: center;
            background: #1abc9c;
            color: white;
            background-position:left;
            background-size: cover;
            
            
        }
        .header h1{
            
            box-sizing: border-box;
            background-color: #f5f5f5;
            padding: 5px 15px;
            color: #333333;
            border-radius: 5px;
        }
        
    /* Style the top navigation bar */
        .navbar{
            /* flex: 1;
            text-align: left; */
            display: flex;
            background-color: black;
        }

        .navbar ul li{
            box-sizing: border-box;
            list-style: none;
            display: inline-block;
            padding: 0px 38px;
            position: relative;
        }

        .navbar ul li a{
            
            padding: 14px 20px;
            border-radius: 5px;
            color:white;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
        }
        input,textarea{
	        padding: 6px;
	        border: solid white;
	        border-radius: 5px;
            margin-left: 20.8em;
}

    /* Change color on hover */
        .navbar a:hover {
            background-color: whitesmoke;
            color: black;
        }

    /* Column container */
        .row {  
            display: flex;
            flex-wrap: wrap;
            background-color: #1abc9c;
        }

    /* Create two unequal columns that sits next to each other */
    /* Sidebar/left column */
        .side {
            flex: 25%;
            background-color: #ffd3d3;
            padding: 20px;
            text-align: left;
        }

    /* Main column */
        .main {
            flex: 75%;
            background-color: white;
            padding: 20px;
          
        }



    /* Footer */
        .footer {
            padding: 20px;
            text-align: center;
            background: black;
            color: white;
        }

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 700px) {
            .row, .navbar {   
            flex-direction: column;
            }
        }
        
    </style>
</head>
<body>
    <!--Header-->
    <div class="header" , style="background-image: url(img/bscHCS.jpg);">
        <h1>BSc. (Hons) Computer Science</h1>
        
        
       
    </div>
    <div class="navbar">
        <ul>
            
            <li><a href="#">Home</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Project</a></li>
            <li><a href="#">Contact</a></li>
            <input id="search" type="search" name="" placeholder="search">
            
        </ul>
    </div>

   

    <!-- The flexible grid (content) -->
<div class="row">
    <div class="side">
      <h2>Important Links</h2>
      <h4>1<sup>st</sup> Semester Subject are :</h4>
    <ol><a href="https://www.javatpoint.com/cpp-tutorial" target="main">
            <li>
                C++
            </li>
        </a>

        <li>
            CSA
        </li>
        <li>
            AECC
        </li>
        <li>
            GE-English
        </li>

    </ol>
    <h4>2<sup>nd</sup> Semester Subject are :</h4>
    <ol><a href="https://www.javatpoint.com/java-tutorial" target="main">
            <li>
                Java
            </li>
        </a>

        <li>
            DS
        </li>
        <li>
            EVS
        </li>
        <li>
            GE-Linear Algebra
        </li>

    </ol>
    <h4>3<sup>rd</sup> Semester Subject are :</h4>
    <ol>
        <li>
            OS
        </li>
        <a href="https://www.javatpoint.com/data-structure-tutorial">
            <li>
                Data Structurs
            </li>
        </a>
        <li>
            Computer Networks
        </li>
        <li>
            Web Design and Development
        </li>
        <li>
            GE-Differential Equation
        </li>

    </ol><br>


    </ul><br>
      
      
      
      
    </div>
    <div class="main">
      <h2>Web Design and Development</h2>
      <p>This course will introduce students to the fundamental concepts of web 
          development. This course will equip students with the ability to design 
          and develop a dynamic website using technologies like HTML, CSS, JavaScript, 
          PHP and MySQL on platform like WAMP/XAMP/LAMP.
        </p><br>
        <p>
            <b>Introduction</b> :-	Introduction to Static and Dynamic Websites (Website Designing and Anatomy of Webpage)<br><br>
            <b>HTML, CSS & DOM </b>:-	Introduction to HTML and CSS (Basic Tags, Lists, Handling Graphics, Tables, Linking, Frames, Forms), Introduction to DOM<br><br>
            <b>JavaScript </b>:-	Introduction to JavaScript (Basic Programming Techniques & Constructs, GET/POST Methods, Operators, Functions, DOM Event handling, Forms Validation, Cookies), Inter-page communication and form data handling using JavaScript<br><br>
            <b>PHP: Backend Of Websites </b>:-	Introduction to PHP (Working, Difference with other technologies like JSP and ASP), PHP Programming Techniques (Data types, Operators, Arrays, Loops, Conditional statements, Functions, Regular expressions)<br><br>
            <b>Databases in Websites</b> :-	Form Data Handling with PHP, Database connectivity and handling using PHP-MySQL
        </p>


    </div>
  </div>
  
  <!-- Footer -->
  <div class="footer">
    
    Contact Us: <email>abc@gmail.com</email>
  </div>
  
</body>
</html>

Also Read – https://codingtimes.in/how-to-install-and-configure-sass-locally/

Leave a Reply

Your email address will not be published.