banner saying make your own website, I'll help you, almost from scratch, quick! and effective and the website's url jakechirak.com

CODING: THE INDEX

Now that you have all your files uploaded to the right place, I'll show you which parts of the code you can edit to make your website more personal!
I recommend opening the live demo page somewhere, to have a visual idea of what you are modifying.
First, hover and click on the “EDIT” link of your index.html page.
This will lead you to the raw code page of index.html.
hand pointing right "Theme" will change the appearance of your code, not your web page. I'm using "tomorrow night 80s" in this tutorial if you want the same colors to follow along more easily!



Now, let's start changing and explaining things.
<title>MY AWESOME WEBSITE</title> hand pointing left
<meta name="description"
content="MY GALLERY">




<meta name="keywords"
content="art, drawings, MY CONTENT"> hand pointing left
arrow drawing This is your website title. it will change the name displayed on the web browser tab! For exemple, this page title is "IT'S FREE REAL WEBSITE!"

arrow drawing These are keywords (separated by commas) you can put on your website so it can easily be found with search engines. I recommend using your alias/nickname/artist name as a keyword.




<style type="text/css">
body {
background-color: #f7dcf2; hand pointing left



background-image:url("LINK TO YOUR BACKGROUND IMAGE"); hand pointing left



background-position: center; hand pointing left
background-repeat: repeat; hand pointing left
}
</style>

arrow drawing The background color of your website. This website will help you to get the HEX code for your chosen colors.


arrow drawing This is where you change your background image. (you can upload it here) If you just want a solid color and no background image, delete these lines (background-image, background-position, background-repeat).

arrow drawing "center" will center your background image, and "repeat" will repeat it, useful if you have a pattern background. If you want one single image covering the background, use
background-repeat: no-repeat;


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Varela+Roundhand pointing left&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Varela Round', sans-serif; hand pointing left
font-size: 18px; hand pointing left
color: #b12957; hand pointing left
}

a:link {
color: #ff81cb; hand pointing left
text-decoration: underline; hand pointing left
font-weight: none;
}

a:visited {
color: #ff81cb;
text-decoration: underline;
font-weight: none;
}

a:hover {
color: #ffb5e0;
text-decoration: underline;
font-weight: none;
}

a:active {
color: #ff81cb;
text-decoration: underline;
font-weight: none;
}
.smallerfont {font-size: x-small}
</style>

arrow drawing This is where you change your page font. I used the "Verela" font from Google Fonts. You can choose whatever font you want here.* (more explanation on how to find and use a font below)
Font-size is how big you want your font to be.
And "color" is the color of your font. For example, on this page, it's purple!
Reminder you can get hex color codes here!

arrow drawing The a:link part determines how your links will look. On this page, the links are red and underlined. I recommend using a different color from the regular text.
In the "hover" part, you can make your links change color when you mouseover!
font-weight: none; can also be
font-weight: bold;
if you'd prefer the font in bold, same for italic, and so on.

