Does anyone know of a package that previews HTML and CSS code? There are some preview packages that only do HTML but I have yet to find one that does both concurrently. Thanks in advance!
Get yourself acquainted with build pipelines. I use gulpjs.
That way you can live preview your code, similar to what prepros does but you build it yourself. It was really difficult when I first gave it a go, but I have been using it in and out of work ever since. There are many guides out there that will get you started. Let me know if you need a hand finding a good guide 
Okay so I downloaded it but I’ve tried to upload both my css file and html (separately) but again its only loading my html. The html itself is not very pretty for this type of code without the css
Did you properly link your css file in your html?
I think so. Here’s a picture of my set-up (I haven’t done any behind the scenes stuff beyond what I wrote on the separate editors)
Is the css file in the same folder as the html file? Since, you’ve used href="style.css", which will look for the file in the same directory as the html file.
And also check if the name of the css file matches with what you’ve written within the <link> tag.
Alright, so I’ve changed things, here’s how it looks now @P1xt. @nuhash9 if you look to the far left i think they are in the same folder but bear with me i’m a noob at this.
Try renaming the files and end with the extensions relevant to the respective file.
What I mean is, on the bar on the far left, rename the html file to end with .html. e.g. Project-WeAreBroadway.html and for the css file, Broadway.css
It’s good practice to name the default html file: index.html so that it’s easier to refer to.
So I’ve got it like this… My code itself is correct (so far), would there be any problem loading both the html and css when its set up like this?
Yup, what P1xt said.
So I upload the files and then I click the ‘preview button’ and this comes up
the css stuff is there
it loads the html itself though
Ah, alright, that worked Again I apologize I’m new at this. One last question, is there a way to use a shortcut to automatically open the preview instead of having to click preview—>‘some-project-here.html’ ?
It should reload automatically if you save your project after making an edit. If not, then manually refresh the page and it should work
I manually refreshed the page but when i go back to live preview, it takes me back to the window with my files (the image i shared above).
1 Like
Another way to preview your project if it’s just CSS/JS/HTML is to install Node.js locally (https://nodejs.org/) and use the livereload http server (https://www.npmjs.com/package/lr-http-server). It automatically opens your browser with the preview of your project and reloads every time you change your source files.
I’m not sure how good it is for complex projects, but for simple stuff, it works very well.