Bootstrap

https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/

Adobe XD - UI, UX , Product- Wireframe, Mockup, Prototype

Learn Adobe XD 
https://www.youtube.com/watch?v=68w2VwalD5w

Adobe XD Exercises
https://www.bringyourownlaptop.com/exercise-files?utm_source=Youtube&utm_medium=Description&utm_campaign=XD_Long

Download Links
https://www.bringyourownlaptop.com/exercise-files?utm_source=Youtube&utm_medium=Description&utm_campaign=XD_Long
https://www.adobe.com/products/xd/pricing/individual.html

Product Designer >  UX  Designer > UI  Designer

UI Designer - means Designing wireframes, UI (Fonts, Icons, Color) and handing it to developers

UX Designer - UX means Designing wireframes, UI (Fonts, Icons, Color) and Navigation Pathways and Actually Testing them from End user pov

Product Designer - Highlevel View, Budgets, Timelines, Client Approval + UI/UX role

Wireframes, Mockup, Prototype

Wireframes : 1 Color, 1 Font Size, Monochromatic - Usually Black and White - Skeleton Design - Sketches etc [https://www.wireframe.cc]

Mockup : All Screens with Higher Fidelity - Real colors, Real Fonts, Icons , Images etc. but no functionality, You basically cannot click anywhere

Prototype : All Things in a mockup + Functionality (Clickable Links navigating between screens)

Fidelity

Fidelity means level of detail - Color, Fonts, Icon, Logo, Images, Sizes in design

https://www.w3schools.com/tags/tag_canvas.asp
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).