HTML/ CSS/ JS importing links help (codepen vs repl.it)

So i have only ever used codepen.io for html. All i have to do on that is just insert my link into settings and its done for imported links. So since repl.it has no settings for importation, i’m confused why my attempt at importing links does not work correctly.

Here was my codepen (what its supposed to look like) --> https://codepen.io/Mike-was-here123/full/oGWxam/

Here is my repl (which isn’t importing/ looking correct) --> https://repl.it/@John_Nicole/weather-app-jn-the-works

Why doesn’t it look the same? I think its because i’m not importing bootstrap correctly. Any help?

While i’m at it, why is my background image (body in css) resizing with window size? Anyway to prevent this?

The two sites have different purposes: repl.it is a terminal emulation: you type some code in and run it. Ao for example you could write a function and check it works. It’s for small units of code, same as a terminal on your computer, or the browser console. Codepen is for sketches of UI, you get to write HTML/CSS/JS and display it all working together. repl.it is useful for the algorithms, codepen is useful for the projects, they don’t overlap in functionality - don’t try to do the projects in repl.it, you’re going to have a bad time.

Edit: my mistake, never seen it used for that before, I guess you lose a few of the niceties of codepen but should be closer to real environment so probably more useful

I wasn’t going to do projects in repl, just see if they work. Why isn’t bootstrap or anything working though? Is there anything i’m missing to make it look exactly the same? The same code should work both times right?

Hey, Repl.it ceo here. We’re actually a programming environment for a lot of stacks, languages, and libraries. So it’s totally valid to build your web project on Replit. In fact there are benefits for using Replit for HTML because unlike Codepen and others you can add multiple files and create links between them. That’s because Replit tries to serve a “real” website from the server without munging your code around or auto-including things for you (only thing we do is include a browserify script for your npm packages).

I think tools that auto-include CSS and JS, and transforms/fixes up the users HTML confuse learners to no end and whatever they learn isn’t immediately transferable to their local environment. That’s why we focus on simple, yet as honest of environments as possible.

@John-freeCodeCamp your right that bootstrap wasn’t loading and that’s because your HTML is not structured in the right way. There is no <body> tag, the <head> tag has a <div> in it and you generally want <link> in the header. I tried to fix things up a bit in my fork here: https://repl.it/@amasad/weather-app-jn-the-works-1

Bootstrap now loads fine but the site is still not rendering properly. Just spend sometime making sure that tags are closed and your html code is clean and then things should work.

3 Likes

Apologies for misinformation in my initial reply, I didn’t realise replit was fine handling that, and given that, it’s a better beginner environment than codepen.

I agree with you and thanks for your help. Its on the correct path, but some things still didn’t adjust (your example). Location blurred for reasons (did that manually through inspect)

@amasad

When I try to go to prep on mobile, the console take up the whole entire page and it won’t let me drag the code over to run anything, because it just exits the repl. Help?

That’s incredible that you value customer service, and your users, enough to take the time to reply here. Thank you! Heading over right now to take advantage of your half-off “Hacker” plan!!

I struggled with repl.it until I realized that it is much more like “the real world“ than are other platforms.
By using repl.it, I feel it enforces more good practices, as a newbie coder.

Thank you!

1 Like