Hi Dear ,
I want some to guide to get the right resources to learn more about the following :
1- HTML used in Shopify ( With references )
2- CSS used in Shopify ( With references )
3- Java Script used in Shopify ( With references )
4- detailed resource for shopify liquid and the relationship with used JS , CSS and HTML
5- list of commands used and accepted in Shopify liquid
6- where to write scripts :
HTML I would check out this Cheat Sheet I use Daily: https://www.shopify.ca/partners/shopify-cheat-sheet
This Document on Building Sections: https://help.shopify.com/en/themes/development/theme-editor/settings-schema
Here is a Document on how to get to the code to edit: https://help.shopify.com/en/manual/using-themes/change-the-layout/theme-code
This is a Great course, but I would wait till it goes on Sale. Its expensive right now (generally every few months): https://www.udemy.com/the-complete-web-developer-course-2/ - It covers the basics of everything you need plus MUCH MUCH MORE.
For learning Liquid, I actually did not try writing any. I started by trying to change things that already exist. Edit image sizes, Adding stuff to sections that already exist, etc.
Isle of Misfit Code and Development
My two cents, look at existing, working themes and go backwards. The Debut theme is a completely functional store with all of the logic you'll need for a Shopify theme: https://themes.shopify.com/themes/debut/styles/default
I do agree with everyone else here in that learning to code any given website is going to give you the same skills you need for Shopify, but for Liquid specifically, I'd be taking a look at any themes you can find. Some of them jump through some really elaborate hoops, and figuring out what they're doing and how is a great way to discover how Liquid works.