Archive of: April, 2021

• Grid row and column span practice

  April 21, 2021

  For a little while now, Apple has been displaying info about their new products in this nifty grid layout during their events. I took a shot at making one based on the new iPad Pro slide shown during the April 20, 2021 event. It’s a pretty fancy looking and powerful machine, along with the new iMacs.

  100daysofcode, CSS, HTML, grid

• Simple transition using clip-path

  April 20, 2021

  I know I did another clip-path post yesterday, but this popped into my head as I was transferring old Animal Crossing screenshots of a micro-SD card. It’s a simple and pretty effective transition. What would be neat is to try and only have the full-color image load when the mouse is within a certain distance from the low-quality version. That would be tricky on a touchscreen, but a different presentation or a change of the button text may be all I would need.

  100daysofcode, CSS, HTML, JavaScript

• 100 Days of Code - Week 10

  April 20, 2021

  I tackled a few new things (well, new to me) in both JavaScript and CSS over the last week.

  100daysofcode, HTML, CSS, JavaScript

• Goofing around with clip path

  April 19, 2021

  I wanted to try to do something fancy with clip-path from scratch today, but it ended up being quite goofy. Click on me to get a high-five!

  100daysofcode, CSS, HTML

• Practicing with Switch statements

  April 18, 2021

  I did a course on JavaScript Conditionals on Treehouse today and learned about switch () statements. I’ve never used them before and I’m not sure how much I will in the future, but I give them a go to solidify what I learned.

  100daysofcode, CSS, HTML, JavaScript

• Simple Spotlight

  April 17, 2021

  I wanted to try out a spotlight that follows the cursor’s position. It turns out this is fairly easy to do if you use CSS custom properties and the mousemove event. The spotlight is a little offset within this code post. I’ll have to sort out why in a future post.

  100daysofcode, CSS, HTML, JavaScript

• Spicing up links

  April 16, 2021

  I saw some fantastic link styling on a website called CSS { In Real Life }, designed and built by Michelle Barker, and I thought I’d try and figure out how to recreate it. I don’t think I’ve played with text-underline-offset before, and I’m glad I came across CSS { In Real Life } and its cool link styling. It’s subtle, but really stood out to me. I’m excited to put it into use.

  100daysofcode, CSS, HTML, links

• Practice with the IS selector

  April 15, 2021

  I’ve been hearing about the :is() for a little while now and wanted to try it out. It looks like it will be pretty useful for those times when I have an excess of selectors in the same declaration or set of declarations.

  100daysofcode, CSS, HTML, JavaScript

• Trying a keyboard shortcut with Vanilla JS

  April 14, 2021

  I haven’t ever added a keyboard shortcut to a webpage, so I thought I’d give it a try. I wanted to try adding one to the post I made yesterday. I ran into an interesting issue, it looks like I have to click within the browser window to be able to use the shortcut even if I have the page loaded. There’s always more to learn.

  100daysofcode, CSS, HTML, JavaScript

• Playing with the Fullscreen API

  April 13, 2021

  The great CSS Tricks never ceases to disappoint me. After just a few seconds on the site, I spotted a fantastic article, How to Leverage the Fullscreen API… and Style It written by Evgeny Klimenchenko, that taught me how easy it is to make an element fullscreen. I’m excited to try this out when I get more games made with PICO-8 and Voxatron games done and posted to my website.

  100daysofcode, CSS, HTML, JavaScript, fullscreen api