HTML Responsive Web Design

Published by StudyMuch on

studymuch.in web development

HTML Responsive Web Design

In this tutorial you will learn how create HTML Responsive Web Design Framework with CSS (Web Development). Here we given you two different – different types of web design coding with framework programming.

In this tutorial we are going to talk about the most popular CSS framework namely “Bootstrap” and “Materialize“.

CSS frameworks are meant to allow for easier, cleaner, and standard complement web design. A great thing about CSS web design frameworks is that they are greatly made for responsive web design.

A CSS framework at least contains the followings –

  • Typography
  • Grid System
  • Web Icons
  • Reset Style Sheet
  • Styling for image, tables, list, colors etc.
  • Cards, tooltip, tabs, accordions etc.

studymuch.in bootstrap

Bootstrap

Bootstrap is the world’s most popular CSS framework for building responsive and mobile friendly websites. Through bootstrap you design your website most wonderful and fantastic.

It is originally authored by Mark Otto and Jacob Thornton and is currently being developed by bootstrap Core Team.

Bootstrap is open source and is fully free to use. It uses HTML, CSS and Java Script or JQuery.

Now you see the example how to apply bootstrap in your coding project.

First you need to link the bootstrap stylesheet link in your HTML document, then you can copy the code what you want for your website from the bootstrap website.

Here is an Example using the Bootstrap;

Responsive Web Design by Bootstrap, Full Coding of Simple Responsive Web design;

<!DOCTYPE html>
<html>
<head>
   <title>bootstrap/ studymuch.in</title>
   <meta name="viewport" content="width=
  device-width, initial-scale=1"/>

   <link rel="stylesheet"
href="https://stackpath.bootst
rapcdn.com/font-awesome/4.7.0/
css/font-awesome.min.css"/>

   <link rel="stylesheet"href="https:
//stackpath.bootstrapcdn.com/bootstrap
/4.3.1/css/bootstrap.min.css"/>
</head>
<body>
   <nav class="navbar navbar-expand-lg 
navbar-dark bg-info">
 <a class="navbar-brand"
href="#"> StudyMuch.in </a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
      </button>
<div class="collapse navbar-collapse"
id="navbarNav">
  <ul class="navbar-nav">
 <li class="nav-item active">
 <a class="nav-link"
href="#"> Home <span
class="sr-only">(current)</span></a>
            </li>
  <li class="nav-item">
  <a class="nav-link"
href="#"> About </a>
            </li>
   <li class="nav-item">
   <a class="nav-link"
href="#"> Articles </a>
            </li>
    <li class="nav-item">
   <a class="nav-link"
href="#"> Terms and Policy </a>
            </li>
         </ul>
      </div>
   </nav>
   </div>
   <br>
   <div class="container-fluid">
      <div class="row">
         <div class="col-12 col-sm-3">
            <ul class="list-group">
<li class="list-group-item active"> 
Share this! </li>
  <li class="list-group-item">
<i class="fa fa-facebook"></i> 
Facebook </li>
  <li class="list-group-item">
<i class="fa fa-twitter"></i> 
Twitter </li>
  <li class="list-group-item">
<i class="fa fa-google-plus"></i> 
Google Plus </li>
  <li class="list-group-item">
<i class="fa fa-linkedin"></i> 
LinkedIn </li>
            </ul>
         </div>
   <div class="col-12 col-sm-6">
            <br>
     <h2> Hello World! </h2>
     <p>Lorem ipsum dolor sit amet. </p>
     <p> Lorem100 </p>
         </div>
   <div class="col-12 col-sm-3">
            <br>
            <div class="card">
  <img src="studymuch.jpg"
class="card-img-top"
alt="Fissure in Sandstone"/>

<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick 
example text to build on the card 
title and make up the bulk of the 
card's content.</p>

<a href="https://www.studymuch.in"
class="btn btn-primary">Button</a>
                </div>
              </div>
               <div class="card-body">
               </div>
            </div>
         </div>
      </div>
   </div>
   <footer class="bg-dark text-center 
    text-white">

    <!-- Copyright -->
    <div class="text-center p-3"
style="background-color:rgb(15, 1, 140) ;">
      © 2022 Copyright:
      <a class="Copyright"
style="color:greenyellow; text-decoration: 
 none;"
href="https://studymuch.in/">StudyMuch.in
</a>
    </div>
    <!-- Copyright -->
  </footer>  
 </body>
</html>

See the output of these program examples in video mode;

You can copy this code and run on your own computers.

Materialize CSS

Material CSS is inspired by Google Material Design it is product by google and it also absolutely free for designing HTML projects. It is built with HTML, CSS, JavaScript and JQuery.

studymuch.in materialie

It is originally authored by Alvin Wang, Alan Chang, Alex Mark and Kevin Louie a team of students (developers) at Carnegie Mellon University,

Now see the programing example below how to use Materialize CSS properties. Full Coding of Simple web design;

<!DOCTYPE html>
<html>
<head>
<title> Materialize/studymuch.in </title>
   <meta name="viewport"
content="width=device-width, initial-scale=1"/>

   <link href="https://fonts.googleapis.
com/icon?family=Material+Icons"
rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.
cloudflare.com/ajax/libs/materialize/1.0.0/
css/materialize.min.css">
   <style type="text/css">
      body {
         display: flex;
         min-height: 100vh;
         flex-direction: column;
      }
      main {
         flex: 10 auto;
      }
      .footer{height: auto; padding: 20px;
      text-align: center; width: auto; 
      background: blue; color: white;}
   </style>
</head>
<body>
   <nav>
      <div class="nav">
<a href="https://www.studymuch.in"
class="brand-logo"> StudyMuch </a>
      </div>
   </nav>
   <div class="container">
      <div class="row">
         <div class="col s12 m3">
            <div class="collection">
               <a href="#!"
class="collection-item active">
 Main Menu </a>
<a href="#!" class="collection-item"><i
class="material-icons">home</i> 
Home</a>
<a href="#!" class="collection-item"><i
class="material-icons">info</i> 
About </a>
<a href="#!"class="collection-item"><i
class="material-icons">web_asset</i> 
Articles </a>
<a href="#!" class="collection-item">
<i class="material-icons">
linked_camera</i> Gallery </a>
            </div>
         </div>
         <div class="col s12 m9">
            <h4> Hello World! </h4>
            <p> Lorem ipsum dolor sit amet. </p>
            <p> Lorem80 </p>
         </div>
         <div class="col s12 m4">
            <div class="card">
               <div class="card-image">
                  <img src="webimage7.jpg" alt="">
                  <span class="card-title"></span>
               </div>
               <div class="card-content">
 <p> I am a very simple card. I am good at 
containing small bits of information.I am a 
very simple card I am convenient because I 
require little markup to use effectively. </p>
               </div>
               <div class="card-action">
                  <a href="#"> click to Visit </a>
               </div>
            </div>
         </div>
         <div class="col s12 m4">
            <div class="card">
               <div class="card-image">
                  <img src="web image8.jpg" alt="">
               </div>
               <div class="card-content">
 <p> I am a very simple card. I am
 good at containing small bits of information. 
I am convenient because I require little 
markup to use effectively. </p>
               </div>
               <div class="card-action">
                  <a href="#"> This is a link </a>
               </div>
            </div>
         </div>
         <div class="col s12 m4">
            <div class="card">
               <div class="card-image">
<img src="webimage5.jpg" alt="">
               </div>
               <div class="card-content">
<p> I am a very simple card. I am good at
 containing small bits of information. I am 
convenient because I require little markup 
to use effectively. </p>
               </div>
               <div class="card-action">
<a href="#"> This is a link </a>
               </div>
            </div>
         </div>
      </div>
   </div>
   <footer>
      <div
      class="footer">
      © 2022 Copyright:
<a style="color:greenyellow; text-decoration: 
none;" href="https://studymuch.in/">
StudyMuch.in</a>
</div>
   </footer>
</body>
</html>

See the output of this programming “Materialize CSS”;

So, in this tutorial you will learn how to design the webpages through using by Bootstrap and Materialize CSS google product. Here we given you one – one example of both Bootstrap and Materialize CSS with programming output, that you can better understand.

So, I hope you read this tutorial well and learn new something.

Both Bootstrap and Materialize are easy to use just copy the code from the its website and paste on your project of HTML, it saves the time to compete your project.

Read Also –

 

Categories: Uncategorized
Tags:

24 Comments

zoritoler imol · June 30, 2022 at 12:44 pm

I found your weblog site on google and check just a few of your early posts. Proceed to maintain up the very good operate. I just extra up your RSS feed to my MSN News Reader. Seeking forward to studying more from you afterward!…

Reply

zoritoler imol · October 19, 2022 at 1:47 pm

Hello. magnificent job. I did not anticipate this. This is a impressive story. Thanks!

Reply

best campgrounds in Michigan · November 17, 2022 at 4:36 pm

Ahaa, its good conversation on the topic of this piece of writing here at this webpage, I have read all that, so at this time
me also commenting at this place.

Reply

Marcos Tradup · January 16, 2023 at 9:25 am

I am extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent quality writing, it is rare to see a great blog like this one these days..

Reply

Black Seed Oil · March 8, 2023 at 8:32 am

Hi there, You have done a fantastic job. I?ll certainly digg it and personally recommend to my friends. I am sure they will be benefited from this site.

Reply

스포츠토토 · March 14, 2023 at 8:54 am

Thanks for your helpful post. In recent times, I have been able to understand that the symptoms of mesothelioma cancer are caused by your build up associated fluid relating to the lining on the lung and the chest muscles cavity. The disease may start in the chest region and multiply to other body parts. Other symptoms of pleural mesothelioma include weight reduction, severe deep breathing trouble, nausea, difficulty ingesting, and infection of the neck and face areas. It really should be noted that some people with the disease do not experience just about any serious indications at all.

Reply

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Interview Questions and Answers for Freshers

Interview Questions and Answers for Freshers

Top 45 IT Interview Questions and Answers for Freshers Going through a job interview, especially as a Freshers IT graduate, can be challenging. However, with right preparation and a clear understanding of common interview questions Read more…

Python Sets

Python Sets

Understanding Python Sets Python, a versatile and powerful programming language, offers a wide range of data structures that make it a favourite among developers. Set is a fundamental data structure used for storing collections of Read more…

Best Programming Language for Developing AI

Best Programming Language for Developing AI

Best Programming Language for Developing AI (Artificial Intelligence) Artificial Intelligence (AI) is changing the way we interact with technology and the world around us. From self-driving cars to virtual personal assistants, AI is powering innovations Read more…