The front end of your applications can take a lot of work. Using a theme can let you focus your efforts on the rest of the application, but you still need to know how to

While it’s always great to create custom CSS to make your application’s front end look fabulous, there’s no denying that working with a template can save you time that you can invest into the rest of your project. This very blog uses a template, as it happens! But if you’ve never worked with one before, then where do you start?

52,500?! That’s a lot of templates!

First, you naturally need to find a template. You’re shocked, I know.; I got the themes for this blog and my issue tracker application from EnvatoMarket, but there are plenty of places out there to get them. Many templates come with documentation you can reference for using them, but they can be hit-or-miss. The good news is, templates come with pre-made HTML examples, and that’s all a developer really needs!

Open the template directory in VS Code and examine the example HTML pages for elements you would like to refactor and implement in your application. Once you’ve found something promising, go to that page in VS code and examine the code. What classes are used? How are the div tags nested? That code is your base for refactoring; now it’s up to you to make the necessary changes to make it work for your project.

I'll end with some final tips: Don’t forget to include the relevant links to the CSS stylesheets and JS files that make your template work! And when making changes, I recommend you override the existing CSS with your own and list your CSS after the template's in your head tag. It will be easier to track what changes you've made, and easier to revert if you make a mistake.

Good luck, and happy coding!