There are two things here:
If all your friend needs is a basic website, then you both benefit. Great. All you need to know is how to move from CodePen to files and where / how to host them.
If your friend wants to be able to frequently change things on their website (e.g. edit the text, add news, add special offers…) then they’ll need a CMS (Content Management System). WordPress is the most popular but there are others. Feel free to dive into WordPress if you want to help your friend but it’s a different kind of beast. You will not really get to practice your front-end skills.
It might be that your friend would be happy with a basic website now and will want to migrate to a CMS later. In that case you’re back to case 1. Go for it.
So what do you need for development?
-
a text editor for programming such as Sublime Text, Atom or Notepad++ (the last one is Windows only)
-
make a folder for your project and store your files there. You need at least one HTML file and one CSS file and optionally some JS files. Name the main HTML file index.html so that people don’t need to type it in the url.
-
You need to write the whole HTML file instead of just the body. Use Front-End Checklist to check what you really need in the head (basically all the high importance items). Make sure you have a link to your CSS and links to any libraries such as bootstrap (your css link should be last). Here’s an example to get you started. Change the language if the site is not in English. Obviously edit the title and the name of the css file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title of the page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- content -->
<!-- optional links to JS files -->
</body>
</html>
See @LisaWillCode’s answer for the syntax for JS file links.
To load your website in your browser, just do File Open and select the HTML file. Use the developer tools in your browser to see the console. In Chrome the shortcut is Cmd+Opt+J on Mac or Ctrl+Shift+J on Windows and Linux.
Once your website is ready, you need to upload it somewhere. I’m not very knowledgeable about this but here are my thoughts: Your friend needs to get involved in this as the url will reflect on the company and any cost will need to be paid by them.
Ideally they would need to register their own domain name. They will need to find a name that is not already taken and that they are happy with. There is an annual cost that varies with the extension (e.g. .com, .net…) and the provider.
Quite often you can host a few pages with the domain name provider. Alternatively you can host the website elsewhere. You’ll need to do your research. Free hosting? Cheap hosting with a reputable provider? A static site shouldn’t cost much to host. For example Amazon AWS estimates that hosting a static website would cost between $0.50 a month for low traffic to $1-3 a month for higher traffic.
Whatever you do, make sure that your friend has ownership of the live website. Imagine you host the site on your GitHub account or on some free hosting service in your name and then something happens to you? They would lose all control of their web presence. You’re dealing with someone’s business so make sure things are handled professionally even if you do it for free.
Best of luck in this. Hope it works out.
