From 742f64bbb024eda4c83eed224625491b7d69f13e Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Thu, 23 Mar 2023 19:50:39 +0530
Subject: [PATCH 01/25] Create README.md

---
 learning/dashboard/buildingblock/README.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 learning/dashboard/buildingblock/README.md
diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
new file mode 100644
index 00000000..a4cf06ac
--- /dev/null
+++ b/learning/dashboard/buildingblock/README.md
@@ -0,0 +1,3 @@
+### html tags
+   HELLO WORLD
+## CSS TAGS 

From 4727d5a794a03cadab9d422334831ece472ce668 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Thu, 23 Mar 2023 20:27:43 +0530
Subject: [PATCH 02/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index a4cf06ac..8b137891 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -1,3 +1 @@
-### html tags
-   HELLO WORLD
-## CSS TAGS 
+

From 17c69aba322285a120f01420a4cec96f7d7d72f4 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Thu, 23 Mar 2023 21:41:19 +0530
Subject: [PATCH 03/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index 8b137891..db4f22b7 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -1 +1,43 @@
+#  *INTRODUCTION TO HTML5!*
+
+HTML stands for **Hyper Text Markup Language**. It is used to design web pages using a markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web pages. **HTML 5** is the <u> fifth and current version of HTML.
+
+## *FEATURES:* 
+  
+- By utilising the `<audio>` and `<video>` tags, it has added new multimedia features that support both audio and video controls.
+
+- There are new graphics elements including vector graphics and tags.
+
+- Drag and Drop- The user can grab an object and drag it further dropping it to a new location.
+
+- Geolocation services: These assist in determining a client's precise location.
+
+- Utilises an offline SQL database to store data.
+-   Easy DOCTYPE declaration i.e., <!doctype html>
+
+
+- **Supported Browsers:**  It is supported by all modern browsers.
+
+
+
+## * Some of removed elements from html5:*
+
+
+| Removed Elements                  |   Use Instead Elements |                    
+|-----------------------------------|------------------------|
+|` <acronym>  `                     |   `<abbr> `           |
+| `<dir>`                           |` <ul>`                |
+|` <font>`                          |` CSS`                 |
+| `<applet>`                        |`<object>`             |
+
+
+
+## *Goals of HTML5:*
+
+
+- Remove plugins like Flash for functionality that are universally required. Provide native   support for media types such as audio and video.
+- Remove plugins like Flash for functionality that are universally required. 
+- Ensure uniformity across all devices and browsers.
+- Make every effort to be as transparent as you can.
+
 

From 533f84c0fb8948fe78d0e215ac36fdfb29cdcf63 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Thu, 23 Mar 2023 21:42:15 +0530
Subject: [PATCH 04/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index db4f22b7..b9d73adf 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -16,11 +16,11 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 -   Easy DOCTYPE declaration i.e., <!doctype html>
 
 
-- **Supported Browsers:**  It is supported by all modern browsers.
+- Supported Browsers: It is supported by all modern browsers.
 
 
 
-## * Some of removed elements from html5:*
+## *Some of removed elements from html5:*
 
 
 | Removed Elements                  |   Use Instead Elements |                    

From c0121cb00338c3738a099608cea4c336e8378e9f Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Fri, 24 Mar 2023 12:04:41 +0530
Subject: [PATCH 05/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 53 ++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index b9d73adf..5a529e22 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -40,4 +40,57 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 - Ensure uniformity across all devices and browsers.
 - Make every effort to be as transparent as you can.
 
+#  INTRODUCTION TO LSS
+- Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
+-   It was Designed by Alexis Sellier.
+
+- ESS is an abbreviated `Learner Style styles`, is an opensource pre-processor language for CSS, The preprocessor is writing a code using a superset of CSS features, compiling this code to native CSS, and browser understanding CSS styles.
+
+## FEATURES OF LSS
+     
+
+### 1.Variables
+
+- *Less* allows variables to be defined. 
+- Variables in Less are defined with an [at sign]  (@). Variable programming is done with a Colon (:).
+
+
+         }
+
+
+
+### 2. Mixins
+
+- Mixins allows embedding all the properties of a class into another class by including the class name as one of its property, thus behaving as a sort of constant or variable. 
+- They can also behave like functions, and take arguments.
+
+
+
+### 3.Functions and operations
+
+- Less allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. 
+- Functions map one-to-one with JavaScript code, allowing manipulation of values.
+
+
+
+# SCSS
+
+
+- SCSS (Sassy Cascading Style Sheets) is one of  two syntaxes available or the popular CSS preprocessor Sass (Syntactically Awesome Stylesheets).
+-  It can be used to style the visual elements of a webpage, including buttons, sliders, images, color schemes, fonts, themes, and layouts. As a true superset of CSS, all valid CSS is also valid SCSS.
+
+
+
+## FEATURES
+
+### 1. VARIABLES
+
+SCSS also supports variables. Variables can be used to store values that will be used throughout the stylesheet. This can be helpful when working with colors, sizes, and other values that might need to be changed frequently.
+
+
+### 2. MIXINS 
+
+
+In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places. 
+
 

From 90bab004a29607a7383905b31b2a96ffe80450fe Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Fri, 24 Mar 2023 12:05:26 +0530
Subject: [PATCH 06/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index 5a529e22..b9201ff8 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -55,7 +55,7 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 - Variables in Less are defined with an [at sign]  (@). Variable programming is done with a Colon (:).
 
 
-         }
+         
 
 
 

From 9356a70edebf6f5fd6a76f84ecc551f7bb7f5d37 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Fri, 24 Mar 2023 12:20:27 +0530
Subject: [PATCH 07/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index b9201ff8..18a31ae5 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -73,24 +73,6 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 
 
 
-# SCSS
-
-
-- SCSS (Sassy Cascading Style Sheets) is one of  two syntaxes available or the popular CSS preprocessor Sass (Syntactically Awesome Stylesheets).
--  It can be used to style the visual elements of a webpage, including buttons, sliders, images, color schemes, fonts, themes, and layouts. As a true superset of CSS, all valid CSS is also valid SCSS.
-
-
-
-## FEATURES
-
-### 1. VARIABLES
-
-SCSS also supports variables. Variables can be used to store values that will be used throughout the stylesheet. This can be helpful when working with colors, sizes, and other values that might need to be changed frequently.
-
-
-### 2. MIXINS 
-
-
-In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places. 
+. 
 
 

From 2a610d3908ef422dcbed4df0ad850b3de0912bf0 Mon Sep 17 00:00:00 2001
From: Meena-srinivas <125020938+Meena-srinivas@users.noreply.github.com>
Date: Fri, 24 Mar 2023 13:12:08 +0530
Subject: [PATCH 08/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index 18a31ae5..a9555d9e 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -71,8 +71,26 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 - Less allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. 
 - Functions map one-to-one with JavaScript code, allowing manipulation of values.
 
+# SCSS
 
 
+- SCSS (Sassy Cascading Style Sheets) is one of  two syntaxes available or the popular CSS preprocessor Sass (Syntactically Awesome Stylesheets).
+-  It can be used to style the visual elements of a webpage, including buttons, sliders, images, color schemes, fonts, themes, and layouts. As a true superset of CSS, all valid CSS is also valid SCSS.
+
+
+
+## FEATURES
+
+### 1. VARIABLES
+
+SCSS also supports variables. Variables can be used to store values that will be used throughout the stylesheet. This can be helpful when working with colors, sizes, and other values that might need to be changed frequently.
+
+
+### 2. MIXINS 
+
+
+In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places
+
 . 
 
 

From 2306e9f62e4e06c54e3366b2ef0c31312c434483 Mon Sep 17 00:00:00 2001
From: Muhammed Azmeel <123229976+Muhammed-Azmeel@users.noreply.github.com>
Date: Fri, 24 Mar 2023 20:30:41 +0530
Subject: [PATCH 09/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 37 +++++++++++++++++++---
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index a9555d9e..40d8f621 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -1,8 +1,8 @@
-#  *INTRODUCTION TO HTML5!*
+#  INTRODUCTION TO HTML5!
 
 HTML stands for **Hyper Text Markup Language**. It is used to design web pages using a markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web pages. **HTML 5** is the <u> fifth and current version of HTML.
 
-## *FEATURES:* 
+## FEATURES:
   
 - By utilising the `<audio>` and `<video>` tags, it has added new multimedia features that support both audio and video controls.
 
@@ -20,7 +20,7 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 
 
 
-## *Some of removed elements from html5:*
+## Some of removed elements from html5:
 
 
 | Removed Elements                  |   Use Instead Elements |                    
@@ -91,6 +91,35 @@ SCSS also supports variables. Variables can be used to store values that will be
 
 In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places
 
-. 
+# COMMONLY USED HTML TAGS
+ **Document structure tag:**
+
+**1.HTML tag**: It is the root of the HTML document which is used to specify that the document is HTML.
+
+**Syntax:**
+
+`<html> Statements... </html>`
+
+**2.Head tag:** The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.
+
+**Syntax:**
+
+`<head> Statements... </head>`
+
+**3.Body tag:** It is used to define the body of an HTML document. It contains images, tables, lists, … etc.
+
+**Syntax:**
+
+`<body> Statements... </body>`
+
+**4.Title tag:** It is used to define the title of an HTML document.
+
+**Syntax:**
+
+`<title> Statements... </title>`
+
+
+
+
 
 

From eb63ea9610d33597f41b226b5113723b799e8660 Mon Sep 17 00:00:00 2001
From: nimrafathima <123230022+nimrafathima@users.noreply.github.com>
Date: Fri, 24 Mar 2023 20:52:56 +0530
Subject: [PATCH 10/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 109 ++++++++++++++++++++-
 1 file changed, 108 insertions(+), 1 deletion(-)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index 40d8f621..bc7a4985 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -32,13 +32,120 @@ HTML stands for **Hyper Text Markup Language**. It is used to design web pages u
 
 
 
-## *Goals of HTML5:*
+## Goals of HTML5:
 
 
 - Remove plugins like Flash for functionality that are universally required. Provide native   support for media types such as audio and video.
 - Remove plugins like Flash for functionality that are universally required. 
 - Ensure uniformity across all devices and browsers.
 - Make every effort to be as transparent as you can.
+  
+  
+  
+  
+  # CSS3 Introduction
+
+A document produced in any markup language can have its appearance, style, and format demonstrated using CSS, a language. It is used to organize and style the design of Web pages, to put it simply. The most recent version of CSS is CSS3, which replaced CSS2.
+Some of the key modules of CSS3 are:
+
+ - Box model
+ - Image values and replaced content
+ -  Text effects
+ - Selectors
+ - Backgrounds and borders
+ - Animations
+ - User interface (UI)
+ - Multiple column layout
+ - 2D/3D transformations
+
+## Features of CSS3
+
+### 1.Selectors
+Through the implementation of selectors, the web page designer can choose on more granular levels. A checked pseudo-class is also included in selectors to design checked items like checkboxes and radio buttons
+
+### 2.Text Layout and Effects
+
+With CSS3, we can modify how text is justified, edit the document's spacing, and style how words are hyphenated.
+
+### 3.First-Letter and First-Line Pseudo-Classes
+
+CSS 3 has features that assist with drop-cap positioning and kerning (changing the space between characters to obtain a nice result) (large decorative capital letter at the starting of a paragraph).
+
+### 4. Paged Content and Generated Media
+
+In Paged Media, CSS 3 offers more options like page numbers and running headers  and footers. Moreover, there are features for cross-references and footnotes that can be printed with Generated Content.
+
+### 5. A Multiple-Column Format
+
+This feature contains parameters for the column-count, column-gap, and column- width that enable designers to present their material in many columns.
+
+
+
+## Benefits of CSS3
+
+ - Using CSS3, navigable components can be positioned consistently and
+   precisely.
+ - A web page can be easily customized because it only requires making  
+   minor changes to a modular file.
+ - CSS3 makes it simpler to create graphics, which makes it simple to   
+   make the site appealing. It enables the viewing of online videos   
+   without the need for external plug-ins.
+ - CSS3 is affordable, quick, and   
+   supported by the majority of browsers.
+## CSS3 EXAMPLES
+ - ### Web Font : 
+  A Web Font is just a technique to use any font in your page, being downloaded instantly by the browser.This will be a radical departure from web design's prior use of just 10 to 15 generally accepted fonts. Yet, because only typefaces with valid licences should be used, this new function raises questions about copyright.
+  
+
+    @font-face  {
+    font-family:  'Name of the new font';
+    src:  url('https://designshack.net/fonts/font.ttf');
+    }
+![Example of page have been mocked up using this technique.](https://designshack.net/postimages/text_webfonts1.jpg)
+
+
+
+ - ### USER INTERFACE :
+ #### Resize 
+
+With CSS3, you can quickly apply resizing to any element to make it cross-browser compatible.
+
+    .ui_resizable  {
+    padding:  20px;
+    border:  1px  solid;
+    resize:  both;
+    overflow:  auto;
+    }
+
+
+
+#### Multiple Columns Using CSS3
+Although CSS2 already has the ability to set an element's outline, CSS3 adds the ability to offset the outline from the element by a value you specify. It varies from a boundary in two ways:
+
+Outlines don't occupy any columns.
+Not all outlines must be rectangular.
+Multi-column layout is a new module added to CSS3 that is suitably named. It lets you to select how many columns text should be divided down into and how they should appear.
+
+    .multiplecolumns  {
+    -moz-column-width:  130px;;
+    -webkit-column-width:  130px;
+    -moz-column-gap:  20px;
+    -webkit-column-gap:  20px;
+    -moz-column-rule:  1px  solid  #ddccb5;
+    -webkit-column-rule:  1px  solid  #ddccb5;
+  
+   ![enter image description here](https://designshack.net/postimages/multiplecolumns.png)
+
+
+### Spanning Columns
+
+span more than one column – a heading, table or image for instance.
+
+    enter code hereh2  {
+    column-span:  all
+    }
+![enter image description here](https://designshack.net/postimages/multiplecolumns_heading.jpg)
+
 
 #  INTRODUCTION TO LSS
 - Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.

From 5ce500ee49d1341dc4827306deb64e72b8cbfb30 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:28:10 +0530
Subject: [PATCH 11/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 108 +++++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index bc7a4985..dac6c5fe 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -227,6 +227,114 @@ In SCSS, mixins allow you to create groups of CSS declarations that can be reuse
 
 
 
+  # A SIMPLE RESUME USING HTML
+ ````
+  <div class="resume">
+  <div class="base">
+    <div class="profile">
+      <div class="photo">
+        <!--<img src="" /> -->
+        <i class="fas fa-rocket"></i>
+      </div>
+      <div class="info">
+        <h1 class="name">JOHN</h1>
+        <h2 class="job">Frontend Web Designer</h2>
+      </div>
+    </div>
+    <div class="about">
+      <h3>About Me</h3>I'm a web designer for Fiserv, specializing in web design, graphic design, and UX. Experienced with the Adobe Creative Suite, responsive design, social media management, and prototyping.
+    </div>
+    <div class="contact">
+      <h3>Contact Me</h3>
+      <div class="call"><a href="tel:123-456-7890"><i class="fas fa-phone"></i><span>phoneno-123-456-7890</span></a></div>
+      <div class="address"><a href="https://goo.gl/maps/fiTBGT6Vnhy"><i class="fas fa-map-marker"></i><span>address-canada</span></a>
+      </div>
+     
+      <div class="website"><a href="http://abc.com/" target="_blank"> <i class="fas fa-home"></i><span>website-abc.com</span></a></div>
+    </div>
+    <div class="follow">
+      <h3>Follow Me</h3>
+      <div class="box">
+        <a href="https://www.facebook.com/astronaomical/" target="_blank"><i class="fab fa-facebook"></i></a>
+        <a href="https://www.instagram.com/astronaomical/" target="_blank"><i class="fab fa-instagram "></i></a>
+        <a href="https://www.pinterest.com/astronaomical/" target="_blank"><i class="fab fa-pinterest"></i></a>
+        <a href="https://www.linkedin.com/in/naomi-weatherford-758385112/" target="_blank"><i class="fab fa-linkedin"></i></a>
+        <a href="https://codepen.io/astronaomical/" target="_blank"><i class="fab fa-codepen"></i></a>
+        <a href="https://www.behance.net/astronaomical" target="_blank"><i class="fab fa-behance"></i></a>
+      </div>
+    </div>
+  </div>
+  <div class="func">
+    <div class="work">
+      <h3><i class="fa fa-briefcase"></i>Experience</h3>
+      <ul>
+        <li><span>Technical Consultant -<br>Web Design,</span><small></small><small>   mar 2023 - Now</small></li>
+        <li><span>Web Designer,</span><small></small><small>  Jan 2018 - Apr 2018</small></li>
+        <li><span>Intern - Web Design,</span><small></small><small>  Aug 2017 - Dec 2017</small></li>
+      </ul>
+    </div>
+    <div class="edu">
+      <h3><i class="fa fa-graduation-cap"></i>Education</h3>
+      <ul>
+        <li><span>Bachelor of Science<br>Web Design and Development</span><small>,ABC university,</small><small>Jan. 2016 - Apr. 2018</small></li>
+        <li><span>Computer Science</span><small> ,Edward Community College,</small><small>Sept. 2014 - Dec. 2015</small></li>
+        <li><span>High School</span><small> ,M. Jackson High School,</small><small>Jan. 2013 - Jun. 2015</small></li>
+      </ul>
+    </div>
+    <div class="skills-prog">
+      <h3><i class="fas fa-code"></i>Programming Skills</h3>
+      <ul>
+        
+        <li data-percent="90"><span>CSS3 & SCSS</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="60"><span>JavaScript</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="50"><span>jQuery</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="40"><span>JSON</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="55"><span>PHP</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="40"><span>MySQL</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    
+    <div class="interests">
+      <h3><i class="fas fa-star"></i>Interests</h3>
+      <div class="interests-items">
+        <div class="art"><i class="fas fa-palette"></i><span>Art</span></div>
+        <div class="art"><i class="fas fa-book"></i><span>Books</span></div>
+        <div class="movies"><i class="fas fa-film"></i><span>Movies</span></div>
+        <div class="music"><i class="fas fa-headphones"></i><span>Music</span></div>
+        <div class="games"><i class="fas fa-gamepad"></i><span>Games</span></div>
+      </div>
+    </div>
+  </div>
+</div>
+  ````
+  
+  ###OUTPUT:
+
 
+![FINAL 2](https://user-images.githubusercontent.com/123230416/227578598-e9f350b4-be7c-4e0d-870f-27631c15a15b.png)
 
 

From 14c23530cb698d25ad12ab43c1bc3be3a6af6703 Mon Sep 17 00:00:00 2001
From: Meevel Francis <123230172+meevelfrancis06@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:57:00 +0530
Subject: [PATCH 12/25] Update README.md

---
 learning/dashboard/buildingblock/README.md | 126 +++++++++++++++++++++
 1 file changed, 126 insertions(+)

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
index dac6c5fe..758e4f0b 100644
--- a/learning/dashboard/buildingblock/README.md
+++ b/learning/dashboard/buildingblock/README.md
@@ -225,6 +225,132 @@ In SCSS, mixins allow you to create groups of CSS declarations that can be reuse
 
 `<title> Statements... </title>`
 
+**CSS**
+
+CSS is the language we use to style an HTML document.
+
+CSS describes how HTML elements should be displayed.
+
+CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
+
+There are three ways of inserting a style sheet:
+
+-   External CSS
+-   Internal CSS
+-   Inline CSS
+
+CSS Example
+
+body {  
+background-color: lightblue;  
+}h1 {  
+color: white;  
+text-align: center;  
+}p {  
+font-family: verdana;  
+font-size: 20px;  
+}
+
+**CSS PROPERTIES**
+
+# **CSS accent-color Property:**
+
+The `accent-color` property specifies the accent color for user-interface controls like: `<input type="checkbox">, <input type="radio">, <input type="range"> and <progress>.`
+
+### Example
+
+Set the accent color for different user-interface controls:
+
+input[type=checkbox] {  
+accent-color: red;  
+}input[type=radio] {  
+accent-color: green;  
+}input[type=range] {  
+accent-color: rgb(0, 0, 255);  
+}progress {  
+accent-color: hsl(39, 100%, 50%);  
+}
+
+## **CSS Syntax**
+
+accent-color: auto|_color_|initial|inherit;
+
+# **CSS align-content Property**
+
+The `align-content` property specifies how flex lines are distributed along the cross axis in a flexbox container.
+
+### Example
+
+Pack lines toward the center of the flex container:
+
+div{  
+width: 70px;  
+height: 300px;  
+border: 1px solid #c3c3c3;  
+display: flex;  
+flex-wrap: wrap;  
+align-content: center;  
+}
+# **CSS backdrop-filter Property**
+
+The `backdrop-filter` property is used to apply a graphical effect to the area behind an element.
+
+### Example
+
+Add a graphical effect to the area behind an element:
+
+div.transbox {  
+background-color: rgba(255, 255, 255, 0.4);  
+-webkit-backdrop-filter: blur(5px);  
+backdrop-filter: blur(5px);  
+}
+
+
+## **CSS Syntax**
+
+backdrop-filter: none|_filter_|initial|inherit;
+
+
+# **CSS border-block Property**
+
+The border-block property is a shorthand property for these properties:
+
+-   border-block-width
+-   border-block-style
+-   border-block-color
+
+If values for color or width are omitted, default values will be used.
+
+The CSS border-block property is very similar to CSS property [border], but the border-block property is dependent on block direction.
+
+
+## **CSS Syntax**
+
+border-block: _border-block-width_ _border-block-style_ _border-block-color_ |initial|inherit;
+
+# **CSS border-top Property**
+
+The `border-top` shorthand property sets all the top border properties in one declaration.
+
+The properties that can be set must be in the following order:
+
+-   border-top-width
+-   border-top-style
+-   border-top-color
+If border-top-color is omitted, the color applied will be the color of the text.
+
+
+### Example
+
+Set the style of the top border for different elements:
+
+h1 {  
+border-top: 5px solid red;  
+}h2 {  
+border-top: 4px dotted blue;  
+}div {  
+border-top: double;  
+}
 
 
   # A SIMPLE RESUME USING HTML

From f3f64e2e75fab57a85e794d58ed8c30263f5fa82 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Sun, 26 Mar 2023 18:44:53 +0530
Subject: [PATCH 13/25] Delete README.md

---
 learning/dashboard/buildingblock/README.md | 466 ---------------------
 1 file changed, 466 deletions(-)
 delete mode 100644 learning/dashboard/buildingblock/README.md

diff --git a/learning/dashboard/buildingblock/README.md b/learning/dashboard/buildingblock/README.md
deleted file mode 100644
index 758e4f0b..00000000
--- a/learning/dashboard/buildingblock/README.md
+++ /dev/null
@@ -1,466 +0,0 @@
-#  INTRODUCTION TO HTML5!
-
-HTML stands for **Hyper Text Markup Language**. It is used to design web pages using a markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web pages. **HTML 5** is the <u> fifth and current version of HTML.
-
-## FEATURES:
-  
-- By utilising the `<audio>` and `<video>` tags, it has added new multimedia features that support both audio and video controls.
-
-- There are new graphics elements including vector graphics and tags.
-
-- Drag and Drop- The user can grab an object and drag it further dropping it to a new location.
-
-- Geolocation services: These assist in determining a client's precise location.
-
-- Utilises an offline SQL database to store data.
--   Easy DOCTYPE declaration i.e., <!doctype html>
-
-
-- Supported Browsers: It is supported by all modern browsers.
-
-
-
-## Some of removed elements from html5:
-
-
-| Removed Elements                  |   Use Instead Elements |                    
-|-----------------------------------|------------------------|
-|` <acronym>  `                     |   `<abbr> `           |
-| `<dir>`                           |` <ul>`                |
-|` <font>`                          |` CSS`                 |
-| `<applet>`                        |`<object>`             |
-
-
-
-## Goals of HTML5:
-
-
-- Remove plugins like Flash for functionality that are universally required. Provide native   support for media types such as audio and video.
-- Remove plugins like Flash for functionality that are universally required. 
-- Ensure uniformity across all devices and browsers.
-- Make every effort to be as transparent as you can.
-  
-  
-  
-  
-  # CSS3 Introduction
-
-A document produced in any markup language can have its appearance, style, and format demonstrated using CSS, a language. It is used to organize and style the design of Web pages, to put it simply. The most recent version of CSS is CSS3, which replaced CSS2.
-Some of the key modules of CSS3 are:
-
- - Box model
- - Image values and replaced content
- -  Text effects
- - Selectors
- - Backgrounds and borders
- - Animations
- - User interface (UI)
- - Multiple column layout
- - 2D/3D transformations
-
-## Features of CSS3
-
-### 1.Selectors
-Through the implementation of selectors, the web page designer can choose on more granular levels. A checked pseudo-class is also included in selectors to design checked items like checkboxes and radio buttons
-
-### 2.Text Layout and Effects
-
-With CSS3, we can modify how text is justified, edit the document's spacing, and style how words are hyphenated.
-
-### 3.First-Letter and First-Line Pseudo-Classes
-
-CSS 3 has features that assist with drop-cap positioning and kerning (changing the space between characters to obtain a nice result) (large decorative capital letter at the starting of a paragraph).
-
-### 4. Paged Content and Generated Media
-
-In Paged Media, CSS 3 offers more options like page numbers and running headers  and footers. Moreover, there are features for cross-references and footnotes that can be printed with Generated Content.
-
-### 5. A Multiple-Column Format
-
-This feature contains parameters for the column-count, column-gap, and column- width that enable designers to present their material in many columns.
-
-
-
-## Benefits of CSS3
-
- - Using CSS3, navigable components can be positioned consistently and
-   precisely.
- - A web page can be easily customized because it only requires making  
-   minor changes to a modular file.
- - CSS3 makes it simpler to create graphics, which makes it simple to   
-   make the site appealing. It enables the viewing of online videos   
-   without the need for external plug-ins.
- - CSS3 is affordable, quick, and   
-   supported by the majority of browsers.
-## CSS3 EXAMPLES
- - ### Web Font : 
-  A Web Font is just a technique to use any font in your page, being downloaded instantly by the browser.This will be a radical departure from web design's prior use of just 10 to 15 generally accepted fonts. Yet, because only typefaces with valid licences should be used, this new function raises questions about copyright.
-  
-
-    @font-face  {
-    font-family:  'Name of the new font';
-    src:  url('https://designshack.net/fonts/font.ttf');
-    }
-![Example of page have been mocked up using this technique.](https://designshack.net/postimages/text_webfonts1.jpg)
-
-
-
- - ### USER INTERFACE :
- #### Resize 
-
-With CSS3, you can quickly apply resizing to any element to make it cross-browser compatible.
-
-    .ui_resizable  {
-    padding:  20px;
-    border:  1px  solid;
-    resize:  both;
-    overflow:  auto;
-    }
-
-
-
-#### Multiple Columns Using CSS3
-Although CSS2 already has the ability to set an element's outline, CSS3 adds the ability to offset the outline from the element by a value you specify. It varies from a boundary in two ways:
-
-Outlines don't occupy any columns.
-Not all outlines must be rectangular.
-Multi-column layout is a new module added to CSS3 that is suitably named. It lets you to select how many columns text should be divided down into and how they should appear.
-
-    .multiplecolumns  {
-    -moz-column-width:  130px;;
-    -webkit-column-width:  130px;
-    -moz-column-gap:  20px;
-    -webkit-column-gap:  20px;
-    -moz-column-rule:  1px  solid  #ddccb5;
-    -webkit-column-rule:  1px  solid  #ddccb5;
-  
-   ![enter image description here](https://designshack.net/postimages/multiplecolumns.png)
-
-
-### Spanning Columns
-
-span more than one column – a heading, table or image for instance.
-
-    enter code hereh2  {
-    column-span:  all
-    }
-![enter image description here](https://designshack.net/postimages/multiplecolumns_heading.jpg)
-
-
-#  INTRODUCTION TO LSS
-- Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
--   It was Designed by Alexis Sellier.
-
-- ESS is an abbreviated `Learner Style styles`, is an opensource pre-processor language for CSS, The preprocessor is writing a code using a superset of CSS features, compiling this code to native CSS, and browser understanding CSS styles.
-
-## FEATURES OF LSS
-     
-
-### 1.Variables
-
-- *Less* allows variables to be defined. 
-- Variables in Less are defined with an [at sign]  (@). Variable programming is done with a Colon (:).
-
-
-         
-
-
-
-### 2. Mixins
-
-- Mixins allows embedding all the properties of a class into another class by including the class name as one of its property, thus behaving as a sort of constant or variable. 
-- They can also behave like functions, and take arguments.
-
-
-
-### 3.Functions and operations
-
-- Less allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. 
-- Functions map one-to-one with JavaScript code, allowing manipulation of values.
-
-# SCSS
-
-
-- SCSS (Sassy Cascading Style Sheets) is one of  two syntaxes available or the popular CSS preprocessor Sass (Syntactically Awesome Stylesheets).
--  It can be used to style the visual elements of a webpage, including buttons, sliders, images, color schemes, fonts, themes, and layouts. As a true superset of CSS, all valid CSS is also valid SCSS.
-
-
-
-## FEATURES
-
-### 1. VARIABLES
-
-SCSS also supports variables. Variables can be used to store values that will be used throughout the stylesheet. This can be helpful when working with colors, sizes, and other values that might need to be changed frequently.
-
-
-### 2. MIXINS 
-
-
-In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places
-
-# COMMONLY USED HTML TAGS
- **Document structure tag:**
-
-**1.HTML tag**: It is the root of the HTML document which is used to specify that the document is HTML.
-
-**Syntax:**
-
-`<html> Statements... </html>`
-
-**2.Head tag:** The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.
-
-**Syntax:**
-
-`<head> Statements... </head>`
-
-**3.Body tag:** It is used to define the body of an HTML document. It contains images, tables, lists, … etc.
-
-**Syntax:**
-
-`<body> Statements... </body>`
-
-**4.Title tag:** It is used to define the title of an HTML document.
-
-**Syntax:**
-
-`<title> Statements... </title>`
-
-**CSS**
-
-CSS is the language we use to style an HTML document.
-
-CSS describes how HTML elements should be displayed.
-
-CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
-
-There are three ways of inserting a style sheet:
-
--   External CSS
--   Internal CSS
--   Inline CSS
-
-CSS Example
-
-body {  
-background-color: lightblue;  
-}h1 {  
-color: white;  
-text-align: center;  
-}p {  
-font-family: verdana;  
-font-size: 20px;  
-}
-
-**CSS PROPERTIES**
-
-# **CSS accent-color Property:**
-
-The `accent-color` property specifies the accent color for user-interface controls like: `<input type="checkbox">, <input type="radio">, <input type="range"> and <progress>.`
-
-### Example
-
-Set the accent color for different user-interface controls:
-
-input[type=checkbox] {  
-accent-color: red;  
-}input[type=radio] {  
-accent-color: green;  
-}input[type=range] {  
-accent-color: rgb(0, 0, 255);  
-}progress {  
-accent-color: hsl(39, 100%, 50%);  
-}
-
-## **CSS Syntax**
-
-accent-color: auto|_color_|initial|inherit;
-
-# **CSS align-content Property**
-
-The `align-content` property specifies how flex lines are distributed along the cross axis in a flexbox container.
-
-### Example
-
-Pack lines toward the center of the flex container:
-
-div{  
-width: 70px;  
-height: 300px;  
-border: 1px solid #c3c3c3;  
-display: flex;  
-flex-wrap: wrap;  
-align-content: center;  
-}
-# **CSS backdrop-filter Property**
-
-The `backdrop-filter` property is used to apply a graphical effect to the area behind an element.
-
-### Example
-
-Add a graphical effect to the area behind an element:
-
-div.transbox {  
-background-color: rgba(255, 255, 255, 0.4);  
--webkit-backdrop-filter: blur(5px);  
-backdrop-filter: blur(5px);  
-}
-
-
-## **CSS Syntax**
-
-backdrop-filter: none|_filter_|initial|inherit;
-
-
-# **CSS border-block Property**
-
-The border-block property is a shorthand property for these properties:
-
--   border-block-width
--   border-block-style
--   border-block-color
-
-If values for color or width are omitted, default values will be used.
-
-The CSS border-block property is very similar to CSS property [border], but the border-block property is dependent on block direction.
-
-
-## **CSS Syntax**
-
-border-block: _border-block-width_ _border-block-style_ _border-block-color_ |initial|inherit;
-
-# **CSS border-top Property**
-
-The `border-top` shorthand property sets all the top border properties in one declaration.
-
-The properties that can be set must be in the following order:
-
--   border-top-width
--   border-top-style
--   border-top-color
-If border-top-color is omitted, the color applied will be the color of the text.
-
-
-### Example
-
-Set the style of the top border for different elements:
-
-h1 {  
-border-top: 5px solid red;  
-}h2 {  
-border-top: 4px dotted blue;  
-}div {  
-border-top: double;  
-}
-
-
-  # A SIMPLE RESUME USING HTML
- ````
-  <div class="resume">
-  <div class="base">
-    <div class="profile">
-      <div class="photo">
-        <!--<img src="" /> -->
-        <i class="fas fa-rocket"></i>
-      </div>
-      <div class="info">
-        <h1 class="name">JOHN</h1>
-        <h2 class="job">Frontend Web Designer</h2>
-      </div>
-    </div>
-    <div class="about">
-      <h3>About Me</h3>I'm a web designer for Fiserv, specializing in web design, graphic design, and UX. Experienced with the Adobe Creative Suite, responsive design, social media management, and prototyping.
-    </div>
-    <div class="contact">
-      <h3>Contact Me</h3>
-      <div class="call"><a href="tel:123-456-7890"><i class="fas fa-phone"></i><span>phoneno-123-456-7890</span></a></div>
-      <div class="address"><a href="https://goo.gl/maps/fiTBGT6Vnhy"><i class="fas fa-map-marker"></i><span>address-canada</span></a>
-      </div>
-     
-      <div class="website"><a href="http://abc.com/" target="_blank"> <i class="fas fa-home"></i><span>website-abc.com</span></a></div>
-    </div>
-    <div class="follow">
-      <h3>Follow Me</h3>
-      <div class="box">
-        <a href="https://www.facebook.com/astronaomical/" target="_blank"><i class="fab fa-facebook"></i></a>
-        <a href="https://www.instagram.com/astronaomical/" target="_blank"><i class="fab fa-instagram "></i></a>
-        <a href="https://www.pinterest.com/astronaomical/" target="_blank"><i class="fab fa-pinterest"></i></a>
-        <a href="https://www.linkedin.com/in/naomi-weatherford-758385112/" target="_blank"><i class="fab fa-linkedin"></i></a>
-        <a href="https://codepen.io/astronaomical/" target="_blank"><i class="fab fa-codepen"></i></a>
-        <a href="https://www.behance.net/astronaomical" target="_blank"><i class="fab fa-behance"></i></a>
-      </div>
-    </div>
-  </div>
-  <div class="func">
-    <div class="work">
-      <h3><i class="fa fa-briefcase"></i>Experience</h3>
-      <ul>
-        <li><span>Technical Consultant -<br>Web Design,</span><small></small><small>   mar 2023 - Now</small></li>
-        <li><span>Web Designer,</span><small></small><small>  Jan 2018 - Apr 2018</small></li>
-        <li><span>Intern - Web Design,</span><small></small><small>  Aug 2017 - Dec 2017</small></li>
-      </ul>
-    </div>
-    <div class="edu">
-      <h3><i class="fa fa-graduation-cap"></i>Education</h3>
-      <ul>
-        <li><span>Bachelor of Science<br>Web Design and Development</span><small>,ABC university,</small><small>Jan. 2016 - Apr. 2018</small></li>
-        <li><span>Computer Science</span><small> ,Edward Community College,</small><small>Sept. 2014 - Dec. 2015</small></li>
-        <li><span>High School</span><small> ,M. Jackson High School,</small><small>Jan. 2013 - Jun. 2015</small></li>
-      </ul>
-    </div>
-    <div class="skills-prog">
-      <h3><i class="fas fa-code"></i>Programming Skills</h3>
-      <ul>
-        
-        <li data-percent="90"><span>CSS3 & SCSS</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="60"><span>JavaScript</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="50"><span>jQuery</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="40"><span>JSON</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="55"><span>PHP</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="40"><span>MySQL</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-      </ul>
-    </div>
-    
-    <div class="interests">
-      <h3><i class="fas fa-star"></i>Interests</h3>
-      <div class="interests-items">
-        <div class="art"><i class="fas fa-palette"></i><span>Art</span></div>
-        <div class="art"><i class="fas fa-book"></i><span>Books</span></div>
-        <div class="movies"><i class="fas fa-film"></i><span>Movies</span></div>
-        <div class="music"><i class="fas fa-headphones"></i><span>Music</span></div>
-        <div class="games"><i class="fas fa-gamepad"></i><span>Games</span></div>
-      </div>
-    </div>
-  </div>
-</div>
-  ````
-  
-  ###OUTPUT:
-
-
-![FINAL 2](https://user-images.githubusercontent.com/123230416/227578598-e9f350b4-be7c-4e0d-870f-27631c15a15b.png)
-
-

From 4da16b5b78a82d800e002c53a52eb53653ac4800 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:05:51 +0530
Subject: [PATCH 14/25] Create README.md

---
 learning/dashboard/BuildingBlock/README.md | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 learning/dashboard/BuildingBlock/README.md

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
new file mode 100644
index 00000000..25f160dc
--- /dev/null
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -0,0 +1,41 @@
+#  INTRODUCTION TO HTML5!
+
+HTML stands for *Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web pages. **HTML 5* is the <u> fifth and current version of HTML.
+
+## FEATURES:
+
+- By utilising the `<audio>` and `<video>` tags, it has added new multimedia features that support both audio and video controls.
+
+- There are new graphics elements including vector graphics and tags.
+
+- Drag and Drop- The user can grab an object and drag it further dropping it to a new location.
+
+- Geolocation services: These assist in determining a client's precise location.
+
+- Utilises an offline SQL database to store data.
+-   Easy DOCTYPE declaration i.e., <!doctype html>
+
+
+- Supported Browsers: It is supported by all modern browsers.
+
+
+
+## Some of removed elements from html5:
+
+
+| Removed Elements                  |   Use Instead Elements |                    
+|-----------------------------------|------------------------|
+|` <acronym>  `                     |   `<abbr> `           |
+| `<dir>`                           |` <ul>`                |
+|` <font>`                          |` CSS`                 |
+| `<applet>`                        |`<object>`             |
+
+
+
+## Goals of HTML5:
+
+
+- Remove plugins like Flash for functionality that are universally required. Provide native   support for media types such as audio and video.
+- Remove plugins like Flash for functionality that are universally required. 
+- Ensure uniformity across all devices and browsers.
+- Make every effort to be as transparent as you can.

From 4ebace1dfdf81c1c8f6552cfe825cba40a6a8f8d Mon Sep 17 00:00:00 2001
From: Meena-srinivas <125020938+Meena-srinivas@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:08:31 +0530
Subject: [PATCH 15/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 52 ++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index 25f160dc..d1c08f21 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -39,3 +39,55 @@ HTML stands for *Hyper Text Markup Language. It is used to design web pages usin
 - Remove plugins like Flash for functionality that are universally required. 
 - Ensure uniformity across all devices and browsers.
 - Make every effort to be as transparent as you can.
+  
+  #  INTRODUCTION TO LSS
+- Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
+-   It was Designed by Alexis Sellier.
+
+- ESS is an abbreviated `Learner Style styles`, is an opensource pre-processor language for CSS, The preprocessor is writing a code using a superset of CSS features, compiling this code to native CSS, and browser understanding CSS styles.
+
+## FEATURES OF LSS
+
+
+### 1.Variables
+
+- Less allows variables to be defined. 
+- Variables in Less are defined with an [at sign]  (@). Variable programming is done with a Colon (:).
+
+
+
+
+
+
+### 2. Mixins
+
+- Mixins allows embedding all the properties of a class into another class by including the class name as one of its property, thus behaving as a sort of constant or variable. 
+- They can also behave like functions, and take arguments.
+
+
+
+### 3.Functions and operations
+
+- Less allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. 
+- Functions map one-to-one with JavaScript code, allowing manipulation of values.
+
+# SCSS
+
+
+- SCSS (Sassy Cascading Style Sheets) is one of  two syntaxes available or the popular CSS preprocessor Sass (Syntactically Awesome Stylesheets).
+-  It can be used to style the visual elements of a webpage, including buttons, sliders, images, color schemes, fonts, themes, and layouts. As a true superset of CSS, all valid CSS is also valid SCSS.
+
+
+
+## FEATURES
+
+### 1. VARIABLES
+
+SCSS also supports variables. Variables can be used to store values that will be used throughout the stylesheet. This can be helpful when working with colors, sizes, and other values that might need to be changed frequently.
+
+
+### 2. MIXINS 
+
+
+In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places
+

From 517e9b8155292860d0dd4b9bf33c12f05e3a0396 Mon Sep 17 00:00:00 2001
From: Muhammed Azmeel <123229976+Muhammed-Azmeel@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:11:43 +0530
Subject: [PATCH 16/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 28 ++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index d1c08f21..d715c8f1 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -90,4 +90,32 @@ SCSS also supports variables. Variables can be used to store values that will be
 
 
 In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places
+  
+  # COMMONLY USED HTML TAGS
+ *Document structure tag:*
+
+*1.HTML tag*: It is the root of the HTML document which is used to specify that the document is HTML.
+
+*Syntax:*
+
+`<html> Statements... </html>`
+
+*2.Head tag:* The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.
+
+*Syntax:*
+
+`<head> Statements... </head>`
+
+*3.Body tag:* It is used to define the body of an HTML document. It contains images, tables, lists, … etc.
+
+*Syntax:*
+
+`<body> Statements... </body>`
+
+*4.Title tag:* It is used to define the title of an HTML document.
+
+*Syntax:*
+
+`<title> Statements... </title>`
+
 

From f9fc77b3dc01a39c1ef026e2397b7d07dd9492f0 Mon Sep 17 00:00:00 2001
From: nimrafathima <123230022+nimrafathima@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:17:56 +0530
Subject: [PATCH 17/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 107 ++++++++++++++++++++-
 1 file changed, 104 insertions(+), 3 deletions(-)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index d715c8f1..80f55579 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -40,6 +40,110 @@ HTML stands for *Hyper Text Markup Language. It is used to design web pages usin
 - Ensure uniformity across all devices and browsers.
 - Make every effort to be as transparent as you can.
   
+  
+   # CSS3 Introduction
+
+A document produced in any markup language can have its appearance, style, and format demonstrated using CSS, a language. It is used to organize and style the design of Web pages, to put it simply. The most recent version of CSS is CSS3, which replaced CSS2.
+Some of the key modules of CSS3 are:
+
+ - Box model
+ - Image values and replaced content
+ -  Text effects
+ - Selectors
+ - Backgrounds and borders
+ - Animations
+ - User interface (UI)
+ - Multiple column layout
+ - 2D/3D transformations
+
+## Features of CSS3
+
+### 1.Selectors
+Through the implementation of selectors, the web page designer can choose on more granular levels. A checked pseudo-class is also included in selectors to design checked items like checkboxes and radio buttons
+
+### 2.Text Layout and Effects
+
+With CSS3, we can modify how text is justified, edit the document's spacing, and style how words are hyphenated.
+
+### 3.First-Letter and First-Line Pseudo-Classes
+
+CSS 3 has features that assist with drop-cap positioning and kerning (changing the space between characters to obtain a nice result) (large decorative capital letter at the starting of a paragraph).
+
+### 4. Paged Content and Generated Media
+
+In Paged Media, CSS 3 offers more options like page numbers and running headers  and footers. Moreover, there are features for cross-references and footnotes that can be printed with Generated Content.
+
+### 5. A Multiple-Column Format
+
+This feature contains parameters for the column-count, column-gap, and column- width that enable designers to present their material in many columns.
+
+
+
+## Benefits of CSS3
+
+ - Using CSS3, navigable components can be positioned consistently and
+   precisely.
+ - A web page can be easily customized because it only requires making  
+   minor changes to a modular file.
+ - CSS3 makes it simpler to create graphics, which makes it simple to   
+   make the site appealing. It enables the viewing of online videos   
+   without the need for external plug-ins.
+ - CSS3 is affordable, quick, and   
+   supported by the majority of browsers.
+## CSS3 EXAMPLES
+ - ### Web Font : 
+  A Web Font is just a technique to use any font in your page, being downloaded instantly by the browser.This will be a radical departure from web design's prior use of just 10 to 15 generally accepted fonts. Yet, because only typefaces with valid licences should be used, this new function raises questions about copyright.
+
+
+    @font-face  {
+    font-family:  'Name of the new font';
+    src:  url('https://designshack.net/fonts/font.ttf');
+    }
+![Example of page have been mocked up using this technique.](https://designshack.net/postimages/text_webfonts1.jpg)
+
+
+
+ - ### USER INTERFACE :
+ #### Resize 
+
+With CSS3, you can quickly apply resizing to any element to make it cross-browser compatible.
+
+    .ui_resizable  {
+    padding:  20px;
+    border:  1px  solid;
+    resize:  both;
+    overflow:  auto;
+    }
+
+
+
+#### Multiple Columns Using CSS3
+Although CSS2 already has the ability to set an element's outline, CSS3 adds the ability to offset the outline from the element by a value you specify. It varies from a boundary in two ways:
+
+Outlines don't occupy any columns.
+Not all outlines must be rectangular.
+Multi-column layout is a new module added to CSS3 that is suitably named. It lets you to select how many columns text should be divided down into and how they should appear.
+
+    .multiplecolumns  {
+    -moz-column-width:  130px;;
+    -webkit-column-width:  130px;
+    -moz-column-gap:  20px;
+    -webkit-column-gap:  20px;
+    -moz-column-rule:  1px  solid  #ddccb5;
+    -webkit-column-rule:  1px  solid  #ddccb5;
+
+   ![enter image description here](https://designshack.net/postimages/multiplecolumns.png)
+
+
+### Spanning Columns
+
+span more than one column – a heading, table or image for instance.
+
+    enter code hereh2  {
+    column-span:  all
+    }
+![enter image description here](https://designshack.net/postimages/multiplecolumns_heading.jpg)
+  
   #  INTRODUCTION TO LSS
 - Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
 -   It was Designed by Alexis Sellier.
@@ -56,9 +160,6 @@ HTML stands for *Hyper Text Markup Language. It is used to design web pages usin
 
 
 
-
-
-
 ### 2. Mixins
 
 - Mixins allows embedding all the properties of a class into another class by including the class name as one of its property, thus behaving as a sort of constant or variable. 

From 72ae6259be5d093717882f3dff7a543259410046 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:22:49 +0530
Subject: [PATCH 18/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 109 +++++++++++++++++++++
 1 file changed, 109 insertions(+)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index 80f55579..52264d90 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -220,3 +220,112 @@ In SCSS, mixins allow you to create groups of CSS declarations that can be reuse
 `<title> Statements... </title>`
 
 
+  # A SIMPLE RESUME USING HTML
+ `
+  <div class="resume">
+  <div class="base">
+    <div class="profile">
+      <div class="photo">
+        <!--<img src="" /> -->
+        <i class="fas fa-rocket"></i>
+      </div>
+      <div class="info">
+        <h1 class="name">JOHN</h1>
+        <h2 class="job">Frontend Web Designer</h2>
+      </div>
+    </div>
+    <div class="about">
+      <h3>About Me</h3>I'm a web designer for Fiserv, specializing in web design, graphic design, and UX. Experienced with the Adobe Creative Suite, responsive design, social media management, and prototyping.
+    </div>
+    <div class="contact">
+      <h3>Contact Me</h3>
+      <div class="call"><a href="tel:123-456-7890"><i class="fas fa-phone"></i><span>phoneno-123-456-7890</span></a></div>
+      <div class="address"><a href="https://goo.gl/maps/fiTBGT6Vnhy"><i class="fas fa-map-marker"></i><span>address-canada</span></a>
+      </div>
+     
+      <div class="website"><a href="http://abc.com/" target="_blank"> <i class="fas fa-home"></i><span>website-abc.com</span></a></div>
+    </div>
+    <div class="follow">
+      <h3>Follow Me</h3>
+      <div class="box">
+        <a href="https://www.facebook.com/astronaomical/" target="_blank"><i class="fab fa-facebook"></i></a>
+        <a href="https://www.instagram.com/astronaomical/" target="_blank"><i class="fab fa-instagram "></i></a>
+        <a href="https://www.pinterest.com/astronaomical/" target="_blank"><i class="fab fa-pinterest"></i></a>
+        <a href="https://www.linkedin.com/in/naomi-weatherford-758385112/" target="_blank"><i class="fab fa-linkedin"></i></a>
+        <a href="https://codepen.io/astronaomical/" target="_blank"><i class="fab fa-codepen"></i></a>
+        <a href="https://www.behance.net/astronaomical" target="_blank"><i class="fab fa-behance"></i></a>
+      </div>
+    </div>
+  </div>
+  <div class="func">
+    <div class="work">
+      <h3><i class="fa fa-briefcase"></i>Experience</h3>
+      <ul>
+        <li><span>Technical Consultant -<br>Web Design,</span><small></small><small>   mar 2023 - Now</small></li>
+        <li><span>Web Designer,</span><small></small><small>  Jan 2018 - Apr 2018</small></li>
+        <li><span>Intern - Web Design,</span><small></small><small>  Aug 2017 - Dec 2017</small></li>
+      </ul>
+    </div>
+    <div class="edu">
+      <h3><i class="fa fa-graduation-cap"></i>Education</h3>
+      <ul>
+        <li><span>Bachelor of Science<br>Web Design and Development</span><small>,ABC university,</small><small>Jan. 2016 - Apr. 2018</small></li>
+        <li><span>Computer Science</span><small> ,Edward Community College,</small><small>Sept. 2014 - Dec. 2015</small></li>
+        <li><span>High School</span><small> ,M. Jackson High School,</small><small>Jan. 2013 - Jun. 2015</small></li>
+      </ul>
+    </div>
+    <div class="skills-prog">
+      <h3><i class="fas fa-code"></i>Programming Skills</h3>
+      <ul>
+        
+        <li data-percent="90"><span>CSS3 & SCSS</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="60"><span>JavaScript</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="50"><span>jQuery</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="40"><span>JSON</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="55"><span>PHP</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+        <li data-percent="40"><span>MySQL</span>
+          <div class="skills-bar">
+            <div class="bar"></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    
+    <div class="interests">
+      <h3><i class="fas fa-star"></i>Interests</h3>
+      <div class="interests-items">
+        <div class="art"><i class="fas fa-palette"></i><span>Art</span></div>
+        <div class="art"><i class="fas fa-book"></i><span>Books</span></div>
+        <div class="movies"><i class="fas fa-film"></i><span>Movies</span></div>
+        <div class="music"><i class="fas fa-headphones"></i><span>Music</span></div>
+        <div class="games"><i class="fas fa-gamepad"></i><span>Games</span></div>
+      </div>
+    </div>
+  </div>
+</div>
+  `
+
+  ###OUTPUT:
+
+
+![FINAL 2](https://user-images.githubusercontent.com/123230416/227578598-e9f350b4-be7c-4e0d-870f-27631c15a15b.png)

From c0dc908234848f0fd177ca2b373ad4f96128b6cc Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:28:25 +0530
Subject: [PATCH 19/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index 52264d90..87c0d836 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -221,7 +221,7 @@ In SCSS, mixins allow you to create groups of CSS declarations that can be reuse
 
 
   # A SIMPLE RESUME USING HTML
- `
+ ````
   <div class="resume">
   <div class="base">
     <div class="profile">
@@ -323,8 +323,9 @@ In SCSS, mixins allow you to create groups of CSS declarations that can be reuse
     </div>
   </div>
 </div>
-  `
-
+ ````
+  
+  
   ###OUTPUT:
 
 

From e44c746be8f80a9d8c4fe825590e7f6c06db22c2 Mon Sep 17 00:00:00 2001
From: Meevel Francis <123230172+meevelfrancis06@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:43:00 +0530
Subject: [PATCH 20/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 127 +++++++++++++++++++++
 1 file changed, 127 insertions(+)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index 87c0d836..df0e4765 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -219,6 +219,133 @@ In SCSS, mixins allow you to create groups of CSS declarations that can be reuse
 
 `<title> Statements... </title>`
 
+  
+# CSS
+
+- CSS is the language we use to style an HTML document.
+
+- CSS describes how HTML elements should be displayed.
+
+- CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
+
+There are three ways of inserting a style sheet:
+
+-   External CSS
+-   Internal CSS
+-   Inline CSS
+
+## CSS Example
+
+body {  
+background-color: lightblue;  
+}h1 {  
+color: white;  
+text-align: center;  
+}p {  
+font-family: verdana;  
+font-size: 20px;  
+}
+
+# CSS PROPERTIES
+
+## CSS accent-color Property:
+
+The `accent-color` property specifies the accent color for user-interface controls like: `<input type="checkbox">, <input type="radio">, <input type="range"> and <progress>.`
+
+### Example
+
+Set the accent color for different user-interface controls:
+
+input[type=checkbox] {  
+accent-color: red;  
+}input[type=radio] {  
+accent-color: green;  
+}input[type=range] {  
+accent-color: rgb(0, 0, 255);  
+}progress {  
+accent-color: hsl(39, 100%, 50%);  
+}
+
+## CSS Syntax
+
+accent-color: auto|color|initial|inherit;
+
+## CSS align-content Property
+
+The `align-content` property specifies how flex lines are distributed along the cross axis in a flexbox container.
+
+### Example
+
+Pack lines toward the center of the flex container:
+
+div{  
+width: 70px;  
+height: 300px;  
+border: 1px solid #c3c3c3;  
+display: flex;  
+flex-wrap: wrap;  
+align-content: center;  
+}
+## CSS backdrop-filter Property
+
+The `backdrop-filter` property is used to apply a graphical effect to the area behind an element.
+
+### Example
+
+Add a graphical effect to the area behind an element:
+
+div.transbox {  
+background-color: rgba(255, 255, 255, 0.4);  
+-webkit-backdrop-filter: blur(5px);  
+backdrop-filter: blur(5px);  
+}
+
+
+## CSS Syntax
+
+backdrop-filter: none|filter|initial|inherit;
+
+
+## CSS border-block Property
+
+The border-block property is a shorthand property for these properties:
+
+-   border-block-width
+-   border-block-style
+-   border-block-color
+
+If values for color or width are omitted, default values will be used.
+
+The CSS border-block property is very similar to CSS property [border], but the border-block property is dependent on block direction.
+
+
+## CSS Syntax
+
+border-block: border-block-width border-block-style border-block-color |initial|inherit;
+
+## CSS border-top Property
+
+The `border-top` shorthand property sets all the top border properties in one declaration.
+
+The properties that can be set must be in the following order:
+
+-   border-top-width
+-   border-top-style
+-   border-top-color
+If border-top-color is omitted, the color applied will be the color of the text.
+
+
+### Example
+
+Set the style of the top border for different elements:
+
+h1 {  
+border-top: 5px solid red;  
+}h2 {  
+border-top: 4px dotted blue;  
+}div {  
+border-top: double;  
+}
 
   # A SIMPLE RESUME USING HTML
  ````

From c0f278624640de51081b23f3b05071dff6f7e922 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Sun, 26 Mar 2023 19:59:33 +0530
Subject: [PATCH 21/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index df0e4765..88fc8e24 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -453,7 +453,7 @@ border-top: double;
  ````
   
   
-  ###OUTPUT:
+  # OUTPUT:
 
 
 ![FINAL 2](https://user-images.githubusercontent.com/123230416/227578598-e9f350b4-be7c-4e0d-870f-27631c15a15b.png)

From b6c46a65e57a285ee3e92718e18de18334644f94 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Mon, 27 Mar 2023 19:57:45 +0530
Subject: [PATCH 22/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 369 +++++++++++----------
 1 file changed, 190 insertions(+), 179 deletions(-)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index 88fc8e24..cbb640c1 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -1,6 +1,8 @@
-#  INTRODUCTION TO HTML5!
+# INTRODUCTION TO HTML5!
 
-HTML stands for *Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web pages. **HTML 5* is the <u> fifth and current version of HTML.
+- HTML stands for **Hyper Text Markup Language**. 
+- It is used to design web pages using a markup language. Hypertext defines the link between the web pages.
+- **HTML 5** is the <u> fifth and current version of HTML.
 
 ## FEATURES:
 
@@ -41,7 +43,7 @@ HTML stands for *Hyper Text Markup Language. It is used to design web pages usin
 - Make every effort to be as transparent as you can.
   
   
-   # CSS3 Introduction
+   # INTRODUCTION TO CSS3!
 
 A document produced in any markup language can have its appearance, style, and format demonstrated using CSS, a language. It is used to organize and style the design of Web pages, to put it simply. The most recent version of CSS is CSS3, which replaced CSS2.
 Some of the key modules of CSS3 are:
@@ -95,7 +97,7 @@ This feature contains parameters for the column-count, column-gap, and column- w
   A Web Font is just a technique to use any font in your page, being downloaded instantly by the browser.This will be a radical departure from web design's prior use of just 10 to 15 generally accepted fonts. Yet, because only typefaces with valid licences should be used, this new function raises questions about copyright.
 
 
-    @font-face  {
+    @font-face    {
     font-family:  'Name of the new font';
     src:  url('https://designshack.net/fonts/font.ttf');
     }
@@ -108,55 +110,59 @@ This feature contains parameters for the column-count, column-gap, and column- w
 
 With CSS3, you can quickly apply resizing to any element to make it cross-browser compatible.
 
-    .ui_resizable  {
+    .ui_resizable        {
     padding:  20px;
     border:  1px  solid;
     resize:  both;
     overflow:  auto;
+  
     }
 
 
 
-#### Multiple Columns Using CSS3
+## Multiple Columns Using CSS3
 Although CSS2 already has the ability to set an element's outline, CSS3 adds the ability to offset the outline from the element by a value you specify. It varies from a boundary in two ways:
 
 Outlines don't occupy any columns.
 Not all outlines must be rectangular.
 Multi-column layout is a new module added to CSS3 that is suitably named. It lets you to select how many columns text should be divided down into and how they should appear.
 
-    .multiplecolumns  {
+    -multiplecolumns       {
     -moz-column-width:  130px;;
     -webkit-column-width:  130px;
     -moz-column-gap:  20px;
     -webkit-column-gap:  20px;
     -moz-column-rule:  1px  solid  #ddccb5;
     -webkit-column-rule:  1px  solid  #ddccb5;
+  
+     }
 
    ![enter image description here](https://designshack.net/postimages/multiplecolumns.png)
 
 
-### Spanning Columns
+## Spanning Columns
 
 span more than one column – a heading, table or image for instance.
 
-    enter code hereh2  {
+    enter code hereh2     {
     column-span:  all
     }
 ![enter image description here](https://designshack.net/postimages/multiplecolumns_heading.jpg)
   
-  #  INTRODUCTION TO LSS
+  #  INTRODUCTION TO LESS!
 - Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
 -   It was Designed by Alexis Sellier.
 
-- ESS is an abbreviated `Learner Style styles`, is an opensource pre-processor language for CSS, The preprocessor is writing a code using a superset of CSS features, compiling this code to native CSS, and browser understanding CSS styles.
+- LESS is an opensource pre-processor language for CSS, The preprocessor is writing a code using a superset of CSS features, compiling this code to native CSS, and browser understanding CSS styles.
 
-## FEATURES OF LSS
+## FEATURES OF LESS
 
 
 ### 1.Variables
 
 - Less allows variables to be defined. 
-- Variables in Less are defined with an [at sign]  (@). Variable programming is done with a Colon (:).
+- Variables in LESS are defined with an (@).
+- Variable programming is done with a (:).
 
 
 
@@ -193,34 +199,34 @@ SCSS also supports variables. Variables can be used to store values that will be
 In SCSS, mixins allow you to create groups of CSS declarations that can be reused throughout the stylesheet. This can be helpful when working with vendor prefixes, complex animations, and other code that might need to be used in multiple places
   
   # COMMONLY USED HTML TAGS
- *Document structure tag:*
+ **Document structure tag:**
 
-*1.HTML tag*: It is the root of the HTML document which is used to specify that the document is HTML.
+**1.HTML tag**: It is the root of the HTML document which is used to specify that the document is HTML.
 
-*Syntax:*
+**Syntax:**
 
 `<html> Statements... </html>`
 
-*2.Head tag:* The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.
+**2.Head tag:** The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.
 
-*Syntax:*
+**Syntax:**
 
 `<head> Statements... </head>`
 
-*3.Body tag:* It is used to define the body of an HTML document. It contains images, tables, lists, … etc.
+**3.Body tag:** It is used to define the body of an HTML document. It contains images, tables, lists, … etc.
 
-*Syntax:*
+**Syntax:**
 
 `<body> Statements... </body>`
 
-*4.Title tag:* It is used to define the title of an HTML document.
+**4.Title tag:** It is used to define the title of an HTML document.
 
-*Syntax:*
+**Syntax:**
 
 `<title> Statements... </title>`
 
   
-# CSS
+# INTRODUCTION TO CSS!
 
 - CSS is the language we use to style an HTML document.
 
@@ -236,74 +242,83 @@ There are three ways of inserting a style sheet:
 
 ## CSS Example
 
-body {  
-background-color: lightblue;  
-}h1 {  
-color: white;  
-text-align: center;  
-}p {  
-font-family: verdana;  
-font-size: 20px;  
-}
-
+      body  {  
+             background-color: lightblue;  
+            } h1   {  
+             color: white;  
+             text-align: center;  
+             }  p   {  
+             font-family: verdana;  
+             font-size: 20px;  
+        }
+       
+        
 # CSS PROPERTIES
 
 ## CSS accent-color Property:
 
-The `accent-color` property specifies the accent color for user-interface controls like: `<input type="checkbox">, <input type="radio">, <input type="range"> and <progress>.`
+The accent-color property specifies the accent color for user-interface controls like: `<input type="checkbox">`, `<input type="radio">`, `<input type="range">` and `<progress>`.
+
+ 
+## CSS Syntax
 
+accent-color: auto|color|initial|inherit;
+  
 ### Example
 
 Set the accent color for different user-interface controls:
 
-input[type=checkbox] {  
-accent-color: red;  
-}input[type=radio] {  
-accent-color: green;  
-}input[type=range] {  
-accent-color: rgb(0, 0, 255);  
-}progress {  
-accent-color: hsl(39, 100%, 50%);  
-}
-
-## CSS Syntax
+    input[type=checkbox]   {  
+    accent-color: red;  
+                           }
+    input[type=radio]      {  
+    accent-color: green;  
+                           }  
+    input[type=range]      {  
+    accent-color: rgb(0, 0, 255);  
+                           }  
+   
+    progress               {  
+    accent-color: hsl(39, 100%, 50%);  
+                            }
 
-accent-color: auto|color|initial|inherit;
 
 ## CSS align-content Property
 
-The `align-content` property specifies how flex lines are distributed along the cross axis in a flexbox container.
+The align-content property specifies how flex lines are distributed along the cross axis in a flexbox container.
 
 ### Example
 
 Pack lines toward the center of the flex container:
 
-div{  
-width: 70px;  
-height: 300px;  
-border: 1px solid #c3c3c3;  
-display: flex;  
-flex-wrap: wrap;  
-align-content: center;  
-}
+      div                   {  
+      width: 70px;  
+      height: 300px;  
+      border: 1px solid #c3c3c3;  
+      display: flex;  
+      flex-wrap: wrap;  
+      align-content: center;
+                      }
+  
+  
 ## CSS backdrop-filter Property
 
-The `backdrop-filter` property is used to apply a graphical effect to the area behind an element.
+The backdrop-filter property is used to apply a graphical effect to the area behind an element.
+  
 
+## CSS Syntax
+
+backdrop-filter: none|filter|initial|inherit;
+  
 ### Example
 
 Add a graphical effect to the area behind an element:
 
-div.transbox {  
-background-color: rgba(255, 255, 255, 0.4);  
--webkit-backdrop-filter: blur(5px);  
-backdrop-filter: blur(5px);  
-}
-
-
-## CSS Syntax
-
-backdrop-filter: none|filter|initial|inherit;
+     div.transbox                        {  
+     background-color: rgba(255, 255, 255, 0.4);  
+     -webkit-backdrop-filter: blur(5px);  
+     backdrop-filter: blur(5px);  
+                                         }
 
 
 ## CSS border-block Property
@@ -318,14 +333,13 @@ If values for color or width are omitted, default values will be used.
 
 The CSS border-block property is very similar to CSS property [border], but the border-block property is dependent on block direction.
 
-
 ## CSS Syntax
 
 border-block: border-block-width border-block-style border-block-color |initial|inherit;
 
 ## CSS border-top Property
 
-The `border-top` shorthand property sets all the top border properties in one declaration.
+The border-top shorthand property sets all the top border properties in one declaration.
 
 The properties that can be set must be in the following order:
 
@@ -339,121 +353,118 @@ If border-top-color is omitted, the color applied will be the color of the text.
 
 Set the style of the top border for different elements:
 
-h1 {  
-border-top: 5px solid red;  
-}h2 {  
-border-top: 4px dotted blue;  
-}div {  
-border-top: double;  
-}
+       h1                {  
+       border-top: 5px solid red;  
+       }  h2               {  
+       border-top: 4px dotted blue;  
+        }   div {  
+       border-top: double;  
+       }
 
-  # A SIMPLE RESUME USING HTML
- ````
-  <div class="resume">
-  <div class="base">
-    <div class="profile">
-      <div class="photo">
-        <!--<img src="" /> -->
-        <i class="fas fa-rocket"></i>
-      </div>
-      <div class="info">
-        <h1 class="name">JOHN</h1>
-        <h2 class="job">Frontend Web Designer</h2>
-      </div>
-    </div>
-    <div class="about">
-      <h3>About Me</h3>I'm a web designer for Fiserv, specializing in web design, graphic design, and UX. Experienced with the Adobe Creative Suite, responsive design, social media management, and prototyping.
-    </div>
-    <div class="contact">
-      <h3>Contact Me</h3>
-      <div class="call"><a href="tel:123-456-7890"><i class="fas fa-phone"></i><span>phoneno-123-456-7890</span></a></div>
-      <div class="address"><a href="https://goo.gl/maps/fiTBGT6Vnhy"><i class="fas fa-map-marker"></i><span>address-canada</span></a>
-      </div>
-     
-      <div class="website"><a href="http://abc.com/" target="_blank"> <i class="fas fa-home"></i><span>website-abc.com</span></a></div>
-    </div>
-    <div class="follow">
-      <h3>Follow Me</h3>
-      <div class="box">
-        <a href="https://www.facebook.com/astronaomical/" target="_blank"><i class="fab fa-facebook"></i></a>
-        <a href="https://www.instagram.com/astronaomical/" target="_blank"><i class="fab fa-instagram "></i></a>
-        <a href="https://www.pinterest.com/astronaomical/" target="_blank"><i class="fab fa-pinterest"></i></a>
-        <a href="https://www.linkedin.com/in/naomi-weatherford-758385112/" target="_blank"><i class="fab fa-linkedin"></i></a>
-        <a href="https://codepen.io/astronaomical/" target="_blank"><i class="fab fa-codepen"></i></a>
-        <a href="https://www.behance.net/astronaomical" target="_blank"><i class="fab fa-behance"></i></a>
-      </div>
-    </div>
-  </div>
-  <div class="func">
-    <div class="work">
-      <h3><i class="fa fa-briefcase"></i>Experience</h3>
-      <ul>
-        <li><span>Technical Consultant -<br>Web Design,</span><small></small><small>   mar 2023 - Now</small></li>
-        <li><span>Web Designer,</span><small></small><small>  Jan 2018 - Apr 2018</small></li>
-        <li><span>Intern - Web Design,</span><small></small><small>  Aug 2017 - Dec 2017</small></li>
-      </ul>
-    </div>
-    <div class="edu">
-      <h3><i class="fa fa-graduation-cap"></i>Education</h3>
-      <ul>
-        <li><span>Bachelor of Science<br>Web Design and Development</span><small>,ABC university,</small><small>Jan. 2016 - Apr. 2018</small></li>
-        <li><span>Computer Science</span><small> ,Edward Community College,</small><small>Sept. 2014 - Dec. 2015</small></li>
-        <li><span>High School</span><small> ,M. Jackson High School,</small><small>Jan. 2013 - Jun. 2015</small></li>
-      </ul>
-    </div>
-    <div class="skills-prog">
-      <h3><i class="fas fa-code"></i>Programming Skills</h3>
-      <ul>
-        
-        <li data-percent="90"><span>CSS3 & SCSS</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="60"><span>JavaScript</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="50"><span>jQuery</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="40"><span>JSON</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="55"><span>PHP</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-        <li data-percent="40"><span>MySQL</span>
-          <div class="skills-bar">
-            <div class="bar"></div>
-          </div>
-        </li>
-      </ul>
-    </div>
-    
-    <div class="interests">
-      <h3><i class="fas fa-star"></i>Interests</h3>
-      <div class="interests-items">
-        <div class="art"><i class="fas fa-palette"></i><span>Art</span></div>
-        <div class="art"><i class="fas fa-book"></i><span>Books</span></div>
-        <div class="movies"><i class="fas fa-film"></i><span>Movies</span></div>
-        <div class="music"><i class="fas fa-headphones"></i><span>Music</span></div>
-        <div class="games"><i class="fas fa-gamepad"></i><span>Games</span></div>
-      </div>
-    </div>
-  </div>
-</div>
+  # A SIMPLE RESUME USING HTML AND CSS
+  HTML CODE:
  ````
+  <!DOCTYPE html>
+<html>
+<head>
+	<title>Resume</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+	<header>
+		<h1>John Doe</h1>
+		<p>Web Developer</p>
+	</header>
+
+	<section>
+		<h2>Skills</h2>
+		<ul>
+			<li>HTML</li>
+			<li>CSS</li>
+			<li>JavaScript</li>
+			<li>PHP</li>
+		</ul>
+	</section>
+
+	<section>
+		<h2>Experience</h2>
+		<h3>Web Developer, XYZ Company</h3>
+		<p>June 2020 - Present</p>
+		<ul>
+			<li>Developed and maintained company website</li>
+			<li>Collaborated with team members to design and implement new features</li>
+			<li>Improved website performance by optimizing code</li>
+		</ul>
+	</section>
+
+	<section>
+		<h2>Education</h2>
+		<h3>Bachelor's Degree in Computer Science</h3>
+		<p>University of ABC, May 2020</p>
+	</section>
+</body>
+</html>
   
+   ````
   
+  CSS CODE: 
+ ```
+  header {
+	text-align: center;
+	margin-bottom: 20px;
+       color : #008080
+}
+
+h1 {
+	font-size: 36px;
+	margin: 0;
+      color : #008080
+}
+
+p {
+	font-size: 24px;
+	margin: 0;
+      color : #fa8072;
+}
+
+ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+      color : #fa8072;
+}
+
+li {
+	margin-bottom: 5px;
+}
+
+section {
+	margin-bottom: 30px;
+}
+
+h2 {
+	font-size: 24px;
+	margin-bottom: 10px;
+      color : #008080
+}
+
+h3 {
+	font-size: 18px;
+	margin-bottom: 5px;
+      color : #008080
+}     
+
+p {
+	margin: 0;
+      color : #fa8072;
+}
+
+    body {background-color: #e3dac9;}
+  
+  ```
   # OUTPUT:
+  
+
 
+![ops](https://user-images.githubusercontent.com/123230416/227962532-fa8eaf75-42eb-4580-a526-ae62f3a273be.png)
 
-![FINAL 2](https://user-images.githubusercontent.com/123230416/227578598-e9f350b4-be7c-4e0d-870f-27631c15a15b.png)

From 2a65103a13a8a402f0a374dee2116a92c263de78 Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Mon, 27 Mar 2023 20:14:19 +0530
Subject: [PATCH 23/25] Update README.md

---
 learning/dashboard/BuildingBlock/README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index cbb640c1..c6aa36b1 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -110,7 +110,7 @@ This feature contains parameters for the column-count, column-gap, and column- w
 
 With CSS3, you can quickly apply resizing to any element to make it cross-browser compatible.
 
-    .ui_resizable        {
+    .ui_resizable    {
     padding:  20px;
     border:  1px  solid;
     resize:  both;
@@ -291,14 +291,14 @@ The align-content property specifies how flex lines are distributed along the cr
 
 Pack lines toward the center of the flex container:
 
-      div                   {  
+      div          {  
       width: 70px;  
       height: 300px;  
       border: 1px solid #c3c3c3;  
       display: flex;  
       flex-wrap: wrap;  
       align-content: center;
-                      }
+                   }
   
   
 ## CSS backdrop-filter Property
@@ -314,11 +314,11 @@ backdrop-filter: none|filter|initial|inherit;
 
 Add a graphical effect to the area behind an element:
 
-     div.transbox                        {  
+     div.transbox   {  
      background-color: rgba(255, 255, 255, 0.4);  
      -webkit-backdrop-filter: blur(5px);  
      backdrop-filter: blur(5px);  
-                                         }
+                     }
 
 
 ## CSS border-block Property
@@ -353,9 +353,9 @@ If border-top-color is omitted, the color applied will be the color of the text.
 
 Set the style of the top border for different elements:
 
-       h1                {  
+       h1      {  
        border-top: 5px solid red;  
-       }  h2               {  
+       }  h2       {  
        border-top: 4px dotted blue;  
         }   div {  
        border-top: double;  

From 88bbbc869d8097d33dd156afdf1fb5b48892bafc Mon Sep 17 00:00:00 2001
From: Beulah <123230416+0506beulah@users.noreply.github.com>
Date: Thu, 30 Mar 2023 13:33:32 +0530
Subject: [PATCH 24/25] UPDATED THE ISSUES

---
 learning/dashboard/BuildingBlock/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/BuildingBlock/README.md
index c6aa36b1..1173f242 100644
--- a/learning/dashboard/BuildingBlock/README.md
+++ b/learning/dashboard/BuildingBlock/README.md
@@ -150,7 +150,7 @@ span more than one column – a heading, table or image for instance.
 ![enter image description here](https://designshack.net/postimages/multiplecolumns_heading.jpg)
   
   #  INTRODUCTION TO LESS!
-- Less (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
+- LESS (Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
 -   It was Designed by Alexis Sellier.
 
 - LESS is an opensource pre-processor language for CSS, The preprocessor is writing a code using a superset of CSS features, compiling this code to native CSS, and browser understanding CSS styles.
@@ -160,7 +160,7 @@ span more than one column – a heading, table or image for instance.
 
 ### 1.Variables
 
-- Less allows variables to be defined. 
+- LESS allows variables to be defined. 
 - Variables in LESS are defined with an (@).
 - Variable programming is done with a (:).
 
@@ -175,7 +175,7 @@ span more than one column – a heading, table or image for instance.
 
 ### 3.Functions and operations
 
-- Less allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. 
+- LESS allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. 
 - Functions map one-to-one with JavaScript code, allowing manipulation of values.
 
 # SCSS

From 1a27acb54f098ef26e55863eafe699d370de2f3f Mon Sep 17 00:00:00 2001
From: Anvith KS <anvith3@gmail.com>
Date: Tue, 4 Apr 2023 07:50:01 +0530
Subject: [PATCH 25/25] Updated the sub-dir name.

---
 learning/dashboard/{BuildingBlock => html5-css3}/README.md | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename learning/dashboard/{BuildingBlock => html5-css3}/README.md (100%)

diff --git a/learning/dashboard/BuildingBlock/README.md b/learning/dashboard/html5-css3/README.md
similarity index 100%
rename from learning/dashboard/BuildingBlock/README.md
rename to learning/dashboard/html5-css3/README.md
