I’m finding the editor in code pen rather frustrating. Although I love the way it works, I get annoyed at not being able to see more of my code at once and find myself scrolling up and down rather a lot.
I guess if I was a better coder, this wouldn’t be such an issue so my question is…
Does anyone else use an external code editor end then copy and paste the code into codepen when finished?
I like using Visual Studio Code and with the ‘view on live server’ option, it works great.
Codepen is great to get things started, but thats about it. As you stated VSCode with the live-server extension works great because your using a legit text editor.
If you know how to use external tools I recommend using them over codepen. I heard people submit some projects using github pages, rather than hosting them on codepen. (Idk if this is valid, or was ever valid so take it with a grain of salt hehe)
I personally prefer to stick to Codepen for FCC stuff (and other projects I’m not creating to be used in “the real world”). There’s several reasons why:
Easy sharing/collaboration. People can easily view your project/code and even fork it to help resolve issues.
No setup. Tooling is pretty simplified for this in VSCode and other editors, but for Codepen there really is none. Including External CSS/JS is much easier and less mistake prone. This rules out tooling and related stuff being a project issue which makes troubleshooting more difficult for someone trying to help out.
Simple/Free hosting. While it is a good idea to eventually get projects up on Github and possibly Git Pages, its honestly not as easy as snapping your fingers. I’ve done a project or 2 this way as well as using Heroku for a project and its NOT nearly as easy as building and sharing something in Codepen.
There are others, but I’m already getting pretty lengthy here
There are a couple ways to help with the Editor issues depending on your setup. If you have 2 monitors I’d suggest opening up a second window in Codepens “Debug” view and drag that to a second monitor. If you are on a laptop to can kind of do the same, but things are still somewhat cramped as you can see below:
So even with all that said, if you prefer to use VSCode/Sublime/etc and want to start getting stuff on GH and GH pages now, there is definitely nothing wrong with that and you’ll like learn a lot in that process as well. I spend 4+ hours a day at work in Sublime Text and it’s amazing what it can do with a few extensions/addons. Learning about that tool itself has helped me a ton.
;tldr Codepen is tailor made for FreeCodeCampers, but other routes are awesome too and there’s a lot to learn in the process. Try both ways and do what’s best for you.
Hi Nick, thank you very much for that lengthy but informative reply to my message.
I’ve yet to make the plunge into Github, but it’s pretty imminent I feel
I’m new to all code editors to be honest, but I have tried a few now and do like the VSC so I think I should stick with this, for the time being anyway.
I agree with you regarding the ease of codepen, it is great for the absolute beginner. Although I am new to coding, I am familiar with Wordpress and hosting. What I was thinking (as I only still have 1 monitor) was to build my FCC projects using VSC which will give me more of a full view of my code compared to codepen and then… copy and paste the code to codepen when finished. Maybe that sounds like a weird way to do things but I am really getting frustrated with the small coding window in codepen ( I know, another screen would help but at the moment that’s not an option) (limited space !)
I like using Codepen for live code items for my portfolio. They can be run independent of my site and an employer can see them run. Plus I can build snippets that I don’t mind sharing and don’t need a full blown repository for on Github.
But yeah, I don’t usually code directly in Codepen. I use Atom for that. I think Codepen should be part of a dev tool kit but not the only thing.
