Could you use CodePen to design an entire website?

Hi. I’m attempting to create a simple website; I would only be using HTML, JavaScript, and CSS I believe. I would also be using GlowScript to create interactive 3D graphics. I was originally using Brackets as my IDE, but I’ve found CodePen very easy to use because it automatically and quickly shows results, has a simple layout (HTML, CSS, JS, console, and preview) without a lot of extra stuff which I don’t think I need, it doesn’t have weird issues I’ve noticed with Brackets (commands like console.log() don’t work when I run them in JS files for Brackets) etc. However, I’m not sure if CodePen is intended to create an entire website with. For now, I think the site would just be around 7 pages with interactive graphics and associated text for each. Do you think I would run into issues if I tried creating it using CodePen? Thanks!

Hey @ebryski!
Welcome to the Forum!

You can use Codepen for one page for free and unlimited.
But for more than 1 page, you can use project, but for free version use can only one project.

1 Like

I do plan on using the free version. I only plan to work on one website, so I think I could narrow my question a bit by asking whether it’s reasonable to create a website using a project (which I’m guessing is a combination of pages).

You can make website only with projects.

It depends on what your goals are but if you’re just building the site for practice it’s definitely reasonable!

If you’re trying to build up projects for your portfolio it’s a good start too. I would look into porting the site out of codepen and into a github repository eventually and host it for free on either GitHub Pages or Netlify.

Hopefully it goes without saying that it’s not a reasonable thing to do if you’re charging money for the website :slight_smile:

3 Likes

Hey @dannyjamesfletcher!
Welcome to the Forum!

I would not suggest using Codepen for this, it’s an online playground, it isn’t meant for website building or hosting.

Use VS Code and create the site locally, then upload it to something like Netlify or Surge.

1 Like

After a bit of trouble setting it up, I managed to get VS Code with a Live Server working. I can then use the Chrome console to debug. The only issue I’m having now is the breakpoint feature doesn’t seem to work; it shows the red dot indicating a breakpoint was made but it skips past it as if it wasn’t.

EDIT: I realize that I can make breakpoints in the Chrome DevTools instead. It works perfectly now, and I also notice that some of the other DevTools could be very useful!

At the moment, I’m using Domain.com for the domain name seeciv.com and the hosting service (you can see a little test up on the site already). Would this be sufficient, or would something like Netlify also be important (which seems to offer more than just hosting service)?

Thank you for all your super quick responses!

Netlify is free (can be) and you can still connect a custom domain to it if needed.

But if you already have a host and are OK paying for it then I guess it depends on if you want to use any of the features of Netlify, like continuous deployment which will auto build and update the site when connected to a repository (i.e. you make changes locally, push to say GitHub and Netlify will update the site for you).

While I am okay with paying for the service (it is $3.75 a month) I would definitely prefer not paying and I’m okay with switching as I’m just starting out.

I don’t really understand what continuous deployment is, but I’ll try to see if they have features I would find useful.

I’m using Domain.com to get the domain name and to upload HTML and JS files. Do you think I would be able to keep the same domain and upload files as before using Netlify?

I don’t think I can explain continuous deployment better than what the docs already does. If you have not started to use Git yet, now is as good as time as any to start learning about it.

And here are the Netlify docs on custom domains

Awesome, glad you figured something out!

Where you host it now is perfectly fine. The only advantage of Netlify is that it’s free. As long as the site/app doesn’t need any backend code, Netlify would be a good choice for you and it’s ridiculously easy to use.

Technically you can do some backend stuff using Netlify Functions which are free too, but I’m not sure what your comfort level is with serverless functions so that might not be a great fit for you.

Continuous Deployment is just a term used to describe an app that is easy to deploy. In an agile software development lifecycle your goal is to deploy small changes to your app as frequently as possible.

Basically if you don’t have to manually move files from one place to another, and you don’t have to manually run commands on your server to get your app deployed then you have Continuous Deployment or sometimes called “Continuous Delivery”.

Netlify achieves this by listening to hooks (or events you can listen to) provided by Git and automatically pulls changes in from your Git repository hosted on GitHub.

Thank you!

Netlify definitely seems like a good option. The only thing which confuses me is how it could be free. How could Netlify offer free custom domains when everywhere else I could find requires you to purchase one, and why would someone choose a place like Domain.com if Netlify offers the same things and more without charge? I just want to make sure there’s nothing I’m misunderstanding, or if there’s some drawback to using Netlify.

They don’t offer free domain names, they offer free hosting.

You can change the name of the site, but it won’t be an actual domain name but a subdomain and it might not always be available.

your-site-name.netlify.app

2 Likes

There is one small issue I’m having with VS Code. Is it possible to use the VS Code breakpoints when using a live server? When I try, the red dot shows up, but it passes through the line as if it wasn’t there. I can use the browser console’s breakpoints, but they seem a bit hard to work with.

They have pro and enterprise plans as well, so the free tier is marketing. It’s a really generous free tier though

You can have a read at the docs

This is just plain HTML/CSS/JS, correct? If so you can also always just add a debugger statement in the JS code and use the browser to step through the code.

Thank you so much! The debugger statement works perfectly. It still runs it in the browser console, but for some reason now it is very easy to step through lines.

I’m going to mark this thread as solved because I don’t think I have any issues with my IDE any more.

I also did end up using Netlify.com and it is now up there at seeciv.com. I’m using GitHub and GitHub desktop with it and it seems very smooth.

1 Like