Archive of: July, 2020

• Quick Grid Practice

  July 11, 2020

  Just a quick bit of grid practice today.

  CSS, HTML

• 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

• Z-index Practice

  July 9, 2020

  I wanted to see how overlapping text might look while animated only using z-index. I'll need to do more practice to get this type of animation looking better.

  CSS, HTML, z-index

• Outline Practice

  July 8, 2020

  I wanted to play with outline-style today and create a quick way for me to double check how the styles display.

  CSS, HTML, outline

• Text Overflow Practice

  July 7, 2020

  I made some tweaks to this website today and one of those tweaks involved the use of the text-overflow CSS property. I worked with a bit in the past, but was surprised when I didn't find it in Eric Meyer's most recent CSS Pocket Reference. It looks like it is a fairly new property, but it has some interesting uses.

  CSS, HTML

• 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