codeharborhub · ajay-dhangar · May 18, 2024 · May 18, 2024 · May 18, 2024
@@ -5,4 +5,255 @@ sidebar_label: Flexbox and Grid Layout
 sidebar_position: 3
 tags: [html, web-development, flexbox, grid-layout]
 description: In this tutorial, you will learn how to use Flexbox and Grid Layout to create responsive web designs and build complex layouts in HTML and CSS.
----
+---
+
+In this tutorial, you will learn how to use Flexbox and Grid Layout to create responsive web designs and build complex layouts in HTML and CSS.
+<br></br>
+
+![Local Image](https://ishadeed.com/assets/grid-flex/grid-vs-flexbox.png)
+
+## What is Flexbox?
+Flexbox, or the Flexible Box Layout, is a layout model that allows items within a container to be automatically arranged depending on the available space.
+
+### Basic Syntax
+Here is the basic syntax of a Flexbox container:
+
+```css
+.container {
+  display: flex;
+  flex-direction: row; /* or column */
+}
+```
+
+### Example
+Let's look at a simple example where we create a flexible layout:
+
+<Tabs>
+    <TabItem value="Code">
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flexbox Example</title>
+  <style>
+    .container {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 100vh;
+    }
+    .box {
+      width: 100px;
+      height: 100px;
+      background-color: lightblue;
+      text-align: center;
+      line-height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="box">Box 1</div>
+    <div class="box">Box 2</div>
+    <div class="box">Box 3</div>
+  </div>
+</body>
+</html>
+```
+    </TabItem>
+    <TabItem value="Output">
+        <BrowserWindow>
+            ![banner](flexbox.png)
+        </BrowserWindow>
+    </TabItem>
+</Tabs>
+
+
+## What is Grid Layout?
+Grid is a blueprint for making websites.
+
+The Grid model allows you to layout the content of your website. Not only that, it helps you create the structures you need for building responsive websites for multiple devices. This means your site will look good on desktop, mobile, and tablet.
+
+Grid Layout is a two-dimensional layout system for the web. It allows you to create complex layouts using rows and columns.
+
+### Basic Syntax
+Here is the basic syntax of a Grid container:
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto;
+}
+```
+
+### Example
+Let's look at a simple example where we create a grid layout:
+<Tabs>
+    <TabItem value="Code">
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Grid Layout Example</title>
+    <style>
+        .container {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 10px;
+        }
+        .box {
+          background-color: lightgreen;
+          text-align: center;
+          padding: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="box">Box 1</div>
+        <div class="box">Box 2</div>
+        <div class="box">Box 3</div>
+        <div class="box">Box 4</div>
+        <div class="box">Box 5</div>
+        <div class="box">Box 6</div>
+    </div>
+</body>
+
+</html>
+```
+    </TabItem>
+    <TabItem value="Output">
+        <BrowserWindow>
+            ![banner](grid.png)
+        </BrowserWindow>
+    </TabItem>
+</Tabs>
+
+## Practical Example
+Let's create a practical example where we use both Flexbox and Grid Layout to adjust the layout of a simple webpage based on different screen sizes:
+
+<Tabs>
+    <TabItem value="Flexbox">
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Responsive Flexbox Layout</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px;
+    }
+    .box {
+      width: 100%;
+      padding: 20px;
+      margin: 10px 0;
+      background-color: lightgray;
+      text-align: center;
+    }
+    @media (min-width: 600px) {
+      .container {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+      }
+      .box {
+        width: 45%;
+      }
+    }
+    @media (min-width: 900px) {
+      .box {
+        width: 30%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="box">Box 1</div>
+    <div class="box">Box 2</div>
+    <div class="box">Box 3</div>
+  </div>
+</body>
+</html>
+```
+    </TabItem>
+    <TabItem value="Grid">
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Responsive Grid Layout</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+    .container {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 10px;
+      padding: 20px;
+    }
+    .box {
+      background-color: lightgray;
+      text-align: center;
+      padding: 20px;
+    }
+    @media (min-width: 600px) {
+      .container {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    @media (min-width: 900px) {
+      .container {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="box">Box 1</div>
+    <div class="box">Box 2</div>
+    <div class="box">Box 3</div>
+    <div class="box">Box 4</div>
+    <div class="box">Box 5</div>
+    <div class="box">Box 6</div>
+  </div>
+</body>
+</html>
+```
+    </TabItem>
+    <TabItem value="Output">
+    <BrowserWindow>
+    ![banner](output.png)
+    </BrowserWindow>
+    </TabItem>
+</Tabs>
+
+# Resources
+ - [Fkexbox cheatsheet](https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png)
+ - [Grid cheatsheet](https://css-tricks.com/wp-content/uploads/2022/02/css-grid-poster.png)
+
+## Conclusion
+Flexbox and Grid Layout are essential tools in creating responsive web designs. By understanding and utilizing these techniques, you can ensure that your web pages provide an optimal viewing experience across a wide range of devices and screen sizes. Experiment with different layout properties and combinations to see what works best for your specific design needs.
@@ -5,4 +5,118 @@ sidebar_label: Introduction to Responsive Design
 sidebar_position: 1
 tags: [html, web-development, responsive-web-design]
 description: In this tutorial, you will learn the basics of responsive web design and how to create responsive websites that work on all devices.
----
+---
+
+Responsive Web Design (RWD) is an approach to web development that ensures web pages render well on a variety of devices and window or screen sizes. This is achieved through the use of flexible layouts, flexible images, and CSS media queries.
+
+A responsive web design will automatically adjust for different screen sizes and viewports.
+
+Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
+
+![banner](https://www.infront.com/wp-content/uploads/2019/10/responsive-websites-700-1.jpg)
+
+## Setting The Viewport
+To create a responsive website, add the following `<meta>` tag to all your web pages:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
+This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
+
+Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
+
+<Tabs>
+    <TabItem value="Without Viewport">
+        <BrowserWindow>
+            <html>
+            <center>
+            <img src="https://www.w3schools.com/css/img_viewport1.png"></img>
+            </center>
+            </html>
+        </BrowserWindow>
+    </TabItem>
+    <TabItem value="With Viewport">
+        <BrowserWindow>
+            <html>
+            <center>
+            <img src="https://www.w3schools.com/css/img_viewport2.png"></img>
+            </center>
+            </html>
+        </BrowserWindow>
+    </TabItem>
+</Tabs>
+
+## Flexible Layouts
+
+Flexible layouts use relative length units, such as percentages, rather than fixed units like pixels. This allows the layout to adapt to the size of the viewport.
+
+```html
+<div style="width: 50%;">
+  This div will take up 50% of the width of its container.
+</div>
+```
+
+## Flexible Images
+
+Flexible images are also sized in relative units to prevent them from displaying outside their containing element.
+
+```html
+<img src="path/to/your-image.jpg" style="max-width: 100%;" alt="Responsive Image">
+```
+
+## Media Queries
+
+Media queries are a key component of responsive design. They allow you to apply different styles based on the characteristics of the device, such as its width, height, or orientation.
+
+```css
+@media (max-width: 600px) {
+  .responsive-class {
+    font-size: 14px;
+  }
+}
+```
+
+## Browser Support
+
+The numbers in the table specify the first browser version that fully supports the feature.
+
+<table class="browserref notranslate">
+  <tbody>
+    <tr>
+      <th>Feature</th>
+      <th>Chrome</th>
+      <th>Edge</th>
+      <th>Firefox</th>
+      <th>Safari</th>
+      <th>Opera</th>
+    </tr>
+    <tr>
+      <td>Flexible Layouts</td>
+      <td>1.0</td>
+      <td>12.0</td>
+      <td>1.0</td>
+      <td>3.1</td>
+      <td>7.0</td>
+    </tr>
+    <tr>
+      <td>Flexible Images</td>
+      <td>1.0</td>
+      <td>12.0</td>
+      <td>1.0</td>
+      <td>3.1</td>
+      <td>7.0</td>
+    </tr>
+    <tr>
+      <td>Media Queries</td>
+      <td>21.0</td>
+      <td>12.0</td>
+      <td>3.5</td>
+      <td>4.0</td>
+      <td>12.1</td>
+    </tr>
+  </tbody>
+</table>
+
+## Conclusion
+
+Responsive Web Design is essential for creating web pages that provide a good user experience across a wide range of devices. By using flexible layouts, flexible images, and media queries, you can ensure your web pages look great no matter the screen size. Always test your designs on multiple devices to ensure compatibility and usability.