warning drawing *Help on how to use Google Fonts:
First go to the Google Fonts page. Choose a font that suits you.
Let's say for example you want "Young Serif", click on the font. Then click on "select regular 400". Then click on the top left of the page on the bag-looking icon "view selected families", it will show you the code for your font. Copy/paste that code and replace the original font code in your page (see above), and change the parts in "font-family" that are different in your font of choice, like the name of the font (or the serif, if it's sans serif or not) (if you don't know what the fuck serif and sans serif are, check this article!)



Now let's get back to the code...
<table width="0" border="0" align="center" bgcolor="#fbeaf8"> hand pointing left
<tr>
<td><img src="URL OF YOUR IMAGE" hand pointing left alt="top banner" title="top banner" width="800" height="180"></td> hand pointing left
</tr>
<tr>
<td><table width="800" border="0" align="center" cellspacing="10">
<tr>
<td bgcolor="#FFFFFF"><div align="center">navigation &gt; HOME | <a href="https://YOURWEBSITEHERE.neocities.org/gallery.htmlhand pointing left">GALLERY</a> | <a href="https://YOURWEBSITEHERE.neocities.org/about.htmlhand pointing left">ABOUT</a></div></td>
</tr>

arrow drawing The bgcolor here is the background color of the table where all your stuff will go. It's currently light pink.
arrow drawing In "URL OF YOUR IMAGE", put the url of your banner. It should be 180 in height and 800 in width (you can use a different size banner, but if you do, don't forget to change the width and height values in the code) as usual, I recommend uploading files here.

arrow drawing The last step on this part of your website would be to change the urls of your gallery and about page. Just change "YOURWEBSITEHERE" to however you named your website!

<td><div align="center"hand pointing left>Hello, welcome to my weird little space!<br>
My name is [WHATEVER] and I draw [THE WORSE THINGS YOU COULD IMAGINE] hand pointing left<br>
Hope you enjoy my stuff!<br>
<br>
<img src="URL TO YOUR IMAGE" alt="home image presenting your website!" title="home image" width="500" height="500"><br>

Be warned! This page contains mature content! (Or not, it's your website!) <br>
<br>
<table width="0" border="0">
<tr>

</tr>
</table>
</div></td>
</tr>
<tr>
<td><div align="center">FRIENDS/FOES:<br>hand pointing left
<table width="0" border="0" bgcolor="#FFFFFF">hand pointing left
<tr>
<td width="231"> <marquee behavior="scroll" direction="left" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()">
<a href="https://jakechirak.com/" target="_blank"><img src="jakechirakbutton.gif" style="padding-bottom: 5px;"></a>
<a href="https://neocities.org/" target="_blank"><img src="neocities-vaporwave-stamp.png" style="padding-bottom: 5px;"></a>
<a href="https://jakechirak.com/howto/makeyourownwebsite/makeyourownhome.html" target="_blank"><img src="makeyourownwebsitebanner.gif" style="padding-bottom: 5px;"></a></marquee></td>
</tr>
</table>
</div></td>

arrow drawing Okay this part is more fun! Between <div align="center"> and <img src= just write a little description of your website. You don't have to align to center as <div align="center"> says, you can also align to left or right. Test around. Add <br> to create a line break.

arrow drawing Like I said before, "URL TO YOUR IMAGE" should lead to the url to your image. Be wary of the size of the image (500x500, it can be changed like any image here.)

I added a warning for mature content, but obviously you don't have to keep it. Same goes for the images, you can put one image, two images, or no images at all.

arrow drawing The FRIEND/FOES part is where I put links to other websites, you can put stamps or funny gifs, or just remove it if you want!
bgcolor="#FFFFFF" is the background color for this section. If you want to add another banner after the other ones, just copy this part of the code and replace the parts in ALL CAPS:
<a href="YOUR LINK " target="_blank"><img src="THE LINK TO YOUR BANNER" style="padding-bottom: 5px;"></a>

warning drawing You'll notice something called target="_blank" in some links. It means your link will be opened in a new tab. If you don't want this to happen, you can set it to target="_self"

<td><div align="center"><span class="smallerfont">All art on this website is &copy; Copyright [YOUR NAME]hand pointing left, 2023. Website design made by <a href="https://jakechirak.com/" target="_blank">Jake Chirak</a>.</span></div></td>
</tr>
</table></td>
</tr>
</table>



<p align="center"><a href="#top">Back to top</a>hand pointing left
</body>
</html>

arrow drawing This is the very bottom of your page, where I added a little link to my website (after all, I helped you?) You can change the sentence if you prefer (and you should replace [YOUR NAME] by your own, but keeping a link to my website is appreciated!)





arrow drawing Keep the "back to top" link, it's very useful when a page is very long. You can change the sentence but don't break the link.

warning drawing I'm skipping the parts of the code I don't think you have to touch. You're of course allowed to experiment (that's why saving multiple files in Notepad for testing is useful!) but the parts I skipped are either just coding that would take too long to explain, or things that aren't worth changing (it would be too much pain... for you!)

warning drawing DON'T FORGET TO SAVE YOUR PROGRESS! The "save" button is on the top left of the page. Alt + control + S works as well.

warning drawing Be mindful that everything you save from the neocities raw code page will go online! If you want to finish everything before going live, save it in Notepad instead and only use the neocities page to have the pretty code colors that make your life easier!

a line to separate different parts of the website

START CODING:
hand pointing right NEXT : the GALLERY page
the LIGHTBOX options
the ABOUT page
TIPS

NAV
a line to separate the navigation from the rest of the links
LIVE DEMO

HOME

LETSGO!
Which page do you want to start coding?

  • START
  • >INDEX
  • GALLERY
  • LIGHTBOX
  • ABOUT
  • TIPS
  • Back to top