diff --git a/Applied Visual Design/29_adjust-the-hue-of-a-color.html b/Applied Visual Design/29_adjust-the-hue-of-a-color.html
new file mode 100644
index 0000000..7856271
--- /dev/null
+++ b/Applied Visual Design/29_adjust-the-hue-of-a-color.html	
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lession 29</title>
+    <style>
+        body {
+            background-color: #FFFFFF;
+        }
+        
+        .green {
+            background-color: hsl(120, 100%, 50%);
+        }
+        
+        .cyan {
+            background-color: hsl(180, 100%, 50%);
+        }
+        
+        .blue {
+            background-color: hsl(240, 100%, 50%);
+        }
+        
+        div {
+            display: inline-block;
+            height: 100px;
+            width: 100px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="green"></div>
+    <div class="cyan"></div>
+    <div class="blue"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Applied Visual Design/30_adjust-the-tone-of-a-color.html b/Applied Visual Design/30_adjust-the-tone-of-a-color.html
new file mode 100644
index 0000000..f5940ac
--- /dev/null
+++ b/Applied Visual Design/30_adjust-the-tone-of-a-color.html	
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lession 30</title>
+    <style>
+        header {
+            background-color: hsl(180, 90%, 35%);
+            color: #FFFFFF;
+        }
+        
+        nav {
+            background-color: hsl(180, 80%, 25%);
+        }
+        
+        h1 {
+            text-indent: 10px;
+            padding-top: 10px;
+        }
+        
+        nav ul {
+            margin: 0px;
+            padding: 5px 0px 5px 30px;
+        }
+        
+        nav li {
+            display: inline;
+            margin-right: 20px;
+        }
+        
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1>Cooking with FCC!</h1>
+        <nav>
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Classes</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Applied Visual Design/31_create-a-gradual-css-linear-gradient.html b/Applied Visual Design/31_create-a-gradual-css-linear-gradient.html
new file mode 100644
index 0000000..3899605
--- /dev/null
+++ b/Applied Visual Design/31_create-a-gradual-css-linear-gradient.html	
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lession 31</title>
+    <style>
+        div {
+            border-radius: 20px;
+            width: 70%;
+            height: 400px;
+            margin: 50px auto;
+            background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
+        }
+    </style>
+</head>
+
+<body>
+    <div></div>
+</body>
+
+</html>
\ No newline at end of file
