Advice for creating a tarot card reading website! How to display a random image with a link

Hi there,

New to coding and web design and have been asked to help on a project. The person wants a small website (3-4) pages for tarot readings. The home page is a ‘button’, when you click on it, it generates a ‘tarot card’ reading. These tarot cards are pre-made small videos, so when you get a reading it will take you to a new page with the ‘card’ - a small short tarot video - and some text about the reading. Is this possible using html and css, if I want to attempt to build a website from scratch? Does anyone familiar with wordpress know if it would be possible to customise a wordpress site so it can do this?
Any suggestions for where I can look or how one might be able to do this would be very much appreciated!

Thanks
Leila

Hello @ruby7952581205, welcome to the forums! When you say a small video and text, do you mean a set video? Or do you mean taking a few random ones from a larger database? If your goal is the first one, then yes, you could do it with HTML and CSS. If you mean the second one, I think you’d have to learn JS and possibly a database communication language (like SQL).

If you meant the first one:
You want a few pages, so if you had three pages, and then the homepage, you could divide the homepage into three divs, each one linking to on page. (If you’re familiar with CSS grid, that might be handy). You could then simply have each page being linked having its own tarot reading.
I hope this helps!

hmmm…interesting. so it’s basically sa 26 gif files (these are the tarot cards). The user will click on a ‘button’ and this will generate a random tarot card gif (from the selection of 26). When this gif/tarot is generated, it will also be accompanied by some text. So do you think this is possible with CSS and HTML?

It might be that your suggestion is better. So, more or less, I create a different page for each tarot card (gif)…it’s the random element that is confusing me. The ‘computer’ sort of randomly selects a card almost, or at least, the user is not consciously choosing a card… Could you explain perhaps how your suggestion might work with this?

Thanks so much

There are two possibilities here:

html, css and JS.
or
html, css, sql and a back-end language (there are several)

I think the first one is simpler, you upload the gifs to a CDN. Then in JS you make an array with objects, the object contain the text and gif location/url for each carrot

then with JS, select a random element from the array, and update the page. You wouldn’t even need separate pages.

Ok, thank you so much.

I have one more question. Have you got any experience with Wordpress? Do you think it will be possible to do this on wordpress, or is it better for me to try and build the website from Scratch? Unfortunately wordpress don’t allow you a trial so if I want to trial it I have to pay, but I’m not sure it will let me actually do the things I want to do.

No experience with wordpress (well, so little its not worth mentioning)

Why would you need entire CMS for such a task? It adds a lot of abstraction, and might be overwhelming if you know very little about html, css, php and mysql/mariadb.

is it possible to use wordpress? Very likely.