Skip to content

Commit eae1b4d

Browse files
danieldanieleckidanieldanielecki
committed
fix: improvements from recordings 10.3.2025
1 parent 3d95534 commit eae1b4d

File tree

2 files changed

+30
-22
lines changed

2 files changed

+30
-22
lines changed

‎README.md‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3001,44 +3001,47 @@ Percentage units allow you to define dimensions, margins, and padding relative t
30013001

30023002
```css
30033003
.container {
3004-
background-color: #ff0000;
3005-
width: 90%; /* Set container width to 90% of the viewport */
3004+
background-color: #ff0000;
3005+
margin: 5%;
3006+
padding: 5%;
3007+
width: 90%; /* Set container width to 90% of the viewport */
30063008
}
30073009

30083010
.column {
3009-
background-color: #f1f1f1;
3010-
width: 50%; /* Set column width to 50% of the container */
3011+
background-color: #f1f1f1;
3012+
padding: 10%;
3013+
width: 50%; /* Set column width to 50% of the container */
30113014
}
30123015
```
30133016

30143017
[![Edit 074-Percentage (%)](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/074-percentage-ct6wzy)
30153018

30163019
[^74]CodeSandbox: Percentage (%).
30173020

3018-
[^74]:[CodeSandbox: Percentage (%)](https://ct6wzy.csb.app/), last access: June 20, 2024.
3021+
[^74]:[CodeSandbox: Percentage (%)](https://ct6wzy.csb.app/), last access: March 10, 2025.
30193022

30203023
###### Viewport Width (vw) and Viewport Height (vh)
30213024

30223025
Viewport units represent a percentage of the viewport's width or height, allowing you to create responsive designs based on the size of the viewport.
30233026

30243027
```css
30253028
.text {
3026-
background-color: #ff0000;
3027-
font-size: 5vw; /* Set font size to 5% of the viewport width */
3029+
background-color: #ff0000;
3030+
font-size: 5vw; /* Set font size to 5% of the viewport width */
30283031
}
30293032

30303033
.box {
3031-
background-color: #f1f1f1;
3032-
width: 50vw; /* Set box width to 50% of the viewport width */
3033-
height: 50vh; /* Set box height to 50% of the viewport height */
3034+
background-color: #f1f1f1;
3035+
width: 50vw; /* Set box width to 50% of the viewport width */
3036+
height: 50vh; /* Set box height to 50% of the viewport height */
30343037
}
30353038
```
30363039

30373040
[![Edit 075-Viewport Width (vw) and Viewport Height (vh)](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/075-viewport-width-vw-and-viewport-height-vh-ckqpy3)
30383041

30393042
[^75]CodeSandbox: Viewport Width (vw) and Viewport Height (vh).
30403043

3041-
[^75]:[CodeSandbox: Viewport Width (vw) and Viewport Height (vh)](https://ckqpy3.csb.app/), last access: June 25, 2024.
3044+
[^75]:[CodeSandbox: Viewport Width (vw) and Viewport Height (vh)](https://ckqpy3.csb.app/), last access: March 10, 2025.
30423045

30433046
###### Viewport Settings
30443047

@@ -3054,6 +3057,7 @@ Let's have an example of Responsive Meta Tag.
30543057
</head>
30553058
<body style="background-color: grey">
30563059
<!-- Content -->
3060+
<h1>Test</h1>
30573061
</body>
30583062
</html>
30593063
```
@@ -3062,7 +3066,7 @@ Let's have an example of Responsive Meta Tag.
30623066

30633067
[^76]CodeSandbox: Viewport Settings.
30643068

3065-
[^76]:[CodeSandbox: Viewport Settings](https://7gjptw.csb.app/), last access: June 25, 2024.
3069+
[^76]:[CodeSandbox: Viewport Settings](https://7gjptw.csb.app/), last access: March 10, 2025.
30663070

30673071
- The `viewport` meta tag is included in the `<head>` section of the HTML document.
30683072
- The `width=device-width` property sets the width of the viewport to the device's screen width.

‎__presentation-slides/index.html‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1901,13 +1901,16 @@ <h1 id="heading">JavaScript Example</h1>
19011901

19021902
```css[|3|1,4|8|6,9|3,8]
19031903
.container {
1904-
background-color: #ff0000;
1905-
width: 90%; /* Set container width to 90% of the viewport */
1904+
background-color: #ff0000;
1905+
margin: 5%;
1906+
padding: 5%;
1907+
width: 90%; /* Set container width to 90% of the viewport */
19061908
}
19071909

19081910
.column {
1909-
background-color: #f1f1f1;
1910-
width: 50%; /* Set column width to 50% of the container */
1911+
background-color: #f1f1f1;
1912+
padding: 10%;
1913+
width: 50%; /* Set column width to 50% of the container */
19111914
}
19121915
```
19131916

@@ -1921,14 +1924,14 @@ <h1 id="heading">JavaScript Example</h1>
19211924

19221925
```css[|3|1,4|8|9|8-9|6,10|3,8-9]
19231926
.text {
1924-
background-color: #ff0000;
1925-
font-size: 5vw; /* Set font size to 5% of the viewport width */
1927+
background-color: #ff0000;
1928+
font-size: 5vw; /* Set font size to 5% of the viewport width */
19261929
}
19271930

19281931
.box {
1929-
background-color: #f1f1f1;
1930-
width: 50vw; /* Set box width to 50% of the viewport width */
1931-
height: 50vh; /* Set box height to 50% of the viewport height */
1932+
background-color: #f1f1f1;
1933+
width: 50vw; /* Set box width to 50% of the viewport width */
1934+
height: 50vh; /* Set box height to 50% of the viewport height */
19321935
}
19331936
```
19341937

@@ -1940,7 +1943,7 @@ <h1 id="heading">JavaScript Example</h1>
19401943

19411944
### Viewport Settings <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
19421945

1943-
```html[|5|3,7|2,11]
1946+
```html[|5|3,7|2,12]
19441947
<!DOCTYPE html>
19451948
<html lang="en">
19461949
<head>
@@ -1950,6 +1953,7 @@ <h1 id="heading">JavaScript Example</h1>
19501953
</head>
19511954
<body style="background-color: grey">
19521955
<!-- Content -->
1956+
<h1>Test</h1>
19531957
</body>
19541958
</html>
19551959
```

0 commit comments

Comments
 (0)