Creating a Responsive Web Design

Responsive Web Design(RWD)

In simple terms RWD is way to display a web page/site properly on different screen size using CSS media Queries or frameworks

Checklist to start off

  • Text/Code Editor
  • Browser

Text/Code Editor

Any Text/code Editor can be used. VSCode is used in this tutorial.
VSCode(Visual Studio Code) is developed by Microsoft which is free, Open Source and Cross-Platform code editor build for/with everything for software development. Download VSCode from here.

Browser

Any Browser can be used. Chrome is used in this tutorial.

Basics

To start off every web page should have the following elements


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title Here</title>
</head>
<body>
    <!-- 
    Website Contents Goes Here
    -->
</body>
</html>

        

Now Lets add some content to the webpage inside the <body> tag


<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <h1>This is a basic webpage.</h1>
    <p>This is Para.</p>
    <ul>
        <li>ListItem1</li>
        <li>ListItem2</li>
        <li>ListItem3</li>
    </ul>
    <img src="img/placeholder.jpg" alt="Dummy Image">
</body>

        

This is how our webpage looks like on Desktop and Mobile


Now lets add some Style to our Webpage

  • First add Bootstap CDN link in the <head> tag
  • 
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    
                
  • Add class navbar, nav-item, nav-link to respective nav elements
  • 
    <nav class="navbar navbar-expand-sm bg-dark justify-content-end">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </nav>
    
                
  • Add class list-group, list-group-item to respective list Items
  • 
    <ul class="list-group">
        <li class="list-group-item">ListItem1</li>
        <li class="list-group-item">ListItem2</li>
        <li class="list-group-item">ListItem3</li>
    </ul>
    
                
  • Add class mx-auto d-block to img element
  • 
    <img class="mx-auto d-block" src="img/placeholder.jpg" alt="Dummy Image">
    
                
  • Next Enclose the contents of body into a <div> tag with class container
  • 
    <div class="container">
        <h1>This is a basic webpage.</h1>
        <p>This is Para.</p>
        <ul class="list-group">
            <li class="list-group-item">ListItem1</li>
            <li class="list-group-item">ListItem2</li>
            <li class="list-group-item">ListItem3</li>
        </ul>
        <img class="mx-auto d-block" src="img/placeholder.jpg" alt="Dummy Image">
    </div>
    
                

    Now this is how our page looks like

More Resource for Responsive Web Design can be found on MDN, W3Schools.