Practice begins anew


by Jeremy Caudle
code

I'm starting up another stretch of daily coding posts. This is post 001 of 100 posts I hope to complete. Many of them may be one-off posts, but I'm hoping to learn a lot and put what I learn to good use.

Practice

Practicing something every day helps build up knowledge and helps it stick. I often have to look up information about various aspects of HTML, CSS, and JS, especially if it involves something I haven't worked with for some time. So I'm starting up another daily code challenge and this time I'm shooting for 100 days in a row. I'm going to try and work with things I'm unfamiliar with, or a bit rusty at, and build pieces I can use for future projects.

It's a bit difficult to sort out what I'll do each day, but I think doing a bit of learning and practicing on my Treehouse account will give me some ideas. Today I was checking out the recent info on the implementation of path() in clip-path on CSS Tricks and the nifty backgrounds on the sidebar ads caught my attention. I thought it would be fun to replicate. It was a bit tricky, but after some adjustments to my code and analysis of the technique on CSS Tricks, I was able to get it to work.

View the code:

HTML and JS 
<div id="code-block">
            <div class="card">
                <div class="card-inner">
                    <h1>Practice</h1>
                <p>Practicing something every day helps build up knowledge and helps it stick. I often have to look up information about various aspects of HTML, CSS, and JS, especially if it involves something I haven't worked with for some time. So I'm starting up another daily code challenge and this time I'm shooting for <strong>100 days in a row</strong>. I'm going to try and work with things I'm unfamiliar with, or a bit rusty at, and build pieces I can use for future projects.</p>
                <footer>
                    <p>It's a bit difficult to sort out what I'll do each day, but I think doing a bit of learning and practicing on my <a href="https://teamtreehouse.com">Treehouse</a> account will give me some ideas. Today I was checking out the recent info on the implementation of <code>path()</code> in <code>clip-path</code> on <a href="https://css-tricks.com">CSS Tricks</a> and the nifty backgrounds on the sidebar ads caught my attention. I thought it would be fun to replicate. It was a bit tricky, but after some adjustments to my code and analysis of the technique on CSS Tricks, I was able to get it to work.</p>
                </footer>
                </div>
            </div>
        </div>
CSS 
:root {
                --bg-color: slateblue;
                --card-bg: white;
                --main-color: midnightblue;
                --radius-main: 1rem;
            }
            html { box-sizing: border-box; z-index: 0; }
            html * { box-sizing: inherit; }
            main #code-block { 
								display: grid;
                place-items: center;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                background-color: var(--bg-color, slateblue);
                z-index: 1;
}
            .card { 
								margin: 3rem 0;
                max-width: 22em;
                position: relative;
                top: 0;
                left: 0;
                z-index: 1;
                }
            .card::before {
                content: "";
                background-image: linear-gradient(135deg, rgb(235, 47, 0), rgb(255, 166, 0));
                position: absolute;
                width: calc(100% + 1rem);
                height: calc(100% + 1rem);
                top: -.5rem;
                left: -.5rem;
                border-radius: var(--radius-main, 1rem);
                z-index: -1;
                box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.25);
            }
            .card-inner { 
                background-color: var(--card-bg, white);
                padding: 1rem;
                border-radius: calc(var(--radius-main, 1rem) / 2);
            }
            #code-block h1 {
								font-size: 1.75rem;
                color: var(--main-color, blue);
                margin: .25rem 0 2rem 0;
                padding-bottom: .5rem;
                border-bottom: groove 5px var(--main-color, midnightblue);}
            p { 
                line-height: 1.5;
                }
            #code-block a { color: var(--main-color, midnightblue);}
            #code-block a:visited { color: var(--bg-color, slateblue);}
            main footer {
                min-height: 4rem;
                padding: .5rem 0;
            }
            footer.hundred-block {
                font-family: sans-serif;
                text-align: center;
                position: sticky;
                margin: 0;
                padding: .25rem;
                background: #333;
                color: #ddd;
            } 
            #code-block code {
                background-color: rgba(0,0,0,.8);
                padding: .25rem;
                color: white;
            }

Tags