Skip to content

Commit 7cc6fe5

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #144 from Tirth-chokshi/main
completed responsive web design
2 parents 09afe15 + 66760fa commit 7cc6fe5

File tree

9 files changed

+594
-3
lines changed

9 files changed

+594
-3
lines changed

‎docs/html/responsive-web-design/blue.png

2.08 KB
Loading

‎docs/html/responsive-web-design/flexbox-and-grid-layout.md

Lines changed: 252 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,255 @@ sidebar_label: Flexbox and Grid Layout
55
sidebar_position: 3
66
tags: [html, web-development, flexbox, grid-layout]
77
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.
8-
---
8+
---
9+
10+
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.
11+
<br></br>
12+
13+
![Local Image](https://ishadeed.com/assets/grid-flex/grid-vs-flexbox.png)
14+
15+
## What is Flexbox?
16+
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.
17+
18+
### Basic Syntax
19+
Here is the basic syntax of a Flexbox container:
20+
21+
```css
22+
.container {
23+
display: flex;
24+
flex-direction: row; /* or column */
25+
}
26+
```
27+
28+
### Example
29+
Let's look at a simple example where we create a flexible layout:
30+
31+
<Tabs>
32+
<TabItem value="Code">
33+
```html
34+
<!DOCTYPE html>
35+
<html lang="en">
36+
<head>
37+
<meta charset="UTF-8">
38+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
39+
<title>Flexbox Example</title>
40+
<style>
41+
.container {
42+
display: flex;
43+
justify-content: space-around;
44+
align-items: center;
45+
height: 100vh;
46+
}
47+
.box {
48+
width: 100px;
49+
height: 100px;
50+
background-color: lightblue;
51+
text-align: center;
52+
line-height: 100px;
53+
}
54+
</style>
55+
</head>
56+
<body>
57+
<div class="container">
58+
<div class="box">Box 1</div>
59+
<div class="box">Box 2</div>
60+
<div class="box">Box 3</div>
61+
</div>
62+
</body>
63+
</html>
64+
```
65+
</TabItem>
66+
<TabItem value="Output">
67+
<BrowserWindow>
68+
![banner](flexbox.png)
69+
</BrowserWindow>
70+
</TabItem>
71+
</Tabs>
72+
73+
74+
## What is Grid Layout?
75+
Grid is a blueprint for making websites.
76+
77+
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.
78+
79+
Grid Layout is a two-dimensional layout system for the web. It allows you to create complex layouts using rows and columns.
80+
81+
### Basic Syntax
82+
Here is the basic syntax of a Grid container:
83+
84+
```css
85+
.container {
86+
display: grid;
87+
grid-template-columns: repeat(3, 1fr);
88+
grid-template-rows: auto;
89+
}
90+
```
91+
92+
### Example
93+
Let's look at a simple example where we create a grid layout:
94+
<Tabs>
95+
<TabItem value="Code">
96+
```html
97+
<!DOCTYPE html>
98+
<html lang="en">
99+
100+
<head>
101+
<meta charset="UTF-8">
102+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
103+
<title>Grid Layout Example</title>
104+
<style>
105+
.container {
106+
display: grid;
107+
grid-template-columns: repeat(3, 1fr);
108+
gap: 10px;
109+
}
110+
.box {
111+
background-color: lightgreen;
112+
text-align: center;
113+
padding: 20px;
114+
}
115+
</style>
116+
</head>
117+
118+
<body>
119+
<div class="container">
120+
<div class="box">Box 1</div>
121+
<div class="box">Box 2</div>
122+
<div class="box">Box 3</div>
123+
<div class="box">Box 4</div>
124+
<div class="box">Box 5</div>
125+
<div class="box">Box 6</div>
126+
</div>
127+
</body>
128+
129+
</html>
130+
```
131+
</TabItem>
132+
<TabItem value="Output">
133+
<BrowserWindow>
134+
![banner](grid.png)
135+
</BrowserWindow>
136+
</TabItem>
137+
</Tabs>
138+
139+
## Practical Example
140+
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:
141+
142+
<Tabs>
143+
<TabItem value="Flexbox">
144+
```html
145+
<!DOCTYPE html>
146+
<html lang="en">
147+
<head>
148+
<meta charset="UTF-8">
149+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
150+
<title>Responsive Flexbox Layout</title>
151+
<style>
152+
body {
153+
font-family: Arial, sans-serif;
154+
margin: 0;
155+
padding: 0;
156+
}
157+
.container {
158+
display: flex;
159+
flex-direction: column;
160+
align-items: center;
161+
padding: 20px;
162+
}
163+
.box {
164+
width: 100%;
165+
padding: 20px;
166+
margin: 10px 0;
167+
background-color: lightgray;
168+
text-align: center;
169+
}
170+
@media (min-width: 600px) {
171+
.container {
172+
flex-direction: row;
173+
flex-wrap: wrap;
174+
justify-content: space-around;
175+
}
176+
.box {
177+
width: 45%;
178+
}
179+
}
180+
@media (min-width: 900px) {
181+
.box {
182+
width: 30%;
183+
}
184+
}
185+
</style>
186+
</head>
187+
<body>
188+
<div class="container">
189+
<div class="box">Box 1</div>
190+
<div class="box">Box 2</div>
191+
<div class="box">Box 3</div>
192+
</div>
193+
</body>
194+
</html>
195+
```
196+
</TabItem>
197+
<TabItem value="Grid">
198+
```html
199+
<!DOCTYPE html>
200+
<html lang="en">
201+
<head>
202+
<meta charset="UTF-8">
203+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
204+
<title>Responsive Grid Layout</title>
205+
<style>
206+
body {
207+
font-family: Arial, sans-serif;
208+
margin: 0;
209+
padding: 0;
210+
}
211+
.container {
212+
display: grid;
213+
grid-template-columns: 1fr;
214+
gap: 10px;
215+
padding: 20px;
216+
}
217+
.box {
218+
background-color: lightgray;
219+
text-align: center;
220+
padding: 20px;
221+
}
222+
@media (min-width: 600px) {
223+
.container {
224+
grid-template-columns: repeat(2, 1fr);
225+
}
226+
}
227+
@media (min-width: 900px) {
228+
.container {
229+
grid-template-columns: repeat(3, 1fr);
230+
}
231+
}
232+
</style>
233+
</head>
234+
<body>
235+
<div class="container">
236+
<div class="box">Box 1</div>
237+
<div class="box">Box 2</div>
238+
<div class="box">Box 3</div>
239+
<div class="box">Box 4</div>
240+
<div class="box">Box 5</div>
241+
<div class="box">Box 6</div>
242+
</div>
243+
</body>
244+
</html>
245+
```
246+
</TabItem>
247+
<TabItem value="Output">
248+
<BrowserWindow>
249+
![banner](output.png)
250+
</BrowserWindow>
251+
</TabItem>
252+
</Tabs>
253+
254+
# Resources
255+
- [Fkexbox cheatsheet](https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png)
256+
- [Grid cheatsheet](https://css-tricks.com/wp-content/uploads/2022/02/css-grid-poster.png)
257+
258+
## Conclusion
259+
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.

‎docs/html/responsive-web-design/flexbox.png

6.97 KB
Loading

‎docs/html/responsive-web-design/green.png

2.14 KB
Loading

‎docs/html/responsive-web-design/grid.png

11.6 KB
Loading

‎docs/html/responsive-web-design/introduction-to-responsive-design.md

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,118 @@ sidebar_label: Introduction to Responsive Design
55
sidebar_position: 1
66
tags: [html, web-development, responsive-web-design]
77
description: In this tutorial, you will learn the basics of responsive web design and how to create responsive websites that work on all devices.
8-
---
8+
---
9+
10+
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.
11+
12+
A responsive web design will automatically adjust for different screen sizes and viewports.
13+
14+
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):
15+
16+
![banner](https://www.infront.com/wp-content/uploads/2019/10/responsive-websites-700-1.jpg)
17+
18+
## Setting The Viewport
19+
To create a responsive website, add the following `<meta>` tag to all your web pages:
20+
21+
```html
22+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
23+
```
24+
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
25+
26+
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
27+
28+
<Tabs>
29+
<TabItem value="Without Viewport">
30+
<BrowserWindow>
31+
<html>
32+
<center>
33+
<img src="https://www.w3schools.com/css/img_viewport1.png"></img>
34+
</center>
35+
</html>
36+
</BrowserWindow>
37+
</TabItem>
38+
<TabItem value="With Viewport">
39+
<BrowserWindow>
40+
<html>
41+
<center>
42+
<img src="https://www.w3schools.com/css/img_viewport2.png"></img>
43+
</center>
44+
</html>
45+
</BrowserWindow>
46+
</TabItem>
47+
</Tabs>
48+
49+
## Flexible Layouts
50+
51+
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.
52+
53+
```html
54+
<div style="width: 50%;">
55+
This div will take up 50% of the width of its container.
56+
</div>
57+
```
58+
59+
## Flexible Images
60+
61+
Flexible images are also sized in relative units to prevent them from displaying outside their containing element.
62+
63+
```html
64+
<img src="path/to/your-image.jpg" style="max-width: 100%;" alt="Responsive Image">
65+
```
66+
67+
## Media Queries
68+
69+
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.
70+
71+
```css
72+
@media (max-width: 600px) {
73+
.responsive-class {
74+
font-size: 14px;
75+
}
76+
}
77+
```
78+
79+
## Browser Support
80+
81+
The numbers in the table specify the first browser version that fully supports the feature.
82+
83+
<table class="browserref notranslate">
84+
<tbody>
85+
<tr>
86+
<th>Feature</th>
87+
<th>Chrome</th>
88+
<th>Edge</th>
89+
<th>Firefox</th>
90+
<th>Safari</th>
91+
<th>Opera</th>
92+
</tr>
93+
<tr>
94+
<td>Flexible Layouts</td>
95+
<td>1.0</td>
96+
<td>12.0</td>
97+
<td>1.0</td>
98+
<td>3.1</td>
99+
<td>7.0</td>
100+
</tr>
101+
<tr>
102+
<td>Flexible Images</td>
103+
<td>1.0</td>
104+
<td>12.0</td>
105+
<td>1.0</td>
106+
<td>3.1</td>
107+
<td>7.0</td>
108+
</tr>
109+
<tr>
110+
<td>Media Queries</td>
111+
<td>21.0</td>
112+
<td>12.0</td>
113+
<td>3.5</td>
114+
<td>4.0</td>
115+
<td>12.1</td>
116+
</tr>
117+
</tbody>
118+
</table>
119+
120+
## Conclusion
121+
122+
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.

0 commit comments

Comments
 (0)