How to learn code with html and css bootstrap to create template website?
How to learn code with html and css bootstrap to create template website?
Video :
3. Upzip file and rename folder or not the same than copy it go to your folder project
and past it in your project,
4. Open file index.html with Which Text-Editor that you have on your local computer.
5. Write the code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
6. Create file style.css for write your class or id style that you want to write:
7. Link file css into file index.html
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/style.css">
</head>
8. This blog code on Body:
<body>
<div class="container">
<!-- header -->
<div class="row thumbnail">
<div class="col-md-2">
<img src="images/logo.jpg" class="logo">
</div>
<div class="col-md-10">
<img src="images/header.jpg" class="advertise">
</div>
</div>
<!-- Menu navigation -->
<div class="row thumbnail">
<ul>
<li class="btn btn-defualt"><a href="">Home</a></li>
<li class="btn btn-defualt"><a href="">Video</a></li>
<li class="btn btn-defualt"><a href="">Image</a></li>
<li class="btn btn-defualt"><a href="">Contact</a></li>
<li class="btn btn-defualt"><a href="">About Us</a></li>
</ul>
</div>
<!-- blog advertise -->
<div class="row ">
<div class="col-md-3 thumbnail ">
<img src="images/leftadvertise.jpg" class="imgadv_left">
</div>
<div class="col-md-6 thumbnail ">
<img src="images/centeradvertise.jpg" class="imgadv_center">
</div>
<div class="col-md-3 thumbnail ">
<img src="images/rightadvertise.jpg" class="imgadv_right">
</div>
</div>
<!-- blog content -->
<div class="row ">
<!-- blog content left -->
<div class="col-md-8 thumbnail">
Content left
</div>
<!-- blog content right -->
<div class="col-md-4 thumbnail">
<div class="col-md-12">
<h4>Catagory</h4>
<div class="col-md-12 thumbnail">
Detail
</div>
</div>
<div class="col-md-12">
<h4>News</h4>
<div class="col-md-12 thumbnail">
Detail
</div>
</div>
<div class="col-md-12">
<h4>Advertise</h4>
<div class="col-md-12 thumbnail">
Detail
</div>
</div>
</div>
</div>
<!-- blog footer -->
<div class="row thumbnail">
<div class="col-md-3">
footer left
</div>
<div class="col-md-9">
footer right
</div>
</div>
</div>
</body>
9. Run file index.html on the browser
This link project on git for free : https://github.com/soksopheak377/HTML_CSS_project
Thank you for watch this video and don’t forgot like comment share and subscript this video !
0 comments:
Post a Comment