woodlouse's profile picture

Published by

published
updated

Category: Web, HTML, Tech

where i get my stuff - layout building resources (code, fonts, graphics)

hi!! welcome to my blog :D

ive been working on this for a little while now so if you like it, kudos/comments would be really appreciated

and if there's anything wrong with something in here or you have a question, please comment it and i (or someone else who could help) will answer it :)


contents:

1. code
2. fonts
3. graphics


CODE

Grid Layout (like im using)

https://blog.spacehey.com/entry?id=1724

i owe everything i know about css grids to this blog post!!! i cant even remeber how i found it but it has probably changed the trajectory of my life. it explains it very clearly and in rhyme for any bards out there.

i found using grids such a game changer for making my page more accessible on different sized devices as they adjust to the screen width!!! it might be making my page a tad slow but idgaf its worth it


General CSS

https://www.w3schools.com/css/default.asp

w3s has basic versions of pretty much everything css u could need on there

literally j google (other search engines are avaliable) any code u need ull probably be able to find it!! most questions i have i find answered on stackoverflow.com 


Live Profile Preview

generic profile editor - i dont like to use these but a lot of people do so i'll put them in anyways!! you can test and try code without having to edit your own profile

https://tommypanzram.neocities.org/

https://nein-mc.neocities.org/csstest/


Inspect Element

100% the easiest way to find what you need to write is using the Inspect/Developer Tools function in your browser - i've always done this but some people arent into it/find it too confusing so each to their own

i was going to write out a whole explanation w screesnhots but then i realised it was probably much easier for everyone if i just embed a v helpful youtube video instead lol!! i can still do a blog trying to explain it very simply if you want,, just ask and io might be able to get around to it c:

Noah's whole youtube channel is v helpful,, i've got his + more youtube channels linked below


YouTube

the easiest way to get started,, especially if you're a visual learner!!

these are my favs that i got started with, there's plenty more out there (but most of them are just tutorials on how to copy-paste code from the layouts section :p)

How to Edit Your Spacehey Layout (Top 5 Codes) - Cryptic Jasmine

SPACEHEY TUTORIAL FOR BEGINNERS - Muimex

SPACEHEY LAYOUT TIPS - Muimex

Beginner's intro to CSS with Spacehey - Noah (playlist)

 


Code Snippets

the snippet tag in the layouts section has a bunch of little bits of code to spruce up ur profile a little bit


some stuff designed for carrds is good too!!! you might need to change around some parts but its simple enough c:





Confidence!!!!

u can do this!! it is 100% normal to find the idea of writing ur own css/html really daunting but i promise its really not that bad once you get started :D




FONTS

Google Fonts

fonts.google.com

so many!!! the amount does make it a little hard to find good ones tho tbh,, theyre definitely there tho

favs from this source:

Jacquard 12

Fredericka the Great

DotGothic16

Honk


Web Safe fonts

these fonts work on most devices without needing to link to a font file, just put them into font-family. They're simple but that might be all you need in life

Arial

Verdana (default spacehey font)

Tahoma

Trebuchet MS

Times New Roman

Georgia

Garamond

Courier New

Brush Script MT (please do not use this font it's so awful)

Comic Sans MS


i probably missed a bunch so sorry!!

the ms gothic fonts will work on any microsoft device:

MS Gothic
MS PGothic
MS UI Gothic


Custom Fonts

if you're not a fan of any of these, you can always upload your own font file to an image host and import it.

tutorial for that: https://www.w3schools.com/cssref/css3_pr_font-face_rule.php






GRAPHICS

 note: im not going to go over stamps, blinkies, pixels etc. bcus theres already   loads of sources for them on here! 


Loading Screens

i mostly get these j by searching for em on pinterest,, it takes a bit of digging to find good ones but its worth it

favs from this source:


"Old Web" Headers

i am a very big fan of using these as backgrounds for nav .top (like my current profile!)

i cant find any real collections for them so im just going to link a pinterest board i made of them!! pinterest is good for graphics in general tbh :D

!!just discovered my link doesnt work,,,, im gonna find something else dw!!!

favs from this source:




Online Now Icons


https://www.glitter-graphics.com/online-icons

biggest collection of online icons ive ever seen, i have spent hours looking at these

favs from this source:



https://www.pimp-my-profile.com/graphics/myspace-online-now-icons.php

a lot less choice but less overwhelming lol

favs from this source:



https://www.myspacegens.com/handler.php?gen=onlinenow1

v similar to last one

favs from this source:



88 Kudos

Comments

Displaying 9 of 9 comments ( View all | Add Comment )

Moon Ω 🏳️‍⚧️

Moon Ω 🏳️‍⚧️'s profile picture

question: how would i add the custom online gif to my profile? been trying to find something that works for a while, but to no avail


Report Comment



personally, im using:

.online {
content: url("URL HERE");
}

hopefully this one works for you!!

by woodlouse; ; Report

Baranka

Baranka's profile picture

Thank you so much for the compilation of material. I wanted to start making my own layout in the future so I will definitely use this information


Report Comment

ℜ𝔬𝔰𝔢𝔟𝔢𝔩𝔩𝔢⁺‧₊˚ ཐི⋆♱⋆ཋྀ ˚₊‧⁺

 ℜ𝔬𝔰𝔢𝔟𝔢𝔩𝔩𝔢⁺‧₊˚ ཐི⋆♱⋆ཋྀ ˚₊...'s profile picture

Thank so much! I wasn't sure where to start. I'm not entirely sure what I want to theme mine as, so it'll probably be blank for awhile lol


Report Comment



AW THANK U <3 good luck with making ur profile :D

by woodlouse; ; Report

marxd0

marxd0's profile picture

This is very useful! I'll use it for building my profile :D


Report Comment



im glad! its looking great at the moment c:

by woodlouse; ; Report

MyKif™

MyKif™'s profile picture

you're seriously the best!


Report Comment

Faoil

Faoil's profile picture

This is officially the best blog ever, can't wait to consume all of ur cool knowledge once my brain is working


Report Comment



bhahaha thankuuu :DD

by woodlouse; ; Report

𖦹 maybug

𖦹 maybug's profile picture

THIS IS SO AWESOMEEEEE OMG
i remember watching noah's videos when i first joined spacehey


Report Comment



BHAHAHA real his spacehey videos are bangers

by woodlouse; ; Report

vaquera 𖤐 vampyre

vaquera 𖤐 vampyre's profile picture

This is great!! thanks so much for making this !!! Hopefully this can encourage more people to learn HTML + CSS :D


Report Comment



thank youuuu!!! hopefully yeah!!

by woodlouse; ; Report

tigertorment

tigertorment's profile picture

fredericka the great


Report Comment



fredericka the great

by woodlouse; ; Report