Archive of: html
-
100 Days of Code - Week 8
April 6 2021
This past week was filled with experiments and practice.
-
More Clip Path Practice
April 5 2021
I can’t work with clip-path without looking up the syntax. I want to change that, so I thought today’s post would involve clip-path in some capacity. It may have just been for quick reference, but I think I found something neat in polygon clip-paths today!
-
Sakura petals take shape
April 4 2021
I had an idea for a 404 page that features sakura petals that initially form 404 and then gradually animate into random positions on the page. I got part of the way there today. I built it using parts of a page I made last June, Sakura petals falling with CSS and JS. I made that before learning more about JavaScript and was able to refactor a good portion of the code. I’ll want to build the page in a way that still looks great for anyone that visits such a page with reduced motion settings. Laying things out with grid feels a bit overboard, but I’ll figure out an alternative some other time. I like refreshing the page and watching the petals float away.
-
Simple article with table of contents
April 3 2021
It’s always nice to see a table of contents on a tutorial or long article. They’re even better when you can click on a link within the table to jump to a section within the article or tutorial. Some website even highlight the current section while you’re reading. Mine isn’t that fancy, but I got to work more with
position:sticky
and try out a few other ideas today. I’ll tackle the fancier version some other time. -
Trying a Secret of Mana-esque menu
April 2 2021
I have been a fan of Secret of Mana for the Super Nintendo (Super Famicom) for a long time, and I always wanted to try to build something similar to the game’s circular menu system. I thought it was a clever idea when I first saw it. My version is far from complete, but it was a fun experiment.
-
Trying out new ways to style margins and padding
April 1 2021
I learned about a few CSS logical properties thanks to this article, written by David Bushell. I learned about the margin-block, margin-inline, and padding-block properties today and tried putting them to use in this silly post.
-
First attempt at a scroll indicator
March 31 2021
I’ve seen a couple of websites that had a nifty progress bar that changed/updated as I read more of the page. I wondered how tough it might be to build something like that for my site using just CSS, and it turns out to be a little tricky. However, the talented web developer and writer, Preethi Sam, had a handy pen on CodePen that showed one way to build a CSS-only scroll progress bar. I hit a snag on making the markers change from black to essentially transparent until they hit the primary bar, and then I realized I hadn’t assigned a background-color to the parent element.
-
Post listing mockup using a three column grid
March 30 2021
Planning a site redesign can be a bit stressful, but it's a good time to review what you've previously made and improve the areas you know you can do better. Today I worked on a potential way of displaying posts on my index pages. I'm not sure if I like it, but I'll revisit it at a later time. -
100 Days of Code - Week 7
March 30 2021
I’m almost halfway through the 100 Days of Code challenge! I’ve learned a great deal through these posts and the material I’ve been studying.
-
Counting the days
March 29 2021
For today's post I wanted to figure out how to count the number of days between when I started the 100 Days of Code challenge and the current day. It was a bit tricky at first, but MDN and StackOverflow had some good info that I was able to wrap my head around. I'm almost half way there!