Portfolio opportunity

So i’ve been taking FCC and codeacademy courses over the last few months and an opportunity has come up that i think will benefit my portfolio a ton. My friend just bought a place to host personal training sessions and make it his own business on the side. I think with my knowledge i can design a basic website with info about him and the place and hourly rates and whatnot. The thing is i don’t even know where to begin to actually make a real website. So far my designing and practicing has all been through codepen which i feel is like training wheels. I guess my question is how do i make a website from scratch and then put in on the internet for real world use?? Or should i just stick to mock websites to add to my portfolio for now?? Thanks for your help in advance! :slight_smile:

P.S. I’ve been recommended to use wordpress by some but I thought wordpress was like pre-built websites and such? I wanted to design the site myself so i can showcase what i’ve learned. My understanding is that wordpress is just a cookicutter service that offers pre-made layouts. Or do you think going with wordpress is a good idea for now? Thanks again!

If you want to build website from scratch - design, write HTML,JS,CSS for front-end,use CMS as Joomla, Drupal, Wordpress, and do some work for back-end develope - deploy your website on a host, maybe tune e-mail feedbach with data base (MySQL…), write PHP etc - so I think first of all you need to know what issue your site need to solve. Another words - why your friend need this site? What reason?
Maybe you dont need to use all web stack for develope and you will write just front end and deploy it and that is it.
So…anyway you must use Text Editor like SublimeText, Atom etc. If you need CMS then look at Joomla, Drupal, Wordpress - choose one of them. If you need save a web site user data look out solutions for your goal. At one message you can’t just get answer for all your questions.
Sorry that my message is so long and maybe it isn’t include practice advices but I think that never wiil be one straight answer for all goals.
But one think I sure: take this project and try to do your best. It will be much better then all online lessons and courses.

WordPress is, at the most basic level, just a PHP wrapper over a database, designed to make it easy for a user to write content for a website (primarily blogs, but any website). So you install it, and install the database, and it gives a user an admin panel that lets them, write content which gets saved in the database and made available to the front end (the bit you would be doing). It doesn’t specify what the design of the front end should be, you would just be styling that, building a normal website (using the template structure WordPress specifies). It is very easy to get started with, following through the official guides should very quickly give you an idea of how it works.

Wordpress makes life easy. Make it pretty with your own CSS. Add plug ins for site backups, social media stuff, galleries, payment gateways… and more…

Maybe you don’t want to force a blog website into a few pages for this project.

Read up on:
A text editor (sublime, atom…)
A repository: github.com
registering a cloud server pointed to the git repository: heroku.com

You’ll have a real website at www.whatevername.herokuapp.com
register a dot com: whois.com and point that name to the cloud server.

There’s other services if you like.

To see things without the training wheels you can make a folder and put index.html in it (there’s a few things you add to the html that codepen doesn’t display…). You can link to JPG, PNG, GIF, CSS and JS files. There is no code language except javascript, because those are pre-processed by a server before it is sent to the browser. That’s where the rabbit hole goes deeper: setting up that server or using a hosting service that sets up a server for you.

1 Like

You can use any plain text editor to write your HTML, CSS and JS. If your computer has Windows, you can use Notepad (Don’t use WordPad or MS Word, because those are not plain text editors; they add formatting, which will interfere with your code.)

Two text editors specifically for coding are Notepad ++ and Sublime Text, both free to download.

You should create separate files for your HTML, CSS and JS. Keep them together in one folder. Link to the CSS stylesheet in your HTML head section like this:

<link rel="stylesheet" href="styles.css" type="text/css" />

Put the link to the JS file right before your closing body tag:

 <script src="functions.js"></script>

Click on the HTML filename in File Manager to view it. It will load in your browser.
Right-click on your browser and select Inspect Element to use the Developer Tools there for debugging.

Find a free website hosting service to upload your files to. (Wix and Weebly are two, but I don’t know if they offer template-free sites.) If your friend buys a domain name for his business, it may come with free web hosting.

1 Like

I think people are too worried about failing. Don’t worry. It’s like when I teach music composition - people are afraid to compose because they are afraid of writing bad music. But the only way to learn to write good music is to write bad music. A lot of it.

Build web sites. If you export your codepen to a zip file, you can see a basic file structure for a web page. After that, the only thing left is to host it somewhere. You can host static pages for free on github. At the very least, I’d build a portfolio page there. I’m sure there are plenty of youtube videos of people setting up simple pages.

No, Wordpress is not what you want. It’s like you want to learn to be a chef and your friends are telling you that you should go to the frozen food aisle and look at all the TV dinners they have. WP is for people that don’t know anything about the internet to build a web page. The main reason it might interest a developer is if you want to become a WP developer, that is someone that goes beyond the simple, paint-by-numbers WP creations and actually changes the code, javascript and php, customizing it more. There are developers that do that for a living. But the drag a drop, WP websites - anyone can do those. Building web sites on WP will not teach you how to be a developer.

Just start building sites. Build simple ones. Build bad ones. Build bad ones then delete them. Just build.

When I create the Files for the JavasScript and CSS files do I name them functions.js and styles.css?
I guess I could name them PeanutButter and Jelly as long as my href’s use that file name?

There are two things here:

  • what you need: the experience of making an actual website that you can add to your portfolio

  • what your friends needs for their business

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">
    <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">
    <!-- content -->
    <!-- optional links to JS files -->

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.


@Zip yes, you can name the .css and .js files anything.

1 Like

Yes, as Lisa points out, you can name them anything, but the most common is script.js and styles.css. Behind those would probably be filenames of index or main. Obviously if you have more than one js or css file you can give them more meaningful names. It’s also common to put them in a sub directory so they don’t clutter the root directory.