Issues with converting projects from codepen to github

I’m in the process of porting all of my projects from Codepen onto github, which has gone successfully, save for a couple of issues with modals and the use of google fonts.

Google Fonts

See here for an example:

Codepen - http://codepen.io/JamesRiall/pen/RRVrqK
Github repo - https://github.com/JamesRiall/Noughts-and-Crosses

I’m using Lobster google font, which works fine in codepen, but doesn’t work when I put it into the head of a separate HTML file. Here is my code for the head of the separate HTML file outside of Codepen:

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="game.js"></script>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />
  <script src="https://use.fontawesome.com/3708dac087.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="game.css">
</head>

Have I set out my head correctly for this project? Why isn’t Lobster font working?

Modals

For the same project, the modals which I use for player selection of noughts or crosses or when a game is concluded isn’t working in the files from the Github repo when I run the page in browser, but does work in Codepen. Would anyone be able to take a look at the code in my repo and help me with getting the modals running again?

Thanks!

I had this same issue while moving my pens to my github. Try playing with the order of your links and scripts. For example, try putting your CSS after the other links.

In Codepen I use options section to add Google font link tags rather than adding them directly to the html section. Options / html / Stuff for . I export pen as zip and transfer it to Github. No problems with Google fonts that way.

Looks like your are missing https: in you fonts link.

You forgot to add bootstrap js:

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

And put your script tags before </body> tag.

1 Like

Great, thanks all. This is part of the reason I’m moving everything off Codepen and working on my projects locally then pushing to GitHub - I feel like relying on Codepen too long insulated me a little too much, made the setup too easy and didn’t allow me to figure out how to best set up my workflow and dev environment for new projects.

3 Likes

I just started porting all my codepen stuff to GitHub pages last night too.

Are you using Codepen’s export function? It provides everything an a bundled zip and you can commit and push that to GitHub and all the asset links are handled for you. My modals and font-awesome buts all made the transition smoothly.

2 Likes

Nope, I stupidly didn’t realise codepen had that function - would have made things much easier!

I’ve spent most of this weekend not actually working on projects, but setting up Sublime text and associate plugins, learning more about Github, doing a course on Sass, exploring package management, module management and task running rools and a whole bunch of other stuff which will help me develop better projects outside of the confined of Codepen. Has been a fascinating couple of days of learning!

1 Like

Can you please tell me how to get to the Export function in Codepen? Perhaps I am stupid or am not using the correct version, but I can not find it anywhere. Please put me out of my misery!

Sure:

2 Likes

Thank you for the great answer. I can’t believe I kept missing the button. (sigh)

I have converted everything up through the “Wikipedia Viewer” to Github over the last few days. I feel that may of the projects just work better on Github than on Codepen. Also, on Github I can have my resources (like images) with the project, which allows for cleaner code and which I can not do on Codepen without paying for an upgrade. I have also completed the “Twitch” project locally and pushed it to Github.

My question is this: Since I prefer the Github versions and may update them over time (particularly the Personal Profile), but don’t want to have to also update the Codepen versions to keep them in sync, how do I tell whoever is checking the projects (when I request my Front End Certificate) to look on Github and not Codepen for these converted projects? Can I just go back to each project, click the “I’ve completed this challenge” button and provide the Github URL? Will they then only look on Github (I hope), or will they have both URLs and not know which one is the one I want them to check? Or, even worse, will it ignore the Github URL and leave them with only the old Codepen URL?

Any ideas? I can’t be the first person to do this.

I’m pretty sure that the projects aren’t even looked at till you finish all three certs and go for the final phase (maybe not even then?). At that point you could probably email or contact one of the leaders through the forum or Github. I have moved my projects to github as well, and this is my plan in case I ever finish them all.

That’s what I did and now in my profile Link > View Project points to my GitHub version of the project.

Thanks, jenovs, that sounds like the way to go, then.

exporting the pin as a zip, and then uploading the repo worked wonderfully

1 Like