if you think this is my version of tumblr - it is. highly customised to my tastes with absolutely nobody to comment, judge or (potentially) hear me. navigate using the column next to this, or just scroll and read everything i have to say.
banner from pinterest
aviation - the last shadow puppets
fonts from dafont and google fonts
pictures from pinterest and lovesick
UPDATE: 05/06/25 TIDAL GLOW UPDATE (may change in the future)
With the release of the Tidal Glow update, came with a new way to earn diamonds. Multipliers don’t exactly work anymore and everybody earns the same amount of money. Here’s a tutorial on getting straight A’s in all classes.
General:
English:
Computer:
Archery:
Potionology
Study Hall
Student Shop
Swim Spinner
Baton Swim
Basketball
• ⁃ Skip this class by pressing either locker or dorm on your sidebar. You get more exp and diamonds from doing quests.
CSS is probably going to be the most complicated thing that will cross your path on your journey to making your own personal website. CSS can either make or break your site, but there isn't a wrong way to style your site.
CSS makes it possible to style your site in all sorts of ways, such as adding animations, colours, backgrounds, images and even more!
There are 3 ways to do CSS, and I'll explain all of them.
Inline CSS is probably the worst way to style your site, and you should only really use it when you want to change 1 thing. It would become tedious to style everything induvidually only to realise you don't really like it. I'd say avoid this one.
You can do it like this:
<p style="color:pink">Hi!</p>
This is the easiest and best way to style. It keeps everything contained in 1 document and it's easy to go back and change anything you'd like. I use this one all the time!
Your CSS is then contained in the "Style" tags that go under "head" like in the example below!
You can do it like this:
<head>
<style>
h1{
color: pink;
}
</style>
</head>
You can link an external .css file to your website. This is great when you've got 200+ lines of CSS and it is confusing you. Just a reminder that you need to upload this file to Neocities as well.
You can do it like this:
This goes in the <head> of your HTML!
<link rel="stylesheet" type="text/css" href=".css file">✩For the sake of this tutorial, I will assume you are styling inside of your HTML file or have an external file linked!✩
Colouring is one of the easiest things you can do in CSS.
h1{
color: pink;
}
To colour text, we use this line of code. Obviously you can make this whatever you want. The H1 is a placeholder, if you want your paragraph text to be pink, you'd do this:
p{
color: pink;
}
html{
background-color: pink;
}
HTML is used whenever you want to color something sitewide, you can also use body!
You can also add images as backgrounds in CSS, just like this!
html{
background-image:url("path to your image here");
}
h1{
border: dashed;
}
There are much more borders than just 'dashed' so here's a list of all of them! Try it out, find the one you like the most.
You can also specify how thick or thin a border is:
border: dotted thin;
OR
border: dotted thick;
Dotted thin
Dotted thick
To round the corners of your border:
border-radius=5px;
To add images to your border:
border: solid transparent
border-image: url("image path here") 30 round;
border-width: 15px ← Change if needed
A div is a sort of bowl in HTML. It holds other code that you can style using CSS. This is helpful when you want to make something like a homepage and you need to make a lot of boxes. You can make one like this:
<div class="container">
<p>This is a container</p>
</div>
Your div can be called anything. I recommend giving it a name like "container" so you can style it as such:
.container{
background-color: pink;
border: dashed-thin;
color: white;
}
That CSS looks like this:
This is a container
Oh no! What if you wanted only the text to be white? Don't worry. It's easy to specify! Instead of putting: "color: white" into that container, let's do this:
.container{
background-color: pink;
border: dashed thin;
color: white;
}
OR
.container p{
color: white;
}
✩When referencing DIV's in CSS, we always place a full stop/period before the name of our div, specified in the "div class" inside of your body/HTML!
Example:
.(name of your div){}
OR
.(name of your div) p{}
When you code, you will realise that everything sticks to the left. What if you don't want that? There are 3 magical lines of code I will introduce you to, this is called centering with flexbox.
h1{
display: flex;
justify-content: center;
align-items: center;
}
OR
h1{
margin: 0 auto;
}
Margins add space around a div or thing in HTML. When we use 'auto' it will space it automatically in the middle.
.container{
margin: 24px
}
If you specify 1 value, in this case, 24 pixels, it will make it 24 pixels all around. You can use:
to specify a specific margin you want!
Padding does something similar to margin, but it just adds space on the inside.
.container{
padding: 15px
}
If a bright blue link isn't your style, it's very easy to change it. I'll show you how to change the colour on hover as well.
a{
color: pink}
What was done above is simply changing the colour.
But hover over that link and it's not pink anymore. We can use the :hover function in CSS to change that though.
a:hover{
color: red}
Now when you hover, it changes colour. In CSS, this combined code would look like this:
a{
color: pink
}
a:hover{
color: red
}
One of the easiest ways to find your fonts is by using Google Fonts. Just follow the instructions on their site and you're good! I use this literally all the time!
For Neocities, a lot of people use a layout generator. I use a couple. You can use some of the things we learned here to customise your layout!
CSS Grid GeneratorIf there's anything you'd like me to add or explain a bit more in-depth, ask in the main chat! I hope this helped! (❁´◡`❁)
HTML is the barebones of your website, it's usually what you want to tell people. HTML is mainly text, images, links and DIVs. That's what I'm going to go over in this tutorial!
You have to think of HTML is a bunch of those measuring cups you get when you're baking. There's a really big cup that holds all the little cups. So our really big cup is the <html> tag. Then they descend and hold more and more code.
Before you even begin coding, you absolutely need a code editor. This makes it easier to organise and get suggestions for your code. You can use the notepad on windows, visual code studio, the in-built Neocities editor or the one I use is Phoenix Code (this used to be called brackets!)
When you make your HTML file, you may see that it's completely empty. This is not helpful at all if you have no idea what to do. I recommend using a HTML Skeleton. This contains all the tags you could possibly need to begin coding.
Just a little tip! CSS is either contained inside of a <style> tag, a seperate .css file or inline with HTML. HTML is contained within a <body> tag. It's easy to get these two confused!
Text is the most basic thing you'll ever learn when doing HTML. It's also usually the first thing you learn. This will be nestled inside of your body tag. You may notice that you can write text inside of the body and it will appear, however, you shouldn't do this in case you want to style your text, for example: putting a border around it or moving it to the middle, using CSS.To write a line of text, the code is:
<p>This is a line of text</p>The correct way this should look inside of body:
<body>To break a line of text we use the <br> tag.
It's something like this:
<p>This is a line<br> of text</p>You can also make a space between paragraphs by making another line of text in a seperate <p> tag.
<body>You can make a heading using h1 all the way to h6 in a tag. H1 is your main heading and they descend as such.
<h1>This is a heading</h1>And that code will look something like this on your site:
✩Yours won't be in cursive! Mine has a CSS style attached to it!
Here's what this code will look like:
<h4>This is a h4 heading</h4>You can do Italic Bold Strikethrough Underlined or small!
Using: i (italics) b (bold) s (strikethrough) u (underlined) small (small)!
Images are what make your site unique. You can make your own using programmes such as Canva, Photoshop (Photopea if you don't want to pay, you can even load custom photoshop brushes!), Pixlr, Ibis Paint X and use sites such as Pinterest for inspiration.
So how do you insert images?
<img src="your image path here">Now you can reference your image in 1 of 2 ways:
Ensure that your HTML file and the image are in the same folder, and all you need to do is reference the file location. For example: "images/decorations/button". If you're uploading to Neocities, upload first and then say "rename" and copy the file path. If you're not using Neocities, place it onto whatever server or cloud you're using.
It must be stated that this way is WRONG and that in 99% of cases, you should not do this. But I will mention it here for that 1% of times where you can.
Right click on an image and say copy image address. Then in your img src="" you place that link in the quotations.
Why this is wrong:
When should you do this?
Links are handy little things you can use to take users to another part of your site or the internet. You can do this with this simple line of code:
<a href ="your link here">You can put any link inside of the quotations and it will work.
I talk more about in my CSS tutorial how to style links, and styling links on hover, so go check that out if you don't want a bright blue link!
I thought I'd mention that you can make a link a picture. This is super helpful when making a button other people can put on their site. If you're making a neocities, get on this ASAP!
↑Click it!
The code to make this button:
<a href="link to your site"><img src="your image path here"></a>☆A reminder that people do not have the direct link to that picture; make sure it has: https://yoursite.com/folder it is in/what the button is called.file type
A div is like a bowl that holds more code. We like putting things inside of divs because it helps with styling in CSS afterwards.
It's also easier to style a div that has a name, instead of a div that is just called div.
Div's that are just the singular div tag will be styled the same, so call them something as follows:
<div class="name"></div>
<div id="name"></div>
how to style with css:
ensure you have a full-stop(period) before the name of your div. so it'll look like this:
.name{
color: pink;
}
I hope this guide helped and explained some things for you! Thank you for reading!♡
Actually Writing
Description
Overusing Metaphors
Active Voice
Sentence Length
Strong Verbs
Show, Don’t Tell
Creative Writing & Fan Fiction
Plan.
Character Development
Senses.
Dialogue
Endings
Essays and School Work
this was rotting in my notes, might as well put it here.
Study Tips:
Languages:
Study Subjects:
Application Subjects
Misc:
Answering Questions in Exams
so i went though my gallery and i was looking at all my edits...explain why i have 400 of them???? excuse me? 400??!?!?
unrelated but i only felt like i had a writing spark writing my teacher!alex turner fic and i'm dying 😔 everybody please note that there is not a male power of authority in my life other than my dad and i am (mostly) mentally sound.
i had an idea for a humbug alex turner fic but i only wrote like 2000 words and it was 10 pm at night and i feel scared to go back. do not come to my town at 10pm at night. im coming
thoughts
any other writers feel like you could see the scene so perfectly in your head but then words fail you and when you eventually muster up the courage to come back it isn't how you described it?
idk if that's just me.