Seems like I dropped lots of comments in your blog today 😄 But I hope those will be informative for you.
In this comment, I'm going to be specifically taking a note of this line:
I don’t particularly enjoy the workflow of writing code on the text editor and refreshing the browser page to see if the page turned out as you wanted it.
If you are going the traditional way: yes, that's how the traditional frontend development works.
But we're not using those methods anymore, at least, most of modern websites are now using different approach which is more modern and less hassle.
What you are facing right now was my problem back then in 2009-2013. I hated frontend development for the same exact issue.
If you want the modern approach, all you need to do now is to learn to use frontend framework. There are a lot of popular frontend framework which will help you develop frontend faster. To mention some of them: ReactJS, VueJS, Svelte, EmberJS, etc.
But please keep in mind, to be able to use these FE framework, you need to understand how traditional FE development work (HTML + CSS + JS).
The same thing applied to CSS, there a lot of CSS framework you can utilize, e.g: Bootstrap, Bulma, Semantic UI, UIKit, Materialize CSS. TailwindCSS, PureCSS, etc.
I'm going to give an example on the CSS framework using TailwindCSS.
Case: we are going to apply a styling to a <div></div> components to change the background, padding and margin.
<!-- index.html -->
<div class="someClassName">
....
</div>
and then in the CSS file
/* style.css */
.someClassName {
background-color: #000;
padding: 1rem;
margin: 1rem;
}
className):// index.js
<div className="bg-black p-4 m-4">
// The background will be black (bg-black)
// The padding is 1rem (p-4)
// The margin is 1rem (m-4)
...
</div>
See how much easier it is?
By using FE framework, one of your problem to refresh every time you make changes, will also be gone.
Sure, you still need to check the browser to check your work, but no more manually refreshing the page.
Have a nice day, Jason!