I would advise you to learn a good amount of Javascript and/or Typescript. Start with one or the other. Then, start learning a framework like Vue or React (I'd recommend the latter), and if you've gained enough knowledge about core topics, get on to learn a meta framework like NextJS (which is based on React).

For styling, I would recommend to learn at least the basics of CSS before you move on to a framework like Bootstrap or Tailwind. You mention you already have so that's good. I would definitely invest time in understanding Grid and Flexbox, as well as writing media queries for responsiveness if you haven't so. When you're confident writing your own CSS, I could definitely recommend Tailwind as framework as that still allows you to implement your own styling and designs, instead of using a predefined UI Component-based framework like Bootstrap. I've been using it for a few months now and when you get the hang of it, it's really time efficient.

One tip: try to define your tech stack now, and focus on mastering those tools instead of being a jack of all trades. It's hard to master tools/topics if you're not enough invested in learning those because you want to learn too much. For example, I would either pick Django or Flask in your situation. My preference goes to Django. If API support is needed, then use the Django REST Framework for example.

Also, best way to learn is to just build things. Try building your portfolio website or a to-do app. Also, try to build something that retrieves data from an API.

Prototype to code would be better with teleport.hq. Figma is ok for the prototype itself but to get the code you would still end up using the Teleport plugin. Either way the code generated is always moderately hacky, you should keep learning JS and HTML so you can fix up odd looking parts yourself.