Project Structure

This is probably something you’d eventually do on your own once you’ve coded enough. When you’re scrolling through your file to find some code and have trouble finding it, it’s probably time to refactor and split the file up. In a non-trivial production web app, index.js, index.css, and index.html would be a painful way to structure your code.

There are a few schools of thoughts on how to do this.

$$$$

$$$$

There’s lots of literature on the web around people expressing opinions on each one. Some people like to split components up atomically, where you might have Button.js and Button.css in one Button file, which is reused and extended across the project. Some people like to have all their templates in one file and not have any HTML in their .js files.

My advice is not to bother with strictly sticking to any. Do what makes sense to you. Again, explore and find what works for you. If you happen to read an article that sways you one way, find an article or blog post for the counterargument.

That being said, I generally like to split code up by the business logic domains they’re concerned with. For example, if I’m building a crypto-currency trading app, I might have folders named trading, dashboard, user, etc. The rest depends on what framework I’m using.