Codepen VS IDE are there any major differences?

Hello everyone!

I wonder, if anyone uses IDE to write their projects. I use Pycharm, as this is what I’m used to. And I have noticed, that the code on codepen and code, which I run on the local server from my Mycharm, is displayed differently in the same browser.
For example - I’m trying to make a sticky navigation bar - it displays as a block on my local server, but completely breaks on pencode.

Other way around with smoth scroll property- works perfectly in pencode, does not, when I serve the page from my local server.

Could anyone advise me please? pencode is really uncomfortable for me, I need to find a way to create things in my regular IDE and than copy paste them across.

Well you have to go to settings to insert anything in the head.
Basically mess around with the controls, the fix is somewhere.

I think your question gets outside of html/css issues. Codepen does some things that aren’t visible to you- in other words, it’s great for a glorified scratchpad that can do a LOT, but it seems you never have full control.

A downfall to using it is also that you don’t practice building projects in a more standardized way - with appropriate folders, files, links in HTML headers and etc etc.

My suggestion is to use a code editor, and one that can handle HTML, CSS, and Javascript (for starters) for web development. It’s not just about control but it’s also practicing on tools that you could use in the real world. I don’t see professional web development being done on codepen. There are a great number of other benefits to using a good code editor. I see you’re using Pycharm. I’m not sure what that is and if it’s suitable. I use VS Code. It’s free.

We need to put our projects up for display for free code camp and then submit them. Codepen is convenient for that of course, but it’s not the only option. My suggestion is to use a website like This suggestion has two parts. One part is that you have a nice place to upload your work and github provides ways to make a webpage easily from a repository. The other part is that if you use github you can utilize git for your projects (git is a version control system). I don’t know you and this suggestion may be out of your comfort zone, but I do recommend it. Version control is a very common thing to use in development.

Sorry it’s a long answer- just that’s my two cents after a few years of tinkering :slight_smile:

1 Like

Also if you’re not sure why certain things aren’t working properly, make a post with the code and ask a question! :slight_smile:

Without a code example, it is hard to say why something is working locally and not on Codepen. But in general, if something works locally and you understand how Codepen works, there is nothing that should stop it from looking the same on Codepen. As already said, post an example and maybe we can help.

Codepen is great for displaying your projects, both to garner interest and show what you can do to prospective employers.

However, as others have said, it handles all your headers and links so if you put that in your pen you’ve doubled coded some things. Also make sure you are check live view, as that will show your page how it would display on it’s own rather than the codepen environment.

If you want to give us a link to your codepen, we can tell you the different pretty quickly.

@dcookwebdev All I know about pycharm is that it’s built for python. I like using

The equivalent of PyCharm for javascript would be WebStorm. Both of them are specialized builds of IntelliJ IDEA.

Thank you for your answers guys. I won’t be including the link just yet, because I’m changing things, so it would not make any sense.

Btw. Pycharm is full stack web IDE, not just python.
If you are a student, you get free access to all JetBrain tools. And they’re good.