In this #CodeShare, I'll show you the implementation of randomized word placement idea I had. This approach ensures that certain words or phrases appear in different locations on the screen every time the webpage is refreshed. Now, let's dive into how I made this happen:
A Peek Into the Toolbox
I'll keep this article updated, as I work on and improve this code.
Do I always know what I'm doing when I code? No! But, that's what makes it fun. Feel free to send me corrections, tips, and resources in the comments!
Getting Started with the HTML
The key part of this process is creating the randomness:
Polishing with CSS
Finally, to control the look and feel of these words, we’ll add some CSS:
Is this code done yet?
Nope. I'm still working on the font styling with this one, and will update this article as I dial it in to something I like!
Want to try this out? Improve it? Use it?
If you're familiar with coding, you'll notice that I jammed the HTML, JS, and CSS into "HTML" blocks of my Codepen share. This is purposeful, as I made this code for inserting into HTML blocks in website builders. #NotBestPractice, but it works. 😉
Copy and fork, on Codepen ⤵️
The idea of randomizing word placement on a webpage refresh may seem like a small detail, but in the world of web design, it's these small details that can turn a good website into a great one.
This technique adds a layer of dynamism and interactivity to your site, providing a unique experience for each visitor. Try it out!
Got any pens, code, or tips to share with me? Let me know in the comments! Don't be shy. 😊