Website coding can be really daunting to learn or progress in. Whether it's the method of learning, the attitude, or maybe just a few pieces of fundamental information needed, this page should help you out.

If you already know most of this, then consider contributing or linking your own resources in the comment section! Message me on discord @podruff, you will be credited up here and beside your contribution unless you wish to stay anonymous.

General resources

• "Learn How to Make Websites!" by Neocities
• "Your first website" by Mozilla

Have you no experience in coding? If so, keep reading. Otherwise skip to the next section. Now, I won't teach you coding here myself because dozens of such resources have been made before, but instead I will teach you how to start learning. It is better to learn learning than to just depend on one source like myself.

Here is a list of basics for you to get a grasp of:

1. HTML fundamentals
2. CSS fundamentals
3. website file structure
4. code editors

1. HTML

• Neocities' own guide, INTERACTIVE! Super cute, uses the mascot kitty in little comics to teach you.
• W3schools, very good for understanding the basics, has decent documentation.
• Neopets guide, fun and goes through each basic concept in lessons.
• Mozilla docs, many things compiled here. Goes further than JUST HTML, like how to actually make a website. May be difficult to navigate.

2. CSS

• W3schools, like with their HTML guide, very good for understanding the basics.
• Mozilla docs, easy to understand basics in a minimal number of pages.

3. File structure

• Mozilla docs, basic info on managing files.

4. Code editors

• Mozilla docs on code editors.
• Disable AI features in VS code

If you find yourself stuck after learning the basics of website coding, my biggest advice would be to just create things. While you work on coding projects, you will actually start remembering how to do this and that, how to colour text, what structure to put your elements in, etc.

You could either start with something like HTML codes with styling for websites like toyhouse, forums, online games (pokefarm Q, wolvden) that all accept HTML and maybe even CSS.

You can also immediately start working on a website. Boot up a code editor, make a folder for your website and create yourself an index.html and maybe a few folders to include more content. Focus on the current moment of coding that website and keep an attitude of fun with it. Consider the cool content you can add so that it doesn't start feeling tedious.

Even if you do not plan to publish any of these, make sure to still keep them saved somewhere. Then, if you ever start feeling demotivated, you can look back to the things you made in the past and see the progress for yourself.

While coding, take full advantage of your browser. Search up every little silly thing you are having trouble with or would like to know... Even if you can't figure out what something is called, you can still string together a sentence of words that can bring you to what you seek on a search engine. I, for example, have a lot of trouble remembering what actual things are called, like selectors in CSS, and the actual things and their values that you use to style things.

While you work on your projects, you will slowly begin to memorise things better. It will not take long for you to remember what you need to write to change the colour of text, for example, or how to center a div.

Inspecting elements

Knowing how to inspect your own and other websites' code is important. This lets you see how your code is displayed, and how each style rule affect each element. You will also be able to access good bits of information for debugging CSS and JS, such as the styles, debugger and memory pages. Make sure that your browser supports it. Most modern desktop browsers do, so likely yours does too.

To inspect a web page's source code, right-click and in the dropdown find "Inspect" or "Inspect elements". If you are on a Firefox-based browser, you should be able to just right-click and then press Q.

Try it on this page! Beside the main web page, you should see something like this:

On the side of personal homepages and artistic webcoding, styling is extremely important. The way you style your website is basically the main way you express yourself on your homepage, aside from the content itself. Thus, here I have collected some of the most important CSS properties for styling your website nicely, and if you look at my main CSS file here: /css/universal.css, you will find that pretty much nothing else is needed. These are things for you to do further research on!

color: text colour

font-family: the text font used

font-size: the size of text

font-weight: weight of font, regular or bold for example

font-style: italic for example

letter-spacing: as it says

line-height: space between lines of text

text-align: alignment of text

text-transform: can change the text in an element all uppercase, lowercase, or capitalized, etc.

columns: displays text/inline elements in multiple columns

background-color: colour of the background, will exist behind a background-image if defined

background-image: can be a url(#), linear-gradient(0deg, #000000, #ffffff), radial gradient, etc.

background-position: position of background-image

background-size: size of background-image

background-attachment: with this you can attach the background to the viewport instead, like my sidebar banner.

display: how your element is displayed [example]

• static: "default", elements push each other
• relative: like static, except children of this element will use it as a reference for their own position when for example they have position: absolute
• absolute: basically floating above the other elements but attached to the page
• fixed: like absolute, but attached to the viewport instead

border-radius: rounding of elements

border: a line that appears inside an element

outline: a line that appears outside an element

padding: space inside an element

margin: space outside an element

overflow: allows you to add scroll or clip items that reach outside an element

object-fit: for making an image fit it's width and height differently

width: an exact width of an object that cannot be any bigger or smaller, avoid using on layout elements such as a sidebar or content element

max-width: the maximum width that an element can have, when the viewport is smaller than this, the element will also become smaller

min-width: the minimum width that an element can have, when the viewport is larger than this, the element will also become larger. If smaller, the element's width will not budge.

height, max-height, min-height: same as above but with height

aspect-ratio: gives your element an aspect ratio, I use this for the image thumbnails in /photos/ which are all 4/3 like most camera sensors

text-shadow: shadow for text

box-shadow: box shadow around the element, use inset at the start of the value to make it go inside the element

• blur(px)
• brightness(%)
• saturate(%)
• gray-scale(%)
• hue-rotate(deg)
• sepia(%)
• contrast(%)
• invert(%)
• drop-filter()

backdrop-filter: same as above except applies the filter to pixels behind the element instead of the element itself.

-webkit-text-stroke: an outline for text, looks best on large bold text

I highly suggest enjoying other peoples homepages. Treat them well and read and engage with the content that they present. Doing so will certainly 1) widen your eyes in the name of what you can do with a website, 2) give you inspiration for things to do, pages to add, etc. and 3) give you something to look up to and stay motivated.

Inspiration can also be found elsewhere. Once upon a time I looked at some medieval manuscripts and found enjoyment in the way that they looked. I then mimiced the style for my website index at the time. Such inspiration you might find in all kinds of things like textbooks, videogames, rooms, buildings, nature, newspapers, all kinds of things. Do not limit yourself to the mundane design of the modern web unless that is what you want.

If you find yourself to be an artist or have fine editing skills, you can also try making some cool assets for your website! You might find inspiration in the process of making these, or they may help you achieve your sought-after look for the webpage that a normal HTML element can't do. Otherwise you can also just use more images, like adding a background image to buttons or titles and such, or perhaps dividers.

Here I have listed a good few common problems you may find yourself facing. Feel free to contribute especially here!

Incorrect display property

CSS general

If you find style rules not showing up on your element, the problem is likely the display property. This property will mainly be one of the following: inline, inline-block, block, flex, grid or none.

Many style rules such as transform and text-align will not work on an inline element, and things such as align-items and justify-content will only work on flex and grid elements.

The webpage is suddenly FUCKED UP beyond belief

HTML general

This is likely because of a missing <>, </> or endquote "". If you are using a code editor, try to find the line marked with red.

Blood pressure is abnormally high

general

Take a break, man... Look up some cute kitten videos and I promise you, you will find the answer to your problem later. Perhaps once you come back, try working on something else first.

CSS rule doesn't work

CSS general

Immediately, try to add !important; to the end of it.

Chances are that it is being overwritten. Go up a bit and see if you can find the inspect section, it should help!

If it still doesn't work, then it could be that you need a more specific CSS selector because of a previous specific CSS selector affecting that element.

These are only a few among a gazillion possibilities.