Codepen import?

Can I import all my external resources such as all my img, css, js, html files to codepen after editing them in webstorm…

Yes, but it’s a very manual process. You copy/paste your code into the relevant editor area and click the assets button at the bottom to add images.

If you’re using external libraries, you should be able to add them in settings.


Nobody said you’re forced to use Codepen. You can actually put your projects anywhere so long as the code can be viewed and the project runs live. You could push your project to Github (for code review) and then use the Github Pages feature to display the running project.

If you aren’t doing most of the work in Codepen, save yourself some additional work. :slight_smile:

1 Like

can i submit my private repository, i am currently working on portfolio project and uploaded it on my github @DaveC

Yup. What I do is add a link to the live project in my readme file. That’s purely so people finding the repo first can see that it’s live.

Then, when you submit to fCC, give them the live link. Anyone here will be able to see that it’s github pages. They should be able to back-track to your repo.

Haven’t had any issues or complaints with that.

1 Like

I am very new at git, can you tell me how to add a link to the live project in my readme file… Thanks again @DaveC

This might be a little tricky then, so I’ll try with an image walkthrough.

It all hinges on you having a working index.html file in your repo. Once you get to the higher-level projects, you’ll have to figure out how to render a build that you can deploy, but don’t worry about that for now (it’s not that hard either way).


Thanks @DaveC I totally learned something just by READING I was wondering where you put the pictures up on CodePen for your CodePen project. Clicking the assets button totally makes sense. I’ve been thinking

I really should just watch a tutorial on CodePen, but I’ve been putting it off.
OR at least read the docs :roll_eyes:

I guess I’ll put that on the agenda for today.
Thanks :thumbsup: :smile:
1 Like

Thank you brother means a lot @DaveC

1 Like

@DaveC Thanks I actually did this for my portfolio project for the Front-End certification. I went to CodePen and was like, “I’ll upload some assets, this will be cool” but it turns out you can only upload assets IF you pay for CodePen Pro. But thanks again for the GitPages tip, really great. If you want to check out my site its Let me know what you think :+1:

Doh! Didn’t realize that.

New project assets hack ( I just came up with… but I’m sure it’s already been thought of ): If you don’t have your own server to upload assets to, you could set up a github repo just for resources/images. Then, push images to this repo and get the raw link (should look like Paste your link into your pens and it should work.

Not sure what Github’s policy is on that use-case, but they do allow linking to raw assets, so it’s open until someone proves otherwise. (but don’t blame me if github gets mad at you. :stuck_out_tongue_winking_eye: )

1 Like

Nice hack :sunglasses: BUT I tried that and you can only link images with http:// and not with https:// for some reason. Check it out and see what you get, but I put links in to my GitHub repo where the images are and they wouldn’t load in CodePen. Maybe there’s some way to get https to work on CodePen but I don’t know of it

Hmmmmm. That’s weird. I don’t have a paid github account, so it’s nothing special there, but it does work for me. I did notice an extra piece on the end of my image urls, ?raw=true.

1 Like

@DaveC Cool I’m gonna try that and let you know if it works !!!

@DaveC Thanks man :+1: :fireworks:
It totally worked you were right it just needed the php call on the back end. I copied the address and it works now

Here’s another example to see. Go to this pin