responsive design

responsive design ensures that your website looks great on all devices by using flexible layouts, media queries, and scalable units like `rem` for font sizes.

using rem for font size

instead of using pixel values for font sizes, it's a good practice to use relative units like `rem` (root em), which scales based on the root font size. this ensures better accessibility and responsiveness.

            /* base font size */
            html {
                font-size: 16px; /* 1rem = 16px */
            }

            /* example of font size using rem */
            h1 {
                font-size: 2rem; /* 2rem = 32px */
            }

            p {
                font-size: 1rem; /* 1rem = 16px */
            }

            .small-text {
                font-size: 0.8rem; /* 0.8rem = 12.8px */
            }

in this example, the font size of `h1` is `2rem` (which equals 32px when the root font size is 16px), and the paragraph text uses `1rem` (16px). The class `.small-text` uses `0.8rem`, which equals approximately 12.8px.

using media queries for responsiveness

media queries allow you to apply styles based on different screen sizes. you can define different styles for mobile, tablet, and desktop views.

            /* base styles for mobile-first approach */
            body {
                font-size: 1rem;
                padding: 20px;
            }

            h1 {
                font-size: 2rem;
            }

            p {
                font-size: 1rem;
            }

            /* media query for tablets */
            @media (min-width: 600px) {
                body {
                    font-size: 1.2rem;
                    padding: 40px;
                }

                h1 {
                    font-size: 2.5rem;
                }
            }

            /* media query for desktops */
            @media (min-width: 1024px) {
                body {
                    font-size: 1.5rem;
                    padding: 60px;
                }

                h1 {
                    font-size: 3rem;
                }
            }

the styles in the example above follow a mobile-first approach. by default, we define styles for small screens (mobile), and then use media queries to adjust the layout and font sizes for larger screens

this is a super basic template -->

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>my first website!</title>
                <style>
                    body {
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 16px;
                        background-color: rgba(228, 228, 253, 0.43);
                        margin: 0;
                        padding: 0;
                        display: flex;
                        justify-content: center;
                    }
                    
                    .container {
                        max-width: 600px;
                        width: 90%;
                    }
                    
                    h1 {
                        color: white;
                        font-style: oblique;
                        text-underline-offset: 10px;
                        text-shadow: 2px 2px 8px #4402fc;
                    }
                    
                    a {
                        color: cornflowerblue;
                    }
                    
                    a:visited {
                        color: rgb(124, 193, 20);
                    }
                    
                    ::selection {
                        color: white;
                        background: rgb(6, 97, 243);
                    }
                    
                    img { 
                        max-width: 100%;
                        height: auto;
                        display: block;
                        margin-top: 10px;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <h1><u>welcome to my website</u></h1>
                    <p>i made this today haha.</p>

                    <h2>about me</h2>
                    <img src="me.jpg" alt="photo of me">
                    <p>i am a first year grad student in the art department. i mostly make stuff on the internet.</p>

                    <h2>things i like to do</h2>
                    <ul>
                        <li>go on bike rides</li>
                        <li>listen to <a href="https://www.hopetala.com/videos">hope tala</a></li>
                        <li>hang out with my cats</li>
                    </ul>

                    <h2>things i like to listen to</h2>
                    <iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="450" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/us/album/girl-eats-sun-ep/1538083389"></iframe>
                    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/album/5y9Fis539BaAsi7MmHKHm2?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

                    <h2>where am i from?</h2>
                    <div style="width: 100%"><iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&height=600&hl=en&q=atlanta,%20ga%20+(where%20i%20am%20from%20)&t=&z=11&ie=UTF8&iwloc=B&output=embed"><a href="https://www.gps.ie/collections/drones/">best drones</a></iframe></div>

                    <h2>contact</h2>
                    <p>if you want to reach me, you can email me: <a href="mailto:edachiardi@ucsb.edu">here</a></p>
                </div>
            </body>
            </html>

let's take this bit by bit, with the new stuff we haven't seen quite yet

  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: rgba(228, 228, 253, 0.43);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

margin: 0;
--> by default, browsers add some margin (extra space) around the element.
--> this resets it to 0, so the page doesn’t have unexpected gaps around the edges.

padding: 0;
--> just like margin, browsers sometimes add default padding (space inside the element).
--> setting it to 0 ensures no extra spacing inside the element.

display: flex;
--> this makes the act as a flexbox container.
--> flexbox is a layout system that helps position elements easily. ( here is a cheat sheet that i often use)
--> it allows us to control how child elements (like .container) are arranged.

justify-content: center;
--> this tells the flexbox to center the content horizontally.
--> without this, everything would start from the left side of the screen.

responsive design

using rem for font size

using media queries for responsiveness

body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; background-color: rgba(228, 228, 253, 0.43); margin: 0; padding: 0; display: flex; justify-content: center; }

.container { max-width: 600px; width: 90%; }