CodePen not rendering stuff like my home server?

CodePen not rendering stuff like my home server?
0

#1

For my own development environment I figured CodePen wouldn’t be around to hold my hand developing in an actual environment, and didn’t use it for actual development for that reason. I’m running Ubuntu and just fired up an Apache server, used a text editor for all of my projects, visiting my FreeCodeCamp folder at 127.0.0.1/fcc/whateverprojectImdoing.html

I’m at the part right now where literally ALL I have to do is add sound to Simon, and everything’s golden. However, since I’ve started moving projects from text files into CodePen, I’ve noticed some weird behaviors.

I’ll point to an example here:

On my own server, everything displays properly. However, on CodePen, I can’t get it to change the size of the font of the buttons, regardless of the CSS or properties built into it. I think it has to do with dynamically generating the content with Javascript as opposed to hardcoding it into the HTML.

Has anyone else run into this? Or any other little kinks that CodePen throws at ya that you wouldn’t otherwise normally deal with?


#2

You need to check the browser console. (ctrl-shft-j) There are several errors.

Going from local to codepen can be a pain. Codepen doesn’t let you link to local files so lines like …

<link rel="stylesheet" type="text/css" href="ttt.css"></link>

… are going to fail.

All of the CSS has to be in codepen’s own CSS window. You shouldn’t have any link or script elements to get external CSS or JS files. And things should be loaded over https. And there is no need for html or body tags.

As far as resizing the button font, your CSS has:

button {
    background-color: #222222;
    color:white;
    border-color: #111111;
    border-radius: 5%;
    font-size: 35;
}

You don’t specify a unit for your font size. When I change it to:

    font-size: 75px;

it seems to work.


#3

If you want it to be exactly the same and use CodePen, then you need to use Projects, but you only get one on the free tier (I assume this is where CP is going to make most of its money going forward - even on the lowest paid level you only get ten projects). Otherwise, it’s as @ksjazzguitar says. Pens are sketches really, they aren’t designed for building full apps in & are fairly constrained.


#4

Thanks guys! I’m cleaning up my projects now.