Creating a good looking, mobile-compliant, and FREE website is simpler than you think! This tutorial will hopefully take the mystery out of web development by boiling it down to the bare basics: copy/paste, edit, drop files in folder. That's literally all it takes :)
Introduction
Before we get started, a few disclaimers.
Artists: just use ArtStation for your portfolio. It's got a great layout and discoverability, and while making your own site is fun, I don't think anything I can teach here will be more convenient than ArtStation. Unfortunately, a similarly awesome platform doesn't exist for other disciplines.
Paid options, or ad-supported options, are great! They allow for far fancier layouts and site behaviors than this tutorial covers, and if you're a visual person can be easier to use. They can be cost prohibitive though, and you're pretty much at their mercy as far as layout and maintenance. If you need complicated functionality, or intend to update frequently, they are going to be the better bet. If you choose to go that way, consider WordPress, Squarespace, or Wix.
Since we will be using templates and doing a lot of copy/pasting in this tutorial, there are limits on what you'll be able to create. It should be sufficient for most needs, but not for all. My home page was made with this sort of process, as was my How to Become a Lore Buff website.
With that out of the way, here's what you'll need:
- a plain text editor. Windows has Notepad and Mac has TextEdit, but I recommend Notepad++
- a Github account (don't make one quite yet, though)
- A general idea of what you want your website to contain.
Website Creation Basics
At their most basic, websites are made from HTML (hypertext markup language), which is used to write words and tell your browser how they should be displayed. One layer of complexity above that is CSS (cascading style sheets), which allows for fancier display options for text and images than HTML alone. On top of that are various programming languages, like Javascript, that perform complex behaviors or pull in and modify data on the fly. The only thing we'll *need* to edit is HTML, though you may want to touch some CSS at the end if you're feeling adventurous.
If you've ever used ** and _ _ to bold or italicize text on Slack or Discord, you've already used a markup language! HTML works in much the same way: you type one thing to start formatting, then type it again (but with a backslash) to end the formatting. For example:
<p>begins a new paragraph, and then you close it with </p>
"Tags" are any sort of formatting, such as creating a new paragraph, making a list, or turning a word bold. I'll provide a cheat sheet of the most common ones at the end of the tutorial, but mostly they'll already be in the template we'll copy. You'll want to make sure that any tag you open is closed, otherwise things might look weird or break (notepad++ is great because it color codes all this, making it very easy to see).
You can write websites by hand entirely in HTML (and back in the day we did), but luckily there's no need to. Instead, we will take one of the excellent templates at W3schools.com and edit it to our needs. W3 Schools is an unmatched resource for learning how to make websites, and I highly recommend it if you want to learn more. For now, we'll keep it simple.
Getting Started
First, create a folder somewhere on your computer, and name it something logical, like Website2022. Your new website will live here while you're working on it. Then, create a folder inside Website2022 named Files. Any sort of images or downloads you want to have on your website will live inside there.
Once that's done head to the Templates page at W3Schools and use the Demo buttons to check out the different site templates. Ignore the names (like "catering template" or "fashion blog") and instead look for the basic structure of the site. Do you prefer the navigation menu on the side or at the top? Do you want a big splash image? Dark or light theme? Pick the one that's closest to your vision. If there's a specific section you don't want (like a contact form or location map), that's ok, we can easily delete it later.
Found one? Great!
While looking at it in the demo page, right click somewhere away from an image and select Save Page As (or your browser's equivalent). While saving, make sure you set the file type to Webpage Complete. Name the file index.html and click Save to save it to your computer. (Make sure the i in index is lower case)
For this example, I'll use the Blog Template layout. I'm going to make a portfolio for Mary Shelley, and the tiled layout and relatively image-light look works well for writing samples. But this tutorial will work just as well on any of the other examples on W3S.
Navigate to the folder where you saved the example site and open index.html in a text editor (NOT your web browser). You can do this in Windows by right clicking and selecting Open With. I highly recommend Notepad++ for this, as it color codes the different types of content and makes everything super easy to see.
Inside this file, the webpage is arranged from top to bottom. As we talked about before, each HTML element has an opening and closing tag (<p> and </p> for example). As you're editing the site's text, you'll want to make sure you stay between the tags. If you delete things, make sure you delete the tags as well.
The page has one additional element that is very handy: comments! They're contained between <!--- tags --> and tell you where different types of content begin and end. This is extremely useful if you want to delete or repeat whole sections. As you make your changes, you may want to leave your own comments. They're a lifesaver if you need to come back and make more changes later.
Customizing the Site
The very first thing we want to do is edit the title attribute, which is at the very top of the file. This is the site name as it appears in the browser tab, and should be pretty short. If you're making a portfolio website, your name should probably go up here.
Next, scroll down a little until you see the <!-- Header --> comment. Just below it will be the title and subtitle (if applicable) of your sample site. Change it to whatever you want it to say (for a portfolio, this is probably your name and career track). It helps to have both the text editor and the example website open at the same time, so that you can see where each element will go. In my example, there's a <span class="w3-tag"> that makes the word "unknown" have a black background. I think it looks neat, so when I'm replacing the text I'm going to make sure to keep it, and change the word inside to something I like.
Hit save (you'll want to do that often). Go back to your Website2022 folder and double click index.html to open it up in your browser and admire your changes. Part one complete!
The exact next steps you take will vary depending on the sample page you've chosen, but what I do below should be relevant regardless. You may just need to do it in different places or in a different order.
Setting up your Style Sheets
Before we go any further, let's take care of some prep work. At the very top of your site, you'll see two or three tags that look like this:
<link rel="stylesheet" href="index_files/w3.css">
This is your CSS, which determines how the site will look. Rather than using a local style sheet (saved on your computer and then uploaded to the web), we'll use the default one that's already hosted by W3S. Highlight them all, and replace them with the following:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
This ensures that all the styling elements are available to you, regardless of what originally came with your template.
Changing Images
I want to change out the sample picture with one of Mary. To find where it is in the file, I do a search for words appearing near it (in this case, "my name"). A little up from there is code that looks like this:
<img src="index_files/avatar_g.jpg" style="width:100%">
The img is self explanatory: it says that a picture is coming up. src stands for "source," and tells the code where to look for the picture. Style="width:100%" says that the image is going to be 100% of its original width. This is the tricky part, as we don't want an image that's smaller or bigger than what's used here. You can open up the original example image (located in your Website2022 folder, inside another folder named index_files) and see how wide it is, then resize your image to match. Save it inside Website2022 and name it something that you'll remember.
Then, take that index_files/avatar_g.jpg in the file and replace it with your new name and location, for example, Files/Shelley_Easton.png. Make sure that you include the file extension after its name (for example jpg or png). You can also use files hosted on the web for this by putting their full URL in between the quotation marks (for example, <img src="https://www.imgur.com/image.jpg" style="width:100%">)
Once the image is replaced, I also replace the text below it. This is simple, just highlight the old text and type in your new content.
Deleting Sections
Since we're making a writing portoflio, we don't need the "Popular Posts" or "Tags" part of the sample site. The comments in the file tell me exactly where each begins, so I'm going to highlight both sections and hit the delete key.
I also want to delete the Previous/Next buttons in the footer. They're not specifically called out with comments, but the footer itself is. I see two tags for <button>, one for previous and one for next, with a bunch of formatting info inside the tags. Highlight, hit delete.
Every time I make a big change (like deleting or adding a section), I save the site and refresh my browser preview. That way, if I accidentally mess something up, I can catch it right away and just hit undo a few times, rather than trying to figure out what I messed up 30 minutes ago.
Editing, Continued
The next thing I'm going to do for Mary's page is to edit the "blog" sections into info about her novels – the equivalent of writing samples for writers, or projects for other disciplines. This works pretty much like everything we've already done before.
First, I identify where in the file this section of content lives. It's helpfully labeled with <!-- Blog entry -->
I don't want to have an image here, so I delete the entirety of the <img> tag and its contents.
I do want to have a title, so I change the TITLE HEADING placeholder text to read "FRANKENSTEIN".
I don't want these sections to have subtitles or dates, so I remove the entire next line of the tile (everything between the <h5> tags).
Then, I change the placeholder description paragraph to, well, be a description. I decided that I want a second paragraph here, so I type <p> then add my content and then close it off with </p>.
I do want to keep the [Read More >>] button, but don't want to keep the Comments count. I find where that is in the file, and then delete that entire line (it's easy to highlight the whole line in Notepad++ by just double clicking).
Once again I hit save and preview to make sure I didn't muck anything up. So far, so good!
Since Mary wrote more than just Frankenstein, I copy all of the code for this section (from the <--Blog Entry–> comment to the next one) and paste it right below. Then, I change the text in there to be about a different book. I repeat this process a few times until Mary's got a nice set of samples. I delete the remaining placeholder blog posts.
Making a Second Page
But wait, I hear you say, that "Read More" button doesn't actually take me anywhere! Right you are, that's a completely fake button. Let's make it real, shall we?
First, make sure you're totally happy with the basic look and feel of your site, and any elements that will be persistent across the entire site (like the menu, header, and footer).
Then, copy index.html and save it as a different name. I'll call mine Frankenstein.html
Open up the new file and delete all the sections that you do not want (in my case, the other novel entries). Then, edit the remaining content to contain what you want. I'll add an excerpt from the book, since this is supposed to be a writer's portfolio.
I'm also going to switch the "read more" button to say "Go Back", since we need a way for the reader to return back to the home page. The button is right below the main text, and easy to find if you look for the READ MORE>> text.
Now, all I've got to do is link the two pages. A link in HTML is written like this:
<a href="where_you_want_the_link_to_go"> Link Name </a>
I want the whole button to be a link, so I find where the <button> tag starts and put <a href="index.html"> in front of it. Then, I find where the </button> tag ends, and put </a> right after it. index.html is the name of our main file, and it's in the same folder as our new page, so I don't have to specify its location, just its name.
Then, I open up index.html and repeat the process, except with <a href="Frankenstein.html"> and the READ MORE button.
When I hit save and open either page in a browser, I can navigate between them by clicking that button. I repeat that process for the other novels for which I made entries on my main site.
Downloads
Want your readers to be able to download something, like a PDF of your writing samples or your resume? Downloads are exactly like links, but instead of taking you to a new page they take you to a file.
You can format the download link however you want (copy/pasting some button code could be neat), but at its most basic, here's what you need to paste into your site:
<a href="\Files\DownloadFile.pdf">Download Link Name</a>
In this example, your file is named DownloadFile.pdf and it's located in the Files folder that you set up previously for site. Just replace that file name with whatever your file is really called.
Adding Other Content Sections
If your chosen template doesn't have all the sections you're looking for, it's (relatively) simple to add them from other templates. Let's say that I want to add a contact section for Mary. As before, I look through the templates at W3S to find one I like (the Portfolio one, in this case) and save the page to my computer. The name doesn't matter as much here, since we're only going to be grabbing bits from this template.
Open up the saved page and find the contact section (helpfully commented <!-- Contact Section --> ), highlight it all, copy, then paste into the appropriate portion of your site. The comments are going to be helpful here as well, since they tell you where different types of content begin and end, which can affect how your new content displays. In my example, pasting it just before <!-- Footer --> is going to have the background of the contact section extend the entire width of the page, while pasting it right before <!-- END w3-content --> is going to have it match the width of the rest of my body content.
Saving and previewing often is going to be your friend.
Menus
The template I chose doesn't have a menu, but some others do. Menus, essentially, are fancy links. They can take you to a specific section of the page you're already on (called an "anchor") or to a totally different page, like we did above. Let's take a quick look at the Band template menu to see how it works.
This particular template actually has two menus. <!-- Navbar --> is the regular navigation bar, as seen on a browser, while <!-- Navbar on small screens section is for the menu on phones, tablets, or other smaller screens. As you're editing, you'll want to make sure that you make the same changes to both of these.
Each <a> element is one button. The only thing you'll need to change is the name of the link, and where it takes you. If you want to have it take you to a whole new page, you'll want to fill in the name of the page, for example, <a href="Frankenstein.hmtl"> (leave the rest of the stuff in the tag though, it controls how the button looks).
If you want it to take you lower down the existing page, you'll want to first find where you want it to take you. Then, you'll need to give this section an ID. If you're using a template that already has per-defined sections you can jump to through the menu, do a search for id= the word inside the following quotes will be the section name, and you can change this to whatever you want. If your page doesn't yet have these categories, or you want to add more, just add:
<div id="SectionName">
to the very top of your section, before any other content.
Once you've named your sections, go back up to the menu and change the content inside the <a href=""> element to have the name of your section, preceded by a # sign. <a href="#portfolio"> or <a href="#contact"> for example.
Remember to change both the full screen and small screen menus, and delete any buttons that you don't end up using.
Testing
Hopefully you've followed along and have yourself a nice website. Before we put it up on the web, you'll want to give it a full final test.
Open your site in as many browsers as you've got installed. Resize the windows, making them super narrow or wider than a single screen. Zoom in on them. Since we're using pre-existing templates, everything should hopefully behave as intended.
If something weird does happen, here's a few gotchas:
- Make sure that every element has a corresponding closing tag, especially the divs (<div> and </div>).
- Check that you've spelled everything correctly, and that the names of all of your files are capitalized in your html the same as they are in the file name (Photo.jpg is not the same as photo.jpg).
To the World Wide Web
You're all done with your beautiful website and ready to put it online. While there are many, many paid places where you can do this, we're going to go with a free one: Github Pages.
Go to github.com and click the Sign Up button in the top right corner. Enter your email and pick a password. When you get to the Enter a Username field, stop for a second.
What you pick here is important: it'll appear in the address of your new website, so make sure that it matches what you want the site to be called. I'm going to name my new account DaryaWebsiteTutorial, so my new website's address is going to be DaryaWebsiteTutorial.github.io.
Click through and complete your account registration. Select the free tier when prompted, and you'll arrive at a frankly rather overwhelming page. Don't worry, you won't need 99% of this stuff (unless you're an engineer, in which case you're probably already very familiar with Github). What you're interested in is this Start a new repository section up in the corner:
In the name your repository field, type the account name you've chosen .github.io. For me, this is DaryaWebsiteTutorial.github.io. Make sure that you're making a public repository, not a private one.
Then, click the Create a new repository button. You'll land on an even more overwhelming looking page.
This time, all you need to do is click the upload an existing file link in the blue section. When you click that link, it'll take you to a page to upload all of your files. Open up your Website2022 folder on your computer, select your index.html, any other pages you've made, and your Files folder and drag them into the box at the top of the github page. You can add a message to the commit changes log to remind yourself later what you did (very useful if you're going to be updating this a bunch) and hit the commit changes button.
Give it a few seconds, and your page is now live!
Here's mine: daryawebsitetutorial.github.io
Now that your website is on the web, repeat the testing step. Does it work on your phone? Your iPad? Your friend's phone? Once you're satisfied that everything made it from your computer to the internet in one piece, feel free to start sending the link out to everyone!
Updating Your Site
If you need to change things, do so locally on your computer, and then repeat the upload step in Github. To do this, log back into github and go to your account. Your website repository will be on the top left of the screen. Click it to open it. Then hit the Add File dropdown and select Upload Files. This will take you back to the upload file page, where you can click and drag files from your computer.
Appendix: Common HTML tags
| <p>Paragraph </p> | Creates a new paragraph |
<a href="url">Link</a> |
Designates the text inside as a clickable link |
<br /> |
Adds a line break |
<hr /> |
Adds a horizontal line spanning the width of the element or page it's added inside |
<h1>HUGE heading</h1> |
H1 through H5 lets you make increasingly smaller headings. The headings on this page are H3. |
<em>Italic</em> |
Makes the text inside italic ("em" stands for "emphasize") |
<strong>Bold</strong> |
Makes the text inside bold. |
<ul>Unordered List |
The <ul> tag starts and ends an "unordered" list, which is just bullet points. Each <li> tag is one bullet point in the list. |
<ol> | The <ol> tag starts and ends an "ordered" list, meaning that the first <li> tag will be labeled 1., the second 2., etc. |