From a0235e1e41b87f0497e8b3bc5064e0289c6afc3f Mon Sep 17 00:00:00 2001 From: Tirth chokshi Date: Sat, 18 May 2024 12:30:16 +0530 Subject: [PATCH] added Responsive Web Design --- docs/html/responsive-web-design/blue.png | Bin 0 -> 2133 bytes .../flexbox-and-grid-layout.md | 253 +++++++++++++++++- docs/html/responsive-web-design/flexbox.png | Bin 0 -> 7135 bytes docs/html/responsive-web-design/green.png | Bin 0 -> 2192 bytes docs/html/responsive-web-design/grid.png | Bin 0 -> 11908 bytes .../introduction-to-responsive-design.md | 116 +++++++- .../media-queries-and-breakpoints.md | 228 +++++++++++++++- docs/html/responsive-web-design/output.png | Bin 0 -> 12469 bytes docs/html/responsive-web-design/white.png | Bin 0 -> 2721 bytes 9 files changed, 594 insertions(+), 3 deletions(-) create mode 100644 docs/html/responsive-web-design/blue.png create mode 100644 docs/html/responsive-web-design/flexbox.png create mode 100644 docs/html/responsive-web-design/green.png create mode 100644 docs/html/responsive-web-design/grid.png create mode 100644 docs/html/responsive-web-design/output.png create mode 100644 docs/html/responsive-web-design/white.png diff --git a/docs/html/responsive-web-design/blue.png b/docs/html/responsive-web-design/blue.png new file mode 100644 index 0000000000000000000000000000000000000000..c82c2ff97fbed047491614472ccf39874952cadc GIT binary patch literal 2133 zcmeAS@N?(olHy`uVBq!ia0y~yVB!E`Mh-Thh|XvC)j*1|ILO_JVcj{Imp~3nx}&cn z1H;CC?mvmFKt5-IM`SSr1K(i~W;~w1B87p0{gtPSV@O5Z+iQ-z4Gsba4zT_Y`_Rmk zQy}levDM)7%GSK&m3NsLK5VpSWvGy3VNl>bP0l+XkK_2Mi! literal 0 HcmV?d00001 diff --git a/docs/html/responsive-web-design/flexbox-and-grid-layout.md b/docs/html/responsive-web-design/flexbox-and-grid-layout.md index e711a707e..2ca05775e 100644 --- a/docs/html/responsive-web-design/flexbox-and-grid-layout.md +++ b/docs/html/responsive-web-design/flexbox-and-grid-layout.md @@ -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. ---- \ No newline at end of file +--- + +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. +

