Building Responsive Layouts: A Guide to Breakpoints, Font Sizing, and Blur Effects
Tags: css, beginners, programming, tutorial
Published: 2022-05-25 05:50:52

##positioning
**What is positioning?** This determines how an element is positioned on the web page.

**Types of Positioning:**

**Absolute position**
Allows complete control over the element's location on the page, independent of the normal document flow (like "god mode"). However, other elements will ignore it and potentially overlap.

**Relative position**
Positions the element relative to its **normal position** in the document flow. Great for when you want an element to shift slightly based on its surroundings (e.g., a parent element). Unlike absolute positioning, other elements will still consider it.

**Unset option**
Resets the element's position back to its normal position in the document flow. This removes any previously applied positioning (absolute or relative) and makes the element inherit its properties from the parent element.

> 
-**Horizontal Smooth Scrolling Layout:** Techniques for creating smooth horizontal scrolling effects, possibly using Locomotive Scroll library.
-**Distorted Link Effects with SVG Filters:** Explores using SVG filters to create visually interesting link effects.
-**Audio-Based Distortion with p5.js:** Demonstrates how to use p5.js and its sound library to create audio-reactive distortion effects on images.
-**Unrolling Image Effect with WebGL:** Explains the core concept behind creating an unrolling image effect using WebGL with the Three.js library.

**Responsive sizes**
Here, you define your responsive breakpoints for different screen sizes:
**Sm:** Small - 360px wide by 800px tall
**Md:** Medium - 768px wide by 800px tall
**Lg:** Large - 1024px wide by 800px tall
**Xl:** Extra Large - 1280px wide by 800px tall

## Font Sizes

**Use "em" for fonts:** Recommends using "em" units for font sizes as they allow for easier scaling in responsive design.
**Growing Default Font Size:** While it's possible to increase the default font size for responsive design, "em" units offer more flexibility.

**Blure background**
This section provides code snippets for blurring a background with different filter options (opacity, brightness) but needs correction in syntax:
```
Filter: opacity(X,X);
-webkit-filter:opacity(X,X);
-webkit-filter:brightness(X);
-webkit-filter:brightness(X);

					Then blure it!
```
**Filter:** Use `opacity(value)` only once. Here it's repeated.
**Vendor Prefixes:** For broader compatibility, add `-webkit-filter `before the standard `filter` property.
**Clarity:** Mention that "X" needs to be replaced with the desired value for opacity and brightness (e.g., `opacity(0.5)` for 50% opacity).

## Resources
**Finding picture**
-	Pixabay.com
-	Freepik.com
-	Unsplash.com
-	Pixels.com
-	vecteezy.com
-	500px.com

**Icon download**
-	Flaticon.com
-	Icons8.com
-	Fontawsome.com
-	Theleagueofwoveabletype.com
-	Fontsquirrel.com -> change font format
-	Kudakurage.com/ligature-symbols
-	‘thems-pixeden.com/font-demos/7-stroke/index.html
-	Remixixon.com
-	Ionicons.com
-	Iconfinder.com

**Learn this from youtube**
learn how to create animation moving objects:
[getting started with GSAP](https://www.youtube.com/watch?v=eY4sXczY5AQ&t=6s&pp=ygUZR2V0dGluZyBzdGFydGVkIHdpdGggR3NhcA%3D%3D)

[Create parallax scrolling effect](https://www.youtube.com/watch?v=AQf8SBcEG8M&pp=ygUuQ3JlYXRlIHBhcmFsbGF4IHNjcm9sbGluZyBlZmZlY3QgZGVzaWduIGNvdXJzZQ%3D%3D)

and at least minmum and most of used things:
[Build one color UIResponsive] (https://www.youtube.com/watch?v=2IjyqauKumE&pp=ygUlQnVpbGQgb25lIGNvbG9yIFVJUmVzcG9uc2l2ZSAgZGF2ZSBlZA%3D%3D)

[Build a pop up with java script] (https://www.youtube.com/watch?v=MBaw_6cPmAw&t=637s&pp=ygUfQnVpbGQgYSBwb3AgdXAgd2l0aCBqYXZhIHNjcmlwdA%3D%3D)

I hope this improved version is clearer and easier to understand!