Archive of: code

• min content max content practice

  July 10, 2020

  I rewatched a Layout Land video on min-content and max-content and wanted to do a quick refresher.

  CSS, HTML, code, grid

• Adjacent selectors and headers

  July 6, 2020

  I'm doing another bit of practice via my phone, so today's is a little light. It feels like a good thing to practice though. After listening to the episode of Smashing Podcast about CUBE CSS, I know there's a lot of useful techniques I need to learn.

  CSS, HTML, code

• More List Styling Practice

  July 5, 2020

  Today I ran across some great CSS tips and one of those tips mentioned the ::marker selector. I haven't worked with it before, so I thought I'd do some more practice with list styles.

  CSS, HTML, code

• List Style Practice

  July 4, 2020

  I very rarely modify list styles, so I thought it would be good to do a quick refresher. Turns out there are a LOT more options these days. I'll need to do another one at a later time.

  CSS, HTML, code

• Whitespace and Tab Size Practice

  July 3, 2020

  While I have been doing these daily code practices, I've been disappointed with how the code displays in the HTML, CSS, and JS sections. I wanted to investigate some ways that I can clean it up and make it more readable. Unfortunately I got a bit distracted with a few other properties.

  CSS, HTML, code

• Imitation Halken Logo built with only CSS

  July 2, 2020

  Today I made the mistake of trying to reproduce the Halken logo with just CSS. In the future I think I would opt to do this as an SVG. I ran into an odd issue with selectors on the green bits.

  CSS, HTML, code

• Scrolling animation practice

  July 1, 2020

  On the most recent episode of ShopTalk Show (episode 419), Chris Coyier mentioned a simple piece of JavaScript that can be used to create a custom CSS property that helps animate elements alongside scroll position. The article containing the JS is on CSStricks.com.

  CSS, HTML, JavaScript, code

• Quick Table Practice

  June 30, 2020

  I'm trying to get back into my Japanese studies, so I thought I'd make a quick Katakana table. I haven't built a table in a while and it is always something I need to get better and faster at doing. I normally use VS Code on my PC, so table building is a bit faster with Emmet shortcuts, but today I built this bit of code in Coda/Code Editor for iOS.

  CSS, HTML, code

• Laying out a Mega Drive cartridge case cover

  June 29, 2020

  For Father's Day I received a game coupon allowing me to pick any game I'd like to have and be treated to it. Most modern games on systems like the Nintendo Switch and PlayStation 4 start around $60, so I asked if I could instead get two cheaper retro games. One of them being a Sega Mega Drive game. I have yet to play it, but it prompted me to try and lay out the front of the game case using flexbox. I'll give it a better go at a later date.

  CSS, HTML, code

• Attempting to animate line height

  June 28, 2020

  Today I cooked a pack of shio ramen for a late evening snack. While I was boiling the ramen, I wondered if I could animate a paragraph's line-height and animate the line-thickness on a wavy underline to simulate the breaking up of instant ramen noodles as they are boiled in water. It looks like line-height doesn't really animate that smoothly.

  CSS, HTML, code, ramen