Topic: Best way for a noob to edit HTML/JS website?

[Keith Lard]

I've been sent a website written in HTML and JS as a zip file. I tried to open the html files in a wysiwig web editor like BlueGriffon, Google Web Designer and a few other without any joy. Whenever I open the index.html file in the wysiwig web editor all i get is a spinning wheel. But when i open the file in chrome browser it works fine. I can do basic edits to the page by going into the html code, but I need to make some edits using a wysiwig editor. I'm really stumped - i just want to make a few minor tweaks to a web page (like i have done in the past on a static html page), and don't want have to watch tutorials for hours on youtube.

In the zip folder, there is a frontend folder with all the html files. Within that folder is a sub folder called "assets", with lots of further sub folder (css, fonts, img, js, vendor) containing js, css and other files.

Please can someone recommend an easy way to edit these html files?

[CraigDS]

You mean you want a visual editor rather than editing the code directly in a text editor?

Not used a web editor before, but surely you'd need to upload more than just the HTML files to be able to do this?

[Keith Lard]

You mean you want a visual editor rather than editing the code directly in a text editor?

Not used a web editor before, but surely you'd need to upload more than just the HTML files to be able to do this?

Yep, some sort of downloadable visual editor would be great. I've used Dreamweaver in the past on my old Windows machine to edit static HTML.

I have the entire website as zip file (and it works fine online). When unzipped i have the entire file structure for the website (which contains html, javascript and css files).

I just presumed that if I opened the index.html file in a vidual web editor, I'd be able to edit the file visually. I can dip into the html code for basic edits and then view the saved file in chrome, but i'd much rather just do a visual edit without going into the code.

[JasonF]

I haven't used a WYSIWYG style editor in a long time but back in the day, the main ones were Macromedia/Adobe Dreamweaver and Microsoft Frontpage.

Microsoft Expression Web is their newer version of Frontpage (still not that new, 8+ years old) and I did use that at one point and I think it might do the job you need. It's freeware now so worth checking out.

[CraigDS]

Yep, some sort of downloadable visual editor would be great. I've used Dreamweaver in the past on my old Windows machine to edit static HTML.

I have the entire website as zip file (and it works fine online). When unzipped i have the entire file structure for the website (which contains html, javascript and css files).

I just presumed that if I opened the index.html file in a vidual web editor, I'd be able to edit the file visually. I can dip into the html code for basic edits and then view the saved file in chrome, but i'd much rather just do a visual edit without going into the code.

Same as Jason, it's been years since I've used a visual editor. I used to use Dreamweaver.

If I remember correctly you need to set it up correctly on your HD so it pulls the css, etc. files from the right location.

[Keith Lard]

Sounds like the page have a lot of dynamic content coming in from JS (possible clue - spinning circle) and the editor might not be able to link those files to the html page, or something like that. I don't know ... sounds like I might have to swallow some YT tutorials. Thanks for your help fellas.

[El Denzel Pepito]

I build websites for a living. I'm not sure I totally get this though. What exactly are you looking to achieve by editing the code? Are you looking to repurpose the pages and publish a site/set of pages of your own or do you essentially just want them saved on your computer to refer to?

I don't use things like BlueGriffon so can't advise on what may be going wrong, but it will undoubtedly be JavaScript - probably unable to connect to the files or find them as part of your directory, or the running order of the script execution.

To 'visually edit code', my agency builds within WordPress using a page builder (Oxygen for the most part as it allows a lot of custom CSS/JS/PHP). That may be too advanced for a 'noob' or for a small use-case so I won't get into that too much.

You could try something like this if your goal is just to edit parts of the pages and then save the website - https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc

Alternatively try out something like https://jsfiddle.net/ or https://codepen.io/pen/ - you can copy past the source code into the relevant sections and see what comes up. You won't be able to visually edit the code but does it work?

At a very basic level, things like this would work but it's better for text/tables rather than full-on code: https://html5-editor.net/

[Keith Lard]

I build websites for a living. I'm not sure I totally get this though. What exactly are you looking to achieve by editing the code? Are you looking to repurpose the pages and publish a site/set of pages of your own or do you essentially just want them saved on your computer to refer to?

I don't use things like BlueGriffon so can't advise on what may be going wrong, but it will undoubtedly be JavaScript - probably unable to connect to the files or find them as part of your directory, or the running order of the script execution.

To 'visually edit code', my agency builds within WordPress using a page builder (Oxygen for the most part as it allows a lot of custom CSS/JS/PHP). That may be too advanced for a 'noob' or for a small use-case so I won't get into that too much.

