Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions .learn/resets/01-Add-Bootstrap-To-Your-Website/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<title>01 Add Bootstrap To Your Website</title>
</head>
<body>
<button type="button" class="btn btn-danger">This should be a red button</button>
<!-- Your Bootstrap Scripts should always be before the </body> closing tag -->

</body>
</html>
19 changes: 19 additions & 0 deletions .learn/resets/02-Bootstrap-Skeleton/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<title>02 Bootstrap Skeleton</title>
</head>
<body>

<h1>This is my first example using bootstrap</h1>
<p>I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.</p>

<!-- Bootstrap JS files DON'T REMOVE THESE FILES -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions .learn/resets/03-Bootstrap-Grid/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>03 Bootstrap Grid</title>
</head>
<body>
<div class="container">
<h1>Let's test the grid baby!</h1>
<div class="row">
<div class="col-6">First col</div>
<div class="col-6">Second col</div>
</div>
<div class="row">
<div>Third col</div>
<div>Fourth col</div>
</div>
</div>
</body>
</html>
22 changes: 22 additions & 0 deletions .learn/resets/04-Navbar/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>04 Navbar</title>
</head>
<body>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Messages</a>
</li>
</ul>
</body>
</html>
13 changes: 13 additions & 0 deletions .learn/resets/05-Sidebar-With-Menu/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>05 Sidebar With Menu</title>
</head>
<body>
<!-- your code here, remember to wrap everything in a container-fluid <div> -->

</body>
</html>
16 changes: 16 additions & 0 deletions .learn/resets/06-Hero-Section-And-Three-Boxes/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>06 Hero Section And 3 Boxes</title>
</head>

<body>

</body>

</html>
12 changes: 12 additions & 0 deletions .learn/resets/07-Buttons-Alert-And-Table/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>07 Buttons, Alert and Table</title>
</head>
<body>

</body>
</html>
19 changes: 19 additions & 0 deletions .learn/resets/08-Bootstrap-Forms/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>08 Bootstrap Forms</title>
</head>
<body>
<div class="col-3 mx-auto my-5">
<!-- Add your code below this line -->
</div>
</body>
</html>
19 changes: 17 additions & 2 deletions exercises/01-Add-Bootstrap-To-Your-Website/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,27 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>

<title>01 Add Bootstrap To Your Website</title>
</head>
<body>
<button type="button" class="btn btn-danger">This should be a red button</button>
<!-- Your Bootstrap Scripts should always be before the </body> closing tag -->

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
</body>
</html>
27 changes: 20 additions & 7 deletions exercises/02-Bootstrap-Skeleton/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,29 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>02 Bootstrap Skeleton</title>
</head>
<body>

<h1>This is my first example using bootstrap</h1>
<p>I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.</p>

<div class="container-fluid bg-secondary">
<h1>This is my first example using bootstrap</h1>
<p>I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.</p>
</div>
<!-- Bootstrap JS files DON'T REMOVE THESE FILES -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
</body>
</html>
19 changes: 14 additions & 5 deletions exercises/03-Bootstrap-Grid/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,29 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>03 Bootstrap Grid</title>
</head>
<body>
<div class="container">
<div class="container-fluid">
<h1>Let's test the grid baby!</h1>
<div class="row">
<div class="col-6">First col</div>
<div class="col-6">Second col</div>
</div>
<div class="row">
<div>Third col</div>
<div>Fourth col</div>
<div class="col w-200">Third col</div>
<div class="col w-200">Fourth col</div>
<div class="col w-200">Fiventh col</div>
</div>
<div class="row">
<div class="col-12 bg-danger">Johan</div>
</div>
</div>
</body>
</html>
</html>
45 changes: 25 additions & 20 deletions exercises/04-Navbar/index.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>04 Navbar</title>
</head>
<body>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Messages</a>
</li>
</ul>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>04 Navbar</title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>
</body>
</html>
31 changes: 29 additions & 2 deletions exercises/05-Sidebar-With-Menu/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,38 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>05 Sidebar With Menu</title>
</head>

<body>
<!-- your code here, remember to wrap everything in a container-fluid <div> -->

<div class="container-fluid">
<div class="row">
<div class="col-2">
<ul class="nav flex-column">
<li class="nav-item"></li>
<a class="nav-link" href="#">Home</a>
<li class="nav-item"></li>
<a class="nav-link" href="#">Profile</a>
<li class="nav-item"></li>
<a class="nav-link" href="#">Messages</a>
</ul>
</div>
<div class="col-10 bg-light">
<h4>Hello!</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus autem molestias mollitia rerum voluptate, saepe
necessitatibus nemo officiis atque reprehenderit laboriosam est, explicabo officia commodi repellat totam quia. Est.
</p>
<button type="button" class="btn btn-primary">Click me!</button>
</div>
</div>
</div>
</body>
</html>
Loading