+ +![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: + + + +```html + + + + + + Flexbox Example + + + +
+
Box 1
+
Box 2
+
Box 3
+
+ + +``` + + + + ![banner](flexbox.png) + + + + + +## 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: + + +```html + + + + + + + Grid Layout Example + + + + +
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
+ + + +``` + + + + ![banner](grid.png) + + + + +## 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: + + + +```html + + + + + + Responsive Flexbox Layout + + + +
+
Box 1
+
Box 2
+
Box 3
+
+ + +``` + + +```html + + + + + + Responsive Grid Layout + + + +
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
+ + +``` + + + + ![banner](output.png) + + + + +# 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. diff --git a/docs/html/responsive-web-design/flexbox.png b/docs/html/responsive-web-design/flexbox.png new file mode 100644 index 0000000000000000000000000000000000000000..bc90b6c36416539e075331d7a108ede6445ec621 GIT binary patch literal 7135 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 B91;Kk literal 0 HcmV?d00001 diff --git a/docs/html/responsive-web-design/green.png b/docs/html/responsive-web-design/green.png new file mode 100644 index 0000000000000000000000000000000000000000..d8a9b3e57ed7a8ac115da93b7f66bb740308bb56 GIT binary patch literal 2192 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 tag to all your web pages: + +```html + +``` +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: + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + +## 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 +
+ This div will take up 50% of the width of its container. +
+``` + +## Flexible Images + +Flexible images are also sized in relative units to prevent them from displaying outside their containing element. + +```html +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. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefoxSafariOpera
Flexible Layouts1.012.01.03.17.0
Flexible Images1.012.01.03.17.0
Media Queries21.012.03.54.012.1
+ +## 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. \ No newline at end of file diff --git a/docs/html/responsive-web-design/media-queries-and-breakpoints.md b/docs/html/responsive-web-design/media-queries-and-breakpoints.md index dec8cf594..b44ff8b8f 100644 --- a/docs/html/responsive-web-design/media-queries-and-breakpoints.md +++ b/docs/html/responsive-web-design/media-queries-and-breakpoints.md @@ -5,4 +5,230 @@ sidebar_label: Media Queries and Breakpoints sidebar_position: 2 tags: [html, web-development, responsive-web-design, media-queries, breakpoints] description: In this tutorial, you will learn how to use media queries and breakpoints to create responsive web designs that adapt to different screen sizes and devices. ---- \ No newline at end of file +--- + +Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparenc + +## Designing For The Best Experience For All Users +Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. + +Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device: + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +## What Are Media Queries? +Media queries are a fundamental part of responsive web design. They allow you to apply CSS rules based on the characteristics of the device rendering the content, such as its width, height, orientation, and resolution. + +### Basic Syntax +Here is the basic syntax of a media query: + +```css +@media (condition) { + /* CSS rules */ +} +``` + +### Example +Let's look at a simple example where we change the background color based on the screen width: + + + +```css +/* Default styles */ +body { + background-color: white; +} +/* Styles for screens wider than 600px */ +@media (min-width: 600px) { + body { + background-color: lightblue; + } +} +/* Styles for screens wider than 900px */ +@media (min-width: 900px) { + body { + background-color: lightgreen; + } +} +``` + + + + ![banner](green.png) + + + + + ![banner](blue.png) + + + + + ![banner](white.png) + + + + +## Common Breakpoints +Breakpoints are the points at which your website content will adapt to provide the best possible layout for the user. Here are some common breakpoints: + +- **Small devices (phones, 600px and down):** + ```css + @media (max-width: 600px) { + /* CSS rules for small devices */ + } + ``` + +- **Medium devices (tablets, 600px to 900px):** + ```css + @media (min-width: 600px) and (max-width: 900px) { + /* CSS rules for medium devices */ + } + ``` + +- **Large devices (desktops, 900px and up):** + ```css + @media (min-width: 900px) { + /* CSS rules for large devices */ + } + ``` + +## Advanced Media Queries +Media queries can also be combined to create more complex conditions. For example, you can target devices with a specific orientation or resolution: + +### Orientation +```css +/* Styles for landscape orientation */ +@media (orientation: landscape) { + /* CSS rules for landscape orientation */ +} + +/* Styles for portrait orientation */ +@media (orientation: portrait) { + /* CSS rules for portrait orientation */ +} +``` + +### Resolution +```css +/* Styles for high-resolution screens */ +@media (min-resolution: 2dppx) { + /* CSS rules for high-resolution screens */ +} +``` + +## Practical Example of Orientation +Let's create a practical example where we adjust the layout of a simple webpage based on different screen sizes: + + + +```html + + + + + + Responsive Web Design + + + +
+
Box 1
+
Box 2
+
Box 3
+
+ + +``` + + + + +
+ +
+ + + + + + +
+ +
+ + + + +## Conclusion +Media queries and breakpoints 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 breakpoints and media query conditions to see what works best for your specific design needs. + +## Conclusion \ No newline at end of file diff --git a/docs/html/responsive-web-design/output.png b/docs/html/responsive-web-design/output.png new file mode 100644 index 0000000000000000000000000000000000000000..7678079a1f0ec2da322564180c8ec4c537b68a6b GIT binary patch literal 12469 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 t&v5^zZ0#28Rc~xfwppxyZm^!qK{6 kv}zn}8H}KYQO6k>hnpOG4l?@10-Kc#p00i_>zopr02zsfF8}}l literal 0 HcmV?d00001