Artist Beginning my HTML/CSS journey

HTML/CSS
1

I’m an Artist beginning my journey learning HTML and CSS to learn how to develop my own Avatar website. If you’ve ever even remotely been familiar with websites such as Gaiaonline.com or even just forums such as the one I’m posting this forum to (just with customizable avatars), I’m learning HTML/CSS to develop a website sorta similar.

My goal website is to develop a full screen chat box with a beautiful background asset where avatars appear within this chat box, they can type on screen and bubbles will appear above their head. They can type and conversate while navigating this chat box to earn gold to buy clothes for their avatar.

So with that, I’m wondering… can I all this be done simply through HTML/CSS or will I need to learn some JS as well?

The features I’d like the website to have:

  • A large background that is set across the whole screen, is not affected by zooming in and out.
  • Avatars to appear above the background on a platform somewhat reminiscent to old style fighting game, though the avatars won’t move and will be positioned in slots to avoid avatars overlapping each other.
  • Servers/Rooms which users can switch between incase one is full or they want to talk to someone else.
  • A background changing button, where users can change the backgrounds of the chat box on their side without changing it across everyone else’s.
  • A catch-all menu button that display box in front of the chat box which displays a closer model of the avatar. The menu button will have additional buttons inside to change this box to “Avatar dress-up”, “Shop”, a private button for myself to upload new clothing easily within the website "private lair’, as well as a “settings” button to adjust chat filtering and bubble customization.
  • A store menu that they can use “game” currency to purchase new clothing.
  • A private lair where I can quickly upload images for the avatar that users can buy, allowing me to adjust, set gold value, or delete items.
  • A profanity filter that users can regulate what text is seen.

Thank you for taking the time to read the layout of my goals!
Any feedback would be recommended!

2

Hello and welcome. I am also new to all of this so I’m really not qualified to answer your questions regarding the best tech stack to accomplish your goals. I’m at the beginning stages of HTML and CSS.

But what the heck, I will give an opinion and others can correct me if I’m way off. I’m not quite visualizing the typing and conversation between avatars. I first thought that people were doing the typing, and avatars represented the people. But when you said they, I began to wonder if you mean’t they were driven by AI. If they are driven by people, in real-time, then there is the matter of lip sync and various other things to think about.

At the very least I think the tech stack would be:

HTML
CSS
JavaScript

You mentioned servers, my thought is for the backend work it might be better to use Python. Although JavaScript can be used for back end work, it may be more complex.

Overall, the project sounds outside of scope for a beginning project. But I like that you know what you want to build and going for it.

Additionally, this might require some knowledge in React for the user interfaces. If you decide to use JavaScript only then it may help to learn TypeScript.

Since all of this is very new to me, I will stop there. I have not personally experienced any of this so I could be way off base. At any rate, good luck with your project. Looks like we are both learning HTML and CSS. This should be a fun journey.