You could try something like this if your goal is just to edit parts of the pages and then save the website - https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc

Alternatively try out something like https://jsfiddle.net/ or https://codepen.io/pen/ - you can copy past the source code into the relevant sections and see what comes up. You won't be able to visually edit the code but does it work?

At a very basic level, things like this would work but it's better for text/tables rather than full-on code: https://html5-editor.net/

You're correct on the first guess - the aim is just to repurpose the pages and do some light editing. But I simply can't get them to load locally.

Someone else away from RAWK gave me this input: "I believe your issue is that you don’t have the files hosted. Because of this the index file you are attempting to view can’t properly load. When you open the index file in a browser it then uses the file path back to where the files are and it “works.” There are two simple ways to proceed, one is to host the files somewhere (either locally or on the web) and then access with an editor. The second is to edit the html files directly without a wysiwyg editor and reload the file in the browser to see your edits.Make sure you have a backup of the entire site before making changes to the files."

My response: "thanks for your help. A friend of mine did mention it could make a difference if I use a web editor that allows access to the hosted files via ftp. I do actually have the website hosted and running on a test server, but I don't know of a wysiwig editor that allows editing of hosted files via ftp. Do you by any chance?"

Would you be able to provide any input? It's literally just a case of trying to get the pages to load in a visual web editor for light editing. The website works perfectly online (was made by a competent pro).

[El Denzel Pepito]

If it's definitely not a JavaScript issue, then essentially whatever WYSIWYG web editor you're using is unable to find the root directory/file path of the files and assets, and is simply loading the index.html source code and nothing else.

I'm not well-versed with editors like BlueGriffon but there must be a way to have an 'environment' where it can pick up references to the other files?

If you don't mind, feel free to PM me the files and I can take a look to see if there's a way to get it to work within your current setup. Can't promise anything though!

[CraigDS]

If you've got it all hosted you could just edit the HTML and upload each time via ftp then refresh. Slightly long winded but not too much hassle. Just keep a copy of the last working index file so can revert back to it.

[El Denzel Pepito]

If you've got it all hosted you could just edit the HTML and upload each time via ftp then refresh. Slightly long winded but not too much hassle. Just keep a copy of the last working index file so can revert back to it.

Yeah, that's the way to do it. But if you're a 'noob'/'beginner' and intent on it being a visual editor rather than code, then it's a no-go really. Whilst it's easy enough to change bits of text, when it comes to the HTML/CSS/JS syntax, you rather not touch the code as a beginner really.

[Malaysian Kopite]

If I can piggyback on this thread my cousin needs my help to replace his existing site (HTML pages with JS, CSS, and asset files) with a new WordPress site I need to help build. I had a brief look through the Cpanel and it appears that Softaculous is included. So if I'm correct the best course of action should be to backup the existing site, install WP on a subdirectory, work on it until the site is ready, and then replace the root files with the WP subdirectory? I'm just a little confused on the last point, and the best way to achieve that.

[El Denzel Pepito]

If I can piggyback on this thread my cousin needs my help to replace his existing site (HTML pages with JS, CSS, and asset files) with a new WordPress site I need to help build. I had a brief look through the Cpanel and it appears that Softaculous is included. So if I'm correct the best course of action should be to backup the existing site, install WP on a subdirectory, work on it until the site is ready, and then replace the root files with the WP subdirectory? I'm just a little confused on the last point, and the best way to achieve that.

Replacing the root files won't be enough as it will all be linked into a database too. This is the way I'd do it.

1. Backup the existing site
2. Create a subdomain - not a subdirectory - ie. staging.domain.com (not domain.com/staging)
3. Install WordPress via Softaculous on the subdomain
4. Build the site
5. Delete all existing files for the existing site (you have a backup from before remember)
6. Install WordPress via Softaculous on the main domain
7. Install the 'WP All in One Migration' plugin on both WordPress installations
8. Export the staging site via the plugin on the staging site's WP
9. Import the staging site via the plugin on the main domain's WP

Re-save your permalinks and you should have an identical copy to the staging site you've created, all down to the logins. There are more manual ways to do it but this is by far the most efficient.

What page builder are you using to build the WP site? I would steer clear from Elementor, Divi or Brizy due to the upcoming Google update - https://www.searchenginejournal.com/google-core-web-vitals-ranking-signals/387142/. The builders are notorious for bloating the code and will almost always mean you won't pass Google's latest tests. Give me a shout if you need any more help

[Malaysian Kopite]

Replacing the root files won't be enough as it will all be linked into a database too. This is the way I'd do it.

1. Backup the existing site
2. Create a subdomain - not a subdirectory - ie. staging.domain.com (not domain.com/staging)
3. Install WordPress via Softaculous on the subdomain
4. Build the site
5. Delete all existing files for the existing site (you have a backup from before remember)
6. Install WordPress via Softaculous on the main domain
7. Install the 'WP All in One Migration' plugin on both WordPress installations
8. Export the staging site via the plugin on the staging site's WP
9. Import the staging site via the plugin on the main domain's WP

Re-save your permalinks and you should have an identical copy to the staging site you've created, all down to the logins. There are more manual ways to do it but this is by far the most efficient.

What page builder are you using to build the WP site? I would steer clear from Elementor, Divi or Brizy due to the upcoming Google update - https://www.searchenginejournal.com/google-core-web-vitals-ranking-signals/387142/. The builders are notorious for bloating the code and will almost always mean you won't pass Google's latest tests. Give me a shout if you need any more help

Cheers mate, that's really helpful! We're still deciding on the page builder, I recommended Flatsome as I've worked with it briefly. They've taken a liking to https://themeforest.net/item/corzo-consulting-finance/30953016 which seems alright albeit fairly new and I imagine 'unproven'. I see you mentioned Oxygen above but that seems like it's more of an Ecommerce theme? This is my cousin's current website, all content: https://globalmedicallassistance.com/index.html

They're looking to upgrade to a CMS to add in a chat feature and make it more scalable.

[El Denzel Pepito]

Cheers mate, that's really helpful! We're still deciding on the page builder, I recommended Flatsome as I've worked with it briefly. They've taken a liking to https://themeforest.net/item/corzo-consulting-finance/30953016 which seems alright albeit fairly new and I imagine 'unproven'. I see you mentioned Oxygen above but that seems like it's more of an Ecommerce theme? This is my cousin's current website, all content: https://globalmedicallassistance.com/index.html

They're looking to upgrade to a CMS to add in a chat feature and make it more scalable.

Those are WordPress themes, rather than page builders. Some have their own in-built page builders, whilst others use Elementor, Divi, WP Bakery and others to build on their base theme code. Flatsome is a theme too, which has a 'theme panel' and a page builder/options to configure the design elements.

We use Oxygen Builder (not the theme) - https://oxygenbuilder.com/

It's the developers' choice of doing things within WordPress, as it allows custom code like PHP & JS to be inserted directly on the page itself whilst building (not many builders allow you to do that). You also start off with a completely blank canvas, so you need to create each element. The upside is you can customise everything as if it were hand-coded, but it's more of a complete site builder rather than solely a page builder.

If you're looking to add in other features & give yourself full customisability, then I'd recommend something like Oxygen rather than sticking to a theme. Something like Corzo could be recreated fairly smoothly in Oxygen.

As I mentioned about the Google update, if you run one of Corzo's demos through speed tests, it doesn't fare favourably at all: https://gtmetrix.com/reports/demo.goodlayers.com/9lDlQGgi/. Re-building that through Oxygen would give it much better scores and also give you the option to add things further.

[Claire.]

I've not read all the replies here because I'm a lazy sod but you can effectively use chrome as a WYSIWIG now, open the file in chrome and in the inspector you can give it access to files on your hard drive and then edit in the sources panel.

I do this a lot with css and with source maps for js/scss and auto updates it really smoothes out my workflow.

[Malaysian Kopite]

Those are WordPress themes, rather than page builders. Some have their own in-built page builders, whilst others use Elementor, Divi, WP Bakery and others to build on their base theme code. Flatsome is a theme too, which has a 'theme panel' and a page builder/options to configure the design elements.

We use Oxygen Builder (not the theme) - https://oxygenbuilder.com/

It's the developers' choice of doing things within WordPress, as it allows custom code like PHP & JS to be inserted directly on the page itself whilst building (not many builders allow you to do that). You also start off with a completely blank canvas, so you need to create each element. The upside is you can customise everything as if it were hand-coded, but it's more of a complete site builder rather than solely a page builder.

If you're looking to add in other features & give yourself full customisability, then I'd recommend something like Oxygen rather than sticking to a theme. Something like Corzo could be recreated fairly smoothly in Oxygen.

As I mentioned about the Google update, if you run one of Corzo's demos through speed tests, it doesn't fare favourably at all: https://gtmetrix.com/reports/demo.goodlayers.com/9lDlQGgi/. Re-building that through Oxygen would give it much better scores and also give you the option to add things further.

Thanks again mate, I've relayed the info over. They want something cut and dried so I think they'll end up going for a theme over Oxygen but it's certainly something I'll look at closely in the future. I think I've likely scared them off Corzo though