What is visual depiction of suggestion such as”doing something” or “building projects” made for helping beginners?

I mean visual depiction in terms of actions, steps or approaches.

For example I start with opening a folder containing files completed by others on the internet.

Their names are index.html, script.js and style.css

Then I open brand new files with names index-START.html, script-START.js and style-START.css outside of previous folder.

I tried to look up codes from those completed files on MDN and W3Schools and thinking of how codes are organised while typing codes in my new files.

But I happen to find the order of typing codes in is not that logical.

So what is visual depiction of suggestion such as"doing something" or "building projects" made for helping beginners?