Moving Codepen Portfolio to a real URL

Hi everyone. I’m very new to coding and my only experience with it is on FCC and Codepen. I was wondering if someone could give a general guide as to how I take my Codepen portfolio project and move that to Dreamhost so it can be a real website. I already registered my domain name with Dreamhost, but I can’t figure out how to add my code there and make my website go live. I know how to export my code, but I dont know what the steps are between that and actually getting the code to become a website, if that makes sense.

Yeah, that is an awkward transition.

First of all, in bottom right on codepen is a button for “export”. You can export the files in a zip format. When you unzip them, you basically have the files you need for a functioning web site. I seem to remember they were formatted oddly, but it should work.

Beyond that, if you know how to set-up a basic html file web page, you can just cut and paste the code in the correct places. A step further would be to put the JS and CSS in their own files.

Then you just have to find a place to host them. I don’t know dream host, but that should work. You just have to put them in the right folder.

I would look for videos like “build simple web site from scratch” and stuff like that. It’s not that hard, but it is weird at first.

Thank you. So what I have now is I took the “index.html” file and “style.css” file from the “src” folder that I got from exporting and uploaded those two files into the file manager on Dreamhost. When I type my URL (http://www.grahamwilliams.tech/) into my browser on my machine, I can see the HTML displaying but no CSS. If I put it into my phone browser (chrome) it give me a 404 error. Any ideas? I’ll post my code as well.

make sure that you are importanting the css file in the html with the correct file path

1 Like

When I inspect your site in the dev tools, I see that one of your CSS files is failing to load:

Screen Shot 2021-07-27 at 6.53.46 AM

Screen Shot 2021-07-27 at 6.54.05 AM

When I look in your html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Portfolio</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <!-- ... -->

I see that you are trying to load each of them in different places. Also, you have two heads?

@gawill94, as was pointed out you have two head elements, also two html elements, the `body element is incorrectly placed.

This happens because codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
When this rule isn’t followed the code that gets exported is incorrect.

On a side note it would have been a benefit for you to have asked for feedback on your projects on the #project-feedback subforum. There are syntax errors you carried forth in your projects that could have been avoided.

Yeah so that was a trial and error that I need to go fix. I tried uploading the index file from the “dist” folder and that’s where I got the two heads and the Codepen test suite up top still. I’ll go in and change it back to the “src” folder and maybe it will give it another try and have you look at the source code then if you don’t mind?

You nailed it. Most common problem Ive run into…TYPOS haha. I had it in HTML as “styles” and the file was “style”.

Thanks for the reply. Should I post every project in the feedback forum? I’ll always take feedback but I don’t want to be the guy who gets on everyone’s nerves with my jacked up code haha. But I’ll take all the help I can get at the same time

There are some that have posted all five projects at once and asked for feedback. It is a pain sometimes going through all five but it’s been done. And by pain I mean if the same issue has been carried forth in the projects it gets seen/mentioned for each one.

If you’d like to try something different, post your tribute page. Take the feedback and correct the issues and correct any of those issues that you may have carried forward into your other projects.
Then post the survey form. Again, correct any issues and see if you’ve carried any of those same issues forward.

Just a thought. You ask for the feedback the way you want.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.