Where to build website once I know how?

1

Ok, so this is probably a super basic question, but I can’t find a concise, or really even any actual answer for what I am needing.

So my friend has a live site that is getting traffic for his business, but he wants to redesign the site. I told him I was working through a coding training course (freeCodeCamp) and that I might be able to do it. I feel confident that I can write the code to build everything he wants. What I don’t know is where to build it and how to structure it.

Things that you may need to know to answer:

  1. He has a domain
  2. He has a hosting service
  3. He currently is using a wordpress site for a basically static page, but he wants a multiple page site similar to burts bees site.
  4. It is hosted with dreamhost

Things I need to know and don’t:

  1. How can I edit code offline or in a way that wont effect the live code?
  2. Is there a way to see the complied code before making it live? If so how?
  3. I have used an FTP before to put files into a wordpress theme, but I’m not sure how to translate that into a non-themed wordpress site, or even how to use a domain without wordpress. So any information on how to edit/upload files without using wordpress would be awesome.
  4. Do I use separate files for the javascript vs html vs css portion of the code? (It is in separate windows in codepen) If so how?
  5. Where can I learn more about these types of things so I don’t have to feel so dumb next time?

I hope this is not a duplicate question, but I have looked for a couple of days now without any luck.

Thank you to anyone who is willing to help!!

1 Like
2

Hay there. I’ll not cover everything, but I’ll answer your questions the best I can.

Google loves you

First off the reason you probably cant find an answer to your question is because you are asking more than 1 question. Have you tried googling your questions individually?

CodePen does not

Second, before working on your firends site, you should practice converting one of your projects from a CodePen project to a project on your local machine. Get rid of your dependency on CodePen as soon as you can. CodePen is good for helping new developers get started and for prototyping but its not how its done in the real world.

Without CodePen, how will I show my website to the world?
Google free static web hosting or use GitHub pages (I recomend GitHub pages)
But before this, get used to working offline, on your local machine

How to work offline and not affect the live code

All websites are simply just files. HTML, JavaScript, CSS, PNG, files etc… You create the files on your local machine, modify them to suit your needs and then when you are pleased with the results, replace the files stored on the server with the ones on your local machine.

If your’re unsure where to even start with working offline on your local machine, well, just Google it and if you still cant figure it out, I’m sure the lovely people of FreeCodeCamp would be more than willing to help you.

How to see compiled code before making it live

I’m not sure what you mean by compiled.
You can double click on the .html file on your local machine and your browser will open it and render it. If that does not work, try clicking and dragging the .html file to your browser,

Uploading without Wordpress

How this is done depends on what service you use to host the website. Uploading to GitHub pages different than uploading to DreamHost. After you get comfortable developing offline, try Googling how to upload a simple static website to DreamHost, and then if you can’t find the answer on google, ask for help.

Here is a link I found by googling “dreamhost static website”

Separate files or not

Yes, absolutely. You should keep your HTML, CSS and JavaScript in separate files.
How does one do this?
This question is essentially the same question as “How do I edit code offline”

Where can I learn more about these types of things

  1. Extrapolate a single concise question
  2. Google it
  3. If google fails, ask for help. FreeCode camp is a very helpful community though sometimes questions go unanswered. You can also try StackOverflow, though I have found StackOverflow to be VERY hostile towards new developers

Besides that, just keep working through your projects and learning all you can. As you go through this process, problems and issues will arise that you’ve not previously experienced. Figuring out how to solve these problems and work through them is how you’ll learn.

I know just how overwhelming it can be for a new developer. So many different things all thrown at you at once. Try taking them one at a time.

6 Likes
3

Just practice. Honestly, I’ve never taken a course on hosting, domains, or such. Everything I’ve learned by just screwing around making websites and hosting others.

It appears you have never actually created a website on your computer without codepen. So, let me help you get started. @collapsingNeutron gave a great explanation about all websites being files, but let me give you a little more information on where to start. Create a new folder anywhere on your computer. Inside this folder, you will want to create three files, index.html, and a css and javascript file. It is important that you name your HTML file index.html, because when you upload it to a server, it will look for a file named index to give to the person who views your site. A good starting point would be like this:

/some_directory
  index.html
  styles.css
  app.js

You can name everything else however you want, but you will need to link them together. Open up your index.html file in a code editor. I would suggest notepad++ or Visual Studio Code, both are free. Inside index.html, put the following:

<title>My Site</title>
<link rel="stylesheet" type="text/css" href="styles.css"><!-- this grabs your stylesheet-->

<p>Hello World!</p>

<script src="app.js"></script><!-- this grabs your scripts. this should be placed at end of html file -->

This is a good starting point. You do not need <head> <html> or <body> tags as they are unnecessary. You don’t need a doctype declaration for local testing, but you should probably put one at the top before you upload it.

You can add all your stuff with these three files. To view your website, open up your index.html file with your web browser. If you don’t know how to do that, just right click and hit open with > google chrome. Practice doing several of your codepen sites locally like this.

Put the staging/test code in a separate directory. If you want to edit the actual wordpress site he has now, you can download it with ftp and run a local WAMP server.

If you are just opening the files on your desktop, you should be able to see everything in your browser before you upload it to the server. If you are running a local WAMP server, you can see everything on localhost before uploading it.

4 Likes
4

+1 for going into detail about offline editing. I suggest trying to convert a very simple CodePen project you made into an offline project to start off.

2 Likes
5

Your issue is actually very simple, you just haven’t looked at it the right direction.
You build the site yourself. Then host it.
Get your pages working on your local computer.
If you are working with word press set up a XAMP setup. Easy download and setup for testing.
Just search for wamp server if you have Windows or lamp server if you have Linux.

And you may not even need that if you just want static pages.

Just build your html files on your local pc. Then once they are ready send them to the host.

6

Thank you so much for your reply. It really helped me understand how to start in the right direction! I love how helpful this community is, and you’re definitely one of the people who makes it such a great place!

Thanks again!

1 Like
7

Totally love this reply! Thank you for putting actual code and examples in with your responses. I haven’t gotten a chance to try out the code on my local pc, but I’m confused as to how the code in index.html knows where to get the app.js and the style.css files to incorporate them.

Again thank you so much for your reply and making this community one of the most helpful I’ve found so far!

1 Like
8

You’ll probably get overwhelmed by the amount of offline editors soon. Also, if you ever want to work on projects with others, start learning how to use github. Like asap.

1 Like
9