CodePen Projects have URL's like this:

https://codepen.io/waldo/project/editor/ARwpxa

That will take you to the Project Editor. None of the files will be open in the editor area though, and CodePen will take a stab at guessing for a file to open in the preview. For example, if there is an index.html file, that's what we'll open.

But let's say you'd prefer to share your project with a specific file open in the editor. You can! you pass a URL parameter like...

?open_file=css/style.css

Note the complete file path including / there.

Likewise, you can tell the preview area to open a specific file. Perhaps you have multiple HTML files and prefer a non-default one to load...

&preview_file=about/about.html

Note that I used an & here. That's just how URL parameters work. To start URL parameters you use a ? (for the first one), then to use multiple you separate them with &.

Finally, you can specify what percentage of the window you'd like the preview area to take up. If you'd like it 50/50, you'd put:

&preview_height=50

Here's an example all together:

https://codepen.io/waldo/project/editor/ARwpxa?open_file=css/nasa-site.webflow.css&preview_height=80&preview_file=index.html