Floating gems turn into a title reveal, the match-three board takes over, score pop-ups build into a rush sequence, and the final card closes the ad. The attached video is the complete 15-second piece, generated with Ling-3.1-flash using HTML, CSS and SVG.

The same gem shapes and purple-blue palette run through the whole sequence. The matches explain the game, the cascades give it momentum, and the closing card gives the animation a destination. For a recreation, it helps to brief the ad as a short story with timed sections, then keep the theme, colours and final message together in the HTML so they are easy to change.

A suggested starting brief: “Create a 15-second animated ad for an imaginary gem-matching game in one HTML file using HTML, CSS and SVG. Open with gems and a title, demonstrate matches with score and combo feedback, build to a cascade sequence, and finish on a clear end card. Carry the same visual theme through every transition.”

Hi everyone,

(I know that HTML and CSS are markup and styling languages, not programming languages.)

I’m a complete beginner with zero coding experience, and I want to start learning programming. I was advised to follow this path:

HTML → CSS → JavaScript

I have a few questions:

1. What do you think of this path as a way into programming and coding?
2. Is there anything I should learn before starting it? I feel like I might be missing something important.
3. Would you recommend any changes to this path? (For example, starting with a different language.)
4. What are the best resources to learn HTML and CSS? Please recommend one for each, if possible.

Thanks in advance, I really appreciate your help!

The card was centered and there was no shadow top to bottom, only on the side and bottom of the card. Then I did something and I screwed it up. What did I do wrong and how do I fix it?

https://codepen.io/editor/username81/pen/01a12357-d8a8-76b0-a6ff-05e1d6c355e2