Recommendations about real-time online HTML editor

Hello community, here a new user!

After doing almost the first part of the HTML course, I will like to “learn by doing” a bit, so I am looking for a real time HTML editor, if it were online better.

After quite few search I´ve found CodePen, which is nice, but there are no dropdowns of options as the platform of FCC, as for example “forms” when you type <f___, wich makes the process handier and quicker.

Any advice of the more veterans?

Thank you very much all in advance!

My advice would be to hand-code in the beginning. Relying on autocomplete can really hamper your understanding of what you are doing until you know what you’re doing, and it just speeds things along.

If it’s a template you’re looking for, I like Visual Studio Code (local, not online). It has a feature called Emmet that does what you want, and it’s not bad as far as IDEs go. When it comes time to get good with version control, it has git built in (with maybe a few easy-to-follow steps on the documentation, I don’t remember). When it comes time to be able to manage the file structure of larger projects, it does that well with “Workspaces”. Debugging doesn’t look bad, either, but I can’t speak to that directly since I still have the bad habit of “console.log”-ging everything.

I understand @vipatron, thank you for the advice!

At this moment I am not looking for templates, I was just playing around with my old email signature I created time ago without any knowledge at all. In fact is created as a table and it’s quite messy (and non responsive design). So I doing it inside divs and wrapping it with flex and etc, nothing really serious.

Furthermore, would you recommend CodePen for online editing or not?

Thank you!

1 Like

Yes, I started there, and I stayed there until very recently. Even when designing for the later challenges, like the React front-end library ones, I found myself using the immediate feedback of CodePen to slam out HTML, and see immediate feedback while I tinkered with the styles to govern positioning, layout, color, and size. As I had invariably googled a few things along the way, I often ended up with redundant code, and after getting it to work, I’d often pare back the unnecessary or redundant, to be able to do what I wanted in the least amount of code. (Like having set a margin property on a class when all I needed was padding). The ability to comment out a line of CSS with a keyboard shortcut and observe the effect greatly helped me learn the craft.

1 Like