Now you can learn by siting at your home. The only things you require are your PC or Laptop, INTERNET connection and your knowledge. In this series we will make a real estate website as a example to understand BootStrap responsive framework. Bootstrap is a framework for front-end development. This makes our web pages responsive. To learn this you have to know at least basics of HTML, CSS and JAVASCRIPT. For more information you can visit Bootstrap's official docs.
My recommendation to you is always use official docs.
Now
let's start with making our first template called index.html. This will
our basic template which will inherited by other templates and you will
learn this during this series. We will going to use Bootstrap framework
for front-end development and FLASK with PYTHON for back-end
development.
Requirements:
- Download bootstrap files from here
- Place them into your html templates folder or where you want to use.
- Basic knowledge of HTML, CSS and JAVASCRIPT.
* You can use your own images also. *
* Refer official docs side by side here. *
************************Source code for grid.html*****************************
<!doctype html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>My Website</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page. bootstrap.min.css is computer understandable and bootstrap.css is human understandable so it is good embed both files.-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head><!-- head ends here -->
<body>
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container">
<!-- row 1 starts here for header-->
<header class="row">
<!-- column 1 of row 1 using lg and sm Grid system -->
<div class="col-lg-6 col-sm-6" style="border: 2px solid;">
<a href="#"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a>
</div>
<!-- column 2 of row 1 using lg and sm grid system -->
<div class="col-lg-6 col-sm-6">
<img src="img/animals.jpg" alt="">
</div>
</header><!-- header ends here -->
<!-- row 2 starts here -->
<div class="row">
<h1> We treat your pets like our own</h1>
<p>At Wisdom Pet Medicine, we strive to blend the best in traditional and alternative healing techniques to diagnose and treat companion animals, including dogs, cats, birds, reptiles, rodents, and fish. </p>
</div><!-- end row 2 here -->
<!-- row 3 starts-->
<div class="row">
<!-- column 1 of row 3 using lg, md, xs grid systems-->
<div class="col-lg-3 col-md-4 col-xs-6">
<p><img src="img/gsd.jpg" alt=""></p>
<h4>Thanks for helping our German Shepherd</h4>
<p>During the summer, my German Shorthair Pointer, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozen kinds of grass pollens.</p>
<p><a href="#">Read more >></a></p>
</div><!-- column 1 ends here -->
<!-- column 2 of row 3 using lg, md, xs grid system -->
<div class="col-lg-3 col-md-4 col-xs-6">
<p><img src="img/kitten.jpg" alt=""></p>
<h4>Our diabetic kitty is better</h4>
<p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes. </p>
<p><a href="#">Read more >></a></p>
</div><!-- column 2 ends here -->
<!-- column 3 of row 3 using lg, md, xs grid system -->
<div class="col-lg-3 col-md-4 col-xs-6">
<p><img src="img/bulldog.jpg" alt=""></p>
<h4>Our grape-loving dog</h4>
<p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly. </p>
<p><a href="#">Read more >></a></p>
</div><!-- column 3 ends here -->
<!-- column 4 of row 3 using lg, md, xs grid system -->
<div class="col-lg-3 col-md-4 col-xs-6">
<p><img src="img/goldfish.jpg" alt=""></p>
<h4>A dog antibiotic cured our fish</h4>
<p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia. </p>
<p><a href="#">Read more >></a></p>
</div><!-- column 4 ends here -->
</div><!-- End Of Row 3 -->
<!-- row 4 for footer -->
<footer class="row">
<p>This not a real veterinary medicine site, and is not meant to diagnose or offer treatment. Please see your veterinarian for all matters related to your pet's health.</p>
<p>Wisdom Pet Medicine is a training brand owned by lynda.com.</p>
</footer>
</div><!-- End Of Container div -->
<!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
<!-- jquery file -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- javascript file -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
**********OUTPUT WILL**********
 |
| 1 |
 |
| 2 |
No comments:
Post a Comment