How would one go about putting the html /css from codepen on a website

#1

Hello, total noob here. I just started with the feecodecamp and built a couple of the projects under the responsive html css category. It has been a fun and valuable learning process thus far.

I just realized that I can’t seem to really transfer that code over to a blank wordpress page and have it look like it does in the codepen app. This makes me realize I really have no idea what is going on.

Can anyone help me understand the relationship to code just created in codepen, and how to turn that into your own website?

Thank You!

#2

Hi there,

WordPress is for people who don’t really want to code so they provide themes and a block editor instead. To recreate something you did in Codepen on WordPress, you probably have to drastically change the theme or create your own, which is a whole new set of skills you have to learn.

If you have one page you want to put on the web, the easiest way is to learn how to use GitHub. Once your HTML and CSS files are on GitHub, you can activate GitHub pages.

Since Codepen does things for you like link your html and CSS files, use proper metatags in the <head> of the html, you’ll have to add that stuff before it will work on GitHub Pages.

#3

Hi cherylm,

Thanks for the reply! I take your point about WordPress. So leaving WordPress completely out of the picture, what would be the fist step in creating a website from code I penned on codepen?

I see you mentioned GitHub. So I believe I would copy the html and css code over to github, but then what? They host it for me on their servers? Isn’t there a way to upload the html and css code to any ‘hosts’ servers (using something like filezilla) and see the resulting webpage on my own domain?

What am I missing here?

Thanks!

#4

I suggest you set up your files in replit.com, if they work there you can then put that same file structure and have it anywhere

I suggest replit.com because you can have instand feedback if the things you have written work and doesn’t hold your hand like codepen
after that you can deploy them everywhere, like github pages or any service you want

1 Like
#5

I guess to clarify my question to the simplest form, I should ask this:

Once I code out a nice bit of HTML and CSS, how do I get this code onto my domain so that it displays like the website it was meant to be?

Anybody have any answers for this?

#6

HI @argoskier !

For just html and css you could use github pages.

That is what I used for my first website.

This would also be good practice for you to start using github.
If you plan on applying for jobs in the future than github is a way to showcase your projects and have perspective employers see your code.

Also, this is what @ieahleen was talking about for deploying a wesbite

It is a little confusing at first, but there are plenty of articles that walk you through how to deploy your first website.

1 Like
#7

Thanks for that reply. I think I’m getting it now. It’s sort of like there is a way that GitHub will host my website (on my purchased domain) for free?

Is that kind of accurate?

#8

Yes that is correct.

You don’t have to pay for hosting with github.
You have to create a github account, create a repo for the project, add your files to the repo and then create the github pages from the repo settings.

Then you can transfer your domain over to github.

I purchased my domain name through bluehost and they setup of the transfer for me. It usually takes a while for the transfer to complete. I think for me it took 24 hours but it varies.

There are articles, videos and the github docs that will walk you through all of this :grinning:

1 Like
#9

Ok. I get what you are saying now. Thanks so much for the help with understanding that process!

1 Like