From aa0d0c5f38c5026dbadb9115006b83b5e082f88f Mon Sep 17 00:00:00 2001
From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com>
Date: Thu, 6 Jun 2024 08:55:53 +0530
Subject: [PATCH 1/3] Create Layout-ResponsiveDesign.md

---
 .../CSS/css-basics/Layout-ResponsiveDesign.md | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 docs/CSS/css-basics/Layout-ResponsiveDesign.md

diff --git a/docs/CSS/css-basics/Layout-ResponsiveDesign.md b/docs/CSS/css-basics/Layout-ResponsiveDesign.md
new file mode 100644
index 000000000..2ebe6694f
--- /dev/null
+++ b/docs/CSS/css-basics/Layout-ResponsiveDesign.md
@@ -0,0 +1,97 @@
+# Layout in CSS 
+
+
+1. *Box Model:* The CSS box model describes the rectangular boxes that are generated for elements in the document tree. Each box consists of content, padding, border, and margin areas. The width and height of an element are calculated by adding together the content width/height, padding, and border.
+2. *Positioning:* CSS positioning allows you to control the position of elements on a web page. There are different types of positioning:
+
+   - `static`: This is the default positioning. Elements are positioned according to the normal flow of the document.
+   - `relative`: Elements are positioned relative to their normal position in the document flow.
+   - `absolute`: Elements are positioned relative to their nearest positioned ancestor, or the containing block.
+   - `fixed`: Elements are positioned relative to the viewport, so they remain in the same position even when the page is scrolled.
+   - `sticky`: Elements are positioned relative to the viewport like fixed positioning, but they behave like relative positioning until they reach a specified scroll position.
+```css
+.relative {
+    position: relative;
+    top: 20px;
+    left: 30px;
+}
+
+.absolute {
+    position: absolute;
+    top: 50px;
+    left: 100px;
+}
+```
+3. *Floats:* Floats are a CSS property that allows an element to be taken out of the normal flow and placed along the left or right side of its container. Other content will wrap around the floated element.
+```css
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+```
+4. *Flexbox:* Flexbox is a one-dimensional layout model that provides an efficient way to distribute space among items in a container and align them in multiple ways. It allows you to create flexible and responsive layouts without relying on floats or positioning hacks.
+
+  ![FlexBox](https://tse1.mm.bing.net/th?id=OIP.nypYMSbR475MUZ0KMDO6kQHaD4&pid=Api&P=0&h=180)
+
+```css
+.flex-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.flex-item {
+    flex: 1;
+}
+```
+
+5. *Grid:* CSS Grid Layout is a two-dimensional layout system that allows you to create grid-based layouts with rows and columns. It provides precise control over the placement and sizing of elements within the grid container.
+
+   <img src="https://www.freecodecamp.org/news/content/images/2022/05/CSS-GRID-3.png" alt="Grid" height="500px" width="540px"/>
+
+```css
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    grid-gap: 10px;
+}
+
+.grid-item {
+    background-color: lightblue;
+    padding: 20px;
+}
+```
+The `fr` unit, short for "fraction", is a flexible unit in CSS Grid Layout. It allows you to distribute available space among grid tracks (columns and rows) based on a proportion of the available space in the grid container.
+
+
+# Responsive design 
+
+Responsive design is an approach to web design aimed at creating web pages that provide an optimal viewing experience across a wide range of devices, from desktop computers to smartphones and tablets. The primary goal of responsive design is to ensure that websites adapt fluidly to different screen sizes, resolutions, and orientations, providing users with a consistent and user-friendly experience regardless of the device they're using.
+
+
+**Media Queries:** Media queries are CSS rules that allow you to apply different styles based on various characteristics of the user's device, such as screen width, height, orientation, and resolution. By using media queries, you can create layouts that adjust dynamically to different device sizes and configurations.
+
+```css
+/* Styles for screens smaller than 768px */
+@media (max-width: 767px) {
+    .navigation {
+        display: none; /* Hide navigation menu on small screens */
+    }
+}
+
+/* Styles for screens between 768px and 991px */
+@media (min-width: 768px) and (max-width: 991px) {
+    .sidebar {
+        display: none; /* Hide sidebar on medium screens */
+    }
+}
+
+/* Styles for screens larger than 1200px */
+@media (min-width: 1200px) {
+    .footer {
+        width: 100%; /* Expand footer to full width on large screens */
+    }
+}
+```

From 23335d2f9b45cc5de40819db23bee7cd857d40ee Mon Sep 17 00:00:00 2001
From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com>
Date: Thu, 6 Jun 2024 10:49:22 +0530
Subject: [PATCH 2/3] Update Layout-ResponsiveDesign.md

---
 .../CSS/css-basics/Layout-ResponsiveDesign.md | 65 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/docs/CSS/css-basics/Layout-ResponsiveDesign.md b/docs/CSS/css-basics/Layout-ResponsiveDesign.md
index 2ebe6694f..494a566d5 100644
--- a/docs/CSS/css-basics/Layout-ResponsiveDesign.md
+++ b/docs/CSS/css-basics/Layout-ResponsiveDesign.md
@@ -1,7 +1,22 @@
-# Layout in CSS 
-
+---
+id: Basics-CSS
+title: Layouts and Responsive Design using CSS
+sidebar_label: Layouts and Responsive Design using CSS
+sidebar_position: 1
+tags: [html, introduction, web development, markup language, hyper text, web pages, career opportunities, personal growth, web-development, web design, web pages, websites, career opportunities, contribute to the web, stay relevant, express yourself, learn other technologies, have fun, how to use html, steps to start using html, set up your development environment, create your first html document, learn html syntax and structure, explore html elements and-attributes]
+description: In this tutorial you will learn about layouts in CSS and also responsive design 
+---
 
 1. *Box Model:* The CSS box model describes the rectangular boxes that are generated for elements in the document tree. Each box consists of content, padding, border, and margin areas. The width and height of an element are calculated by adding together the content width/height, padding, and border.
+
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+    <div class="box-model-example" style="width: 200px; height: 100px; padding: 20px; border: 1px solid black; margin: 10px;">
+        This is a div element with a box model
+    </div>
+</BrowserWindow>
+
+
 2. *Positioning:* CSS positioning allows you to control the position of elements on a web page. There are different types of positioning:
 
    - `static`: This is the default positioning. Elements are positioned according to the normal flow of the document.
@@ -9,6 +24,18 @@
    - `absolute`: Elements are positioned relative to their nearest positioned ancestor, or the containing block.
    - `fixed`: Elements are positioned relative to the viewport, so they remain in the same position even when the page is scrolled.
    - `sticky`: Elements are positioned relative to the viewport like fixed positioning, but they behave like relative positioning until they reach a specified scroll position.
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<div class="relative" style="position: relative;
+  top: 20px;
+  left: 30px;">Relative positioning</div>
+<div class="absolute" style="position: absolute;
+  top: 50px;
+  left: 100px;">Absolute positioning</div>
+</BrowserWindow>
+
+
+   
 ```css
 .relative {
     position: relative;
@@ -22,7 +49,15 @@
     left: 100px;
 }
 ```
+
+
 3. *Floats:* Floats are a CSS property that allows an element to be taken out of the normal flow and placed along the left or right side of its container. Other content will wrap around the floated element.
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+   <div class="float-left" style="float: left;">Float left</div>
+<div class="float-right" style="float: right;">Float right</div>
+</BrowserWindow>
+
 ```css
 .float-left {
     float: left;
@@ -32,10 +67,20 @@
     float: right;
 }
 ```
+
 4. *Flexbox:* Flexbox is a one-dimensional layout model that provides an efficient way to distribute space among items in a container and align them in multiple ways. It allows you to create flexible and responsive layouts without relying on floats or positioning hacks.
 
   ![FlexBox](https://tse1.mm.bing.net/th?id=OIP.nypYMSbR475MUZ0KMDO6kQHaD4&pid=Api&P=0&h=180)
 
+  
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<div class="flex-container" style=" display: flex; justify-content: space-between;">
+  <div class="flex-item" style="flex: 1;">Flex item 1</div>
+  <div class="flex-item" style="flex: 1;">Flex item 2</div>
+  <div class="flex-item" style="flex: 1;">Flex item 3</div>
+</div>
+</BrowserWindow>
+
 ```css
 .flex-container {
     display: flex;
@@ -51,6 +96,14 @@
 
    <img src="https://www.freecodecamp.org/news/content/images/2022/05/CSS-GRID-3.png" alt="Grid" height="500px" width="540px"/>
 
+<BrowserWindow url="http://127.0.0.1:5500/index.html"><div class="grid-container" style="display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 10px;">
+  <div class="grid-item" style="background-color: lightblue; padding: 20px;">Grid item 1</div>
+  <div class="grid-item" style="background-color: lightblue; padding: 20px;">Grid item 2</div>
+  <div class="grid-item" style="background-color: lightblue; padding: 20px;">Grid item 3</div>
+</div></BrowserWindow>
+
+
+
 ```css
 .grid-container {
     display: grid;
@@ -63,6 +116,7 @@
     padding: 20px;
 }
 ```
+
 The `fr` unit, short for "fraction", is a flexible unit in CSS Grid Layout. It allows you to distribute available space among grid tracks (columns and rows) based on a proportion of the available space in the grid container.
 
 
@@ -73,6 +127,13 @@ Responsive design is an approach to web design aimed at creating web pages that
 
 **Media Queries:** Media queries are CSS rules that allow you to apply different styles based on various characteristics of the user's device, such as screen width, height, orientation, and resolution. By using media queries, you can create layouts that adjust dynamically to different device sizes and configurations.
 
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+<div class="navigation" style="@media (max-width: 767px) {display: none;}">DIV</div>
+<div class="sidebar" style="@media (min-width: 768px) and (max-width: 991px) {display: none;}">SIDE</div>
+<div class="footer" style="@media (min-width: 1200px) { width : 100%;}">FOOTER</div>
+</BrowerWindow>
+
+
 ```css
 /* Styles for screens smaller than 768px */
 @media (max-width: 767px) {

From ecea20fc7762c5171fa5dda05ec44c9149014f59 Mon Sep 17 00:00:00 2001
From: Ajay Dhangar <99037494+Ajay-Dhangar@users.noreply.github.com>
Date: Thu, 6 Jun 2024 13:24:33 +0530
Subject: [PATCH 3/3] Update Layout-ResponsiveDesign.md

---
 .../CSS/css-basics/Layout-ResponsiveDesign.md | 58 +++++++++++--------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/docs/CSS/css-basics/Layout-ResponsiveDesign.md b/docs/CSS/css-basics/Layout-ResponsiveDesign.md
index 494a566d5..0ba98f43a 100644
--- a/docs/CSS/css-basics/Layout-ResponsiveDesign.md
+++ b/docs/CSS/css-basics/Layout-ResponsiveDesign.md
@@ -1,5 +1,5 @@
 ---
-id: Basics-CSS
+id: layout-responsive-design
 title: Layouts and Responsive Design using CSS
 sidebar_label: Layouts and Responsive Design using CSS
 sidebar_position: 1
@@ -11,7 +11,7 @@ description: In this tutorial you will learn about layouts in CSS and also respo
 
 
 <BrowserWindow url="http://127.0.0.1:5500/index.html">
-    <div class="box-model-example" style="width: 200px; height: 100px; padding: 20px; border: 1px solid black; margin: 10px;">
+    <div style={{width: "200px", height: "100px", padding: "20px", border: "1px solid black", margin: "10px"}}>
         This is a div element with a box model
     </div>
 </BrowserWindow>
@@ -26,12 +26,24 @@ description: In this tutorial you will learn about layouts in CSS and also respo
    - `sticky`: Elements are positioned relative to the viewport like fixed positioning, but they behave like relative positioning until they reach a specified scroll position.
 
 <BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div class="relative" style="position: relative;
-  top: 20px;
-  left: 30px;">Relative positioning</div>
-<div class="absolute" style="position: absolute;
-  top: 50px;
-  left: 100px;">Absolute positioning</div>
+      <div
+        style={{
+          position: 'relative',
+          top: '20px',
+          left: '30px',
+        }}
+      >
+        Relative positioning
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          top: '50px',
+          left: '100px',
+        }}
+      >
+        Absolute positioning
+      </div>
 </BrowserWindow>
 
 
@@ -54,8 +66,8 @@ description: In this tutorial you will learn about layouts in CSS and also respo
 3. *Floats:* Floats are a CSS property that allows an element to be taken out of the normal flow and placed along the left or right side of its container. Other content will wrap around the floated element.
 
 <BrowserWindow url="http://127.0.0.1:5500/index.html">
-   <div class="float-left" style="float: left;">Float left</div>
-<div class="float-right" style="float: right;">Float right</div>
+    <div style={{float: 'left'}}>Float left</div>
+    <div style={{float: 'right'}}>Float right</div>
 </BrowserWindow>
 
 ```css
@@ -74,10 +86,10 @@ description: In this tutorial you will learn about layouts in CSS and also respo
 
   
 <BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div class="flex-container" style=" display: flex; justify-content: space-between;">
-  <div class="flex-item" style="flex: 1;">Flex item 1</div>
-  <div class="flex-item" style="flex: 1;">Flex item 2</div>
-  <div class="flex-item" style="flex: 1;">Flex item 3</div>
+<div style={{display: 'flex', justifyContent: 'space-between'}}>
+  <div style={{flex: '1'}}>Flex item 1</div>
+  <div style={{flex: '1'}}>Flex item 2</div>
+  <div style={{flex: '1'}}>Flex item 3</div>
 </div>
 </BrowserWindow>
 
@@ -96,11 +108,13 @@ description: In this tutorial you will learn about layouts in CSS and also respo
 
    <img src="https://www.freecodecamp.org/news/content/images/2022/05/CSS-GRID-3.png" alt="Grid" height="500px" width="540px"/>
 
-<BrowserWindow url="http://127.0.0.1:5500/index.html"><div class="grid-container" style="display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 10px;">
-  <div class="grid-item" style="background-color: lightblue; padding: 20px;">Grid item 1</div>
-  <div class="grid-item" style="background-color: lightblue; padding: 20px;">Grid item 2</div>
-  <div class="grid-item" style="background-color: lightblue; padding: 20px;">Grid item 3</div>
-</div></BrowserWindow>
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+ <div style={{display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', gridGap: '10px'}}>
+  <div style={{backgroundColor: 'lightblue', padding: '20px'}}>Grid item 1</div>
+  <div style={{backgroundColor: 'lightblue', padding: '20px'}}>Grid item 2</div>
+  <div style={{backgroundColor: 'lightblue', padding: '20px'}}>Grid item 3</div>
+ </div>
+</BrowserWindow>
 
 
 
@@ -127,12 +141,6 @@ Responsive design is an approach to web design aimed at creating web pages that
 
 **Media Queries:** Media queries are CSS rules that allow you to apply different styles based on various characteristics of the user's device, such as screen width, height, orientation, and resolution. By using media queries, you can create layouts that adjust dynamically to different device sizes and configurations.
 
-<BrowserWindow url="http://127.0.0.1:5500/index.html">
-<div class="navigation" style="@media (max-width: 767px) {display: none;}">DIV</div>
-<div class="sidebar" style="@media (min-width: 768px) and (max-width: 991px) {display: none;}">SIDE</div>
-<div class="footer" style="@media (min-width: 1200px) { width : 100%;}">FOOTER</div>
-</BrowerWindow>
-
 
 ```css
 /* Styles for screens smaller than 768px */