I coded in Visual Code. I was able to put it in Github and it works fine from GitHub pages, but when I copy my code into CodePen it doesn’t work the same at all. Is there an easy way to post my code challenge results? I had trouble using image file from external source. Had to do some research to find a solution to that, but CodePen still messes up my background image. I wish it wasn’t so hard getting stuff to work on CodePen that is so easy to do elsewhere. For one thing, to be able to simply put my image in a separate folder requires me to sign up for a Pro account. Can I simply submit my GitHub pages solution link?
I just went through my profile challenge timeline and I don’t see the Random Quote Generator challenge there at all. Has the name changed? That is what I was trying to submit through CodePen.
How about this? I read a nice little ‘tutorial’ on GitHub https://github.com/zenware/FreeCodeCamp-wiki/blob/master/Using-Github-Pages-for-your-front-end-development-projects.md
It purports to be able to use GitHub pages. So why not simply submit challenge solutions that way? Here’s my working GitHub page https://silvanet.github.io/testFamousQuotes/
See if you can figure out how to put it on CodePen and have it work.
I tried copying the index.html page into the html editor, the style.css page into the css editor, and the script.js page into the js editor.
First, CodePen html threw some error notification. Then I couldn’t use the image file because CodePen wants me to get a Pro account to be able to create an images folder.
I put the image on Imgur, but CodePen doesn’t use it as a background image.
That’s a lot of hoops to do something that is really quite easy on GitHub pages enabling me also to do local coding. CodePen may be great, but it is also extremely complicated and difficult to work with.
Oh, here’s the NotWorking CodePen code. https://codepen.io/silvanet/pen/gKvJYL
You aren’t required to use CodePen for your projects. You just need a live version of your project and publicly viewable code.
1 Like
Everything else is working fine. Did you click on the GitHub pages link?
So it’s Imgur that is blocking the page? I don’t think so because it actually shows up, but not as background. Anyway, it does work on GitHub pages fine. I’m OK with something eventually not working. While researching I saw many pages that I’m assuming once worked when they were sent in, but two or three years later don’t work even on CodePen. I suspect that might be because APIs changed. Thanks. One person responded to my post that I’m not required to use CodePen for my projects and that all I need is a live version and publicly viewable code. I do have a hosting service. Any tips on making the code publicly viewable?
Imgur started blocking CodePen a couple years ago.
Thanks. I’ll try to use GitHub pages when I can then. Just out of curiosity, I saw a lot of people recommending using DropBox (that didn’t work), and Cloudinary. I tried that one and it does the same thing as the Imgur link. I get a band across the top of the page with part of the image, but not as a background. I’m assuming the code is alright since it works fine on GitHub (but what I did there was create an images folder and place the image in it. Here’s the style code that doesn’t work with either Imgur (but you said it may be blocking it - although I don’t understand how or why they would block only part of it and let a band show), or Cloudinary.
Here’s the style code:
html {
background: url(https://res.cloudinary.com/silvanet/image/upload/v1529512384/samples/animals/myTest/mymountainpic.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You may want to consider buying hosting, and getting your own domain. Honestly having your own playground (I’m using shared hosting now but plan on getting a vps site soon for practice. having your own playground really helps.
Codepen Pro is fairly low cost, then you can host images there.