how to make a neocities from scratch❗ || explain-y tutorial ting

hello everybody my name is Monty plier and welcome back to Five Nights at trying to get my friends to understand how neocities works um and that's exactly what I'm going to

do I'm going to try and explain how to make your own Nia cities for people who have like probably never coded anything ever in their lives

so I'm just going to start from the top then I will run through a um a little site that I made just for

this video and let's hope it goes well so first off obviously we have to make a new cities I don't feel like logging in and then

login I'm sorry logging out and logging back in but basically all you need to do to make an easy is have a username an email and a password that's all the only thing that I have to say warning is that

make sure that the username you pick you actually like for whatever reason it breaks Neo City's um search engine and things like that if

you were to let's say yeah you changed your username and then I changed my home page it would just not

uh refresh or update here ever again this picture right here so no matter what you did it would just be that same old home page I'm not sure why it does that but that's just the thing it tells

you that when you try and change your username right here see it is not advised to change username so just make sure that you like the username you're going to choose if you need to change your

username for whatever reason most people honestly just make an entire New York City's account and then um blink

or redirect the old one to the new one so with that out the way if you've made your new cities now you need something

to actually code so either have a laptop or some sort of tablet something that you can type on click things um

you will also need a code editor new cities comes with a code editor I do not use it it's I mean it's not the worst thing if you

can't for some reason get something else but it's like you will have to type here not know what it looks like press save and then press view every single time

you make any sort of small update to figure out what's there and what's not I personally use brackets it's right here brackets or bracket actually brackets so that's correct if I

use brackets and I really enjoy it because one it comes with live preview so whatever I do here over here in Brackets also shows up here in real time

um and also it comes with um a lot of suggestions so let's say I type in R then it gives me all of these things that I could try out that I wouldn't

have known off the top of my head so I printed like brackets for that reason and if you do use brackets also like I am you will need Google Chrome only for the live preview for whatever reason it

won't work with Opera but it does work with um Google Chrome so Ah that's all so basically as I said you need to this account you need brackets

or some sort of code editor you need Google Chrome if you're using brackets and then also you need a folder for all of your things so I have one that is called my website

has all my billions and zillions of HTML files I have one folder inside of it for images and I have subfolders inside of it for different images for different things

um and yeah that's really all so when you start with brackets let's say you're opening up for the first time

what you want to do is open file and then press open folder so this is it's already in the folder that I need my website so that I can get

to all the other folders that are in there whenever I need them so once you've downloaded everything open up brackets opened up the folder then we can start

so so um if you are making a home page the home page will be called index.html

see how on Neo City we cannot delete it you cannot move it anywhere because that is what the home page for any

um Neo cities is so like when we go on moneys.usa.org it doesn't say slash dot

moneys.usa.org it doesn't say slash dot index but if you do put it in there it's the same thing it's it's the home page so if you are making a home page

right now you will have to call it index.html but if it's anything else then it can be about that HTML as long as this stuff it ends with DOT HTML you'll be fine

now ignoring that now to start with the actual um file itself um well we'll have to start with the HTML

tag HTML is pretty much made up of tags um the first tag you will need to have in there is as I said the HTML tag and the really good thing about

um brackets specifically is that if you do a tag like this it automatically closes your tags for you so you don't have to remember the ending tag and ending tags have little slash and the

same name but again bracket does it for you so you don't have to really think about it and after that after the HTML tag

the biggest tag there is then we go to the style tag style is for your CSS which is your cascading

style sheets the basis of any website is HTML and CSS and sometimes JavaScript I am not going

to teach JavaScript in this one because again it's very very beginner very basic you don't need JavaScript you can have an entire big page with no JavaScript at all if you really wanted to so it's not

needed for anything but if you would like to make your page pretty you will have to use CSS

so the difference between HTML and CSS like HTML is the skeleton the bones of everything but it's like a pile of bones

that you don't know where they particularly go and then when you have CSS CSS is kind of like the instructions of how to put the bones and the Flesh on

top so for example if I just deleted the entire style sheet right here it would just be nothing there's literally nothing there it's no longer in the middle there's no longer any

color I mean the image is still there at least but it's pretty much gone so CSS is very important there's two ways you can do CSS you can either do it

through the style tag like I am doing or you can link an external style file so let's say you would be

like okay home dot CSS it's I find just doing it between the style tag that I have here is just a lot easier for me because I hated switching like back and

forth between the style and the um the HTML file it's just so much easier for me if it's all just in one so okay now that we've gone through the style tag we'll come back to it

but after the style tag which is it's a metadata tag it's it's information I have another metadata tag

which is the head tab this tag and what is inside it will basically just tell people what the page is about

there's no you don't style these so for example in the title I have Neo tutorial home that's what will be on the tab when people click the page you can change it

to anything editorial that's just it and it's just me a tutorial go back put a new tutorial home it what is that there we go

it's back to me editorial hub um that's the easy part so again metadata you don't style these

you there's nothing to do with them they're just data now when we get to the body tag this is where everything really happens where the skeleton of things happen I'll

try my best to um show how it works hold on for a minute to okay so the body tag is obviously where

where the body is that's where the bulk of everything is going to be on your page

then I made a div tag called container this is where first off a div tag it means divider

it's like a section of your thing it can be styled which I did but you can also give it an attribute called ID

an ID is well I did it has how you identify the div so you're like okay I like this div I'm just gonna call container so I can figure out which one it is it contains these things I found

another div um Block it's called one I named it one because it is the first two that is inside contain and then two because it's the second two it's inside

the container um then we have a P tag right here P is for paragraph so

this is this this P tag is this right here the paragraph so I have

hey I'm Neo tutorial B is for bold as it says right here so this is unbold this is in bold tags go around they wrap around whatever

you would like them to embolden so for I as italics italics here strike through strikethrough used to be

called something else but they changed the tag to Del like delete so this is strikethrough dio okay

so that's the P tag that these are all tags that are inside the paragraph two Bubbles and italics and a delete are all in the P tag

now that we're here we're moving to the first div the first divider the first section that is inside of the container I've named it one so I could easily

style it that way and I it's like a comment oh I forgot to say that comments if you can see them are right here they do not show up

on the page itself comments are for you so you can figure out you know you can basically just leave a comment for yourself to remind you what's what so I

said okay this head is metadata okay I said the body is elements I said this style tag is the CSS just little comments for me to understand and remember where things are

now back to it we've passed the P tag we passed this paragraph we're on to the first if we're on to the first divider so for the first uh thing I said let's make

a link so I coupled it with a P tag it's a paragraph just holding the paragraph

and how you do a tag is a href equals your link so this right here whatever you can link it to somewhere far away

like as I had which was marnie.nio

cities yes yes.org or you could link something closer

so you could just look through let's say there we go link it to anime so now when I click it

I forgot don't put the um this lash here anyway when you click it it goes to a page that I've already done

that's what a link is like ahre link now if you want to try to put an image the tag for that is less than image SRC

which stands for Source again just like links it can be something that is local as in this is on my computer or I can have something that is from

Tumblr or whoever you found a link foreign it's really huge but look it's linked I'll go back to my local file though

local file meaning on my computer now we can close this first div because we're done looking at it now we can look at the second div

um so here's another um paragraph tag but I wanted to show the span tag in between because it's it's almost like a

highlighter the span tag is almost like a highlighter I can change it and move it to words only on this it only highlights like that so if you

need to highlight some sort of word or words but only those specifically not the entire paragraph you can use this fan tag

no now that we've gone through them let me open them back up again back up again one and two and now we can go back up to the style tag as I've said

before without the style if I delete the style it's nothing there it's no longer in the middle there's no longer any pictures of any kind and it just sucks

honestly so if I undo that put this outside right there now you can see there's a there's a there's a picture back there this picture is here there's lots of pictures lots of colors lots of different things to do so let's go into

the style tag and look at some of the things that are here so Whenever there is a tag somewhere you

can style it whatever tag you have with the the image tag the paragraph tag diff especially any tag that you have that isn't

metadata like you can't style the title you you can style the head it's not that's just information that's not an element any tag that is some sort of

element like body div paragraph um image any of those types of tags element tags can be styled and they're styled in the style tag

so let's start from the beginning in the HTML tag it it compses everything

it's the entire it's the entire file right here between the HTML tags it's kind of playing with HTML is kind

of like those Matryoshka dolls where like you open one doll and there's another doll inside HTML is very just

containers and containers in it's just a way to organize it's very it's very organized everything has its parents everything is in something else

in this case everything is in HTML everything's in that parent tag now I styled HTML by typing HTML and

giving brackets so let me try I'll just type it again so people can see HTML brackets again it closes it for you press enter so we can have some space

but basically in here you're just trying different attributes so for the HTML tag which again it

encompasses the entire the entire page everything that you see from this point corner to this point Corner that's the entire HTML tag that we're looking at

so you can Style you don't have to put you don't have to style the HTML anyway but usually I use it because it's like a

what is the default for you so my default font that I really like is Ms Gothic so I want 99 of the fonts here to

be Ms Gothic so I use the HTML tag because it over encompasses everything and then I also made the background image something that was local on my computer

I can change it to something else if I want to or not painting I have no idea what that is see now it's changed background image and then when you're

done with an attribute make sure to close it with the semicolon so I don't know let's see since HTML encompasses everything let's see if I

wanted to maybe change the color of the text of everything to White to change text color of anything it's just color I don't know why instead of text Dash

color but just color so make it Alice blue which is pretty white now most of the text is white except for other text

that has been styled a different way so the default color for text is black so all I have to do is uh delete that and

it's gone so we've gone to HTML body body the way that I've styled it doesn't really matter right now

um it's hard to explain so just ignore body for right now now we go to container this is how you um

this is how you style like man-made elements like there are elements that are there that are on default like HTML and body those are

things that are made but container is from an ID I'm a div ID that's an attribute I I named it something I named this section

of code something I named it container container is this big blue thing this entire thing thank you

so the way you do that is pound in the name of whatever ID you've given it you can name it anything you want if I name this um box

but I don't update it here then it's not going to know but if I go ahead and also change it to box then it's fine

so going through the box the the this div named box um also just to go back to IDs

IDs are just as it's called ID user identification there are ways for you to identify what element is what and which ones you want to style

there's also something called classes they are very close to IDs except for IDs are specific you can only have one thing called box

you want to name something else box you've got to call it box two or something else but with classes they can go for many different things

so for example let's say cars all cars are under the class of car but they are SUVs so the ID would be SUV

there are pickup trucks there are sports cars they have different IDs but they're all under the same class of car

I did something similar for this thing a page I made about my OC stories they each have their own IDs this Mutual version this one's neon this one's

Tronics Etc but they're all under well some of them are under the same class of when I put my pointer on it they hover so this is the idea of traversion with

the class of Bounce I believe I called it ID of neon but the class of Bones they both do the same thing but they are different IDs

so they could be styled with different pictures okay um now back to container oh sorry I've renamed it box back to box

um so there's a bunch of attributes you can do as I said before with brackets it's a lot easier to style things because they give you suggestions on what you can do

for example border I put Aqua which is the color of the Border seven pixels which is the thickness of it and grew which is the style of the Border

there's so many ways to do the same exact thing border is straight uh sorry shorthand but you can just go border with

7px border Style Groove order color aqua

and it would be the same as me just going border Aqua 7px group border is the shorthand where you can do all three in one but if I were to do the three

same exact thing doesn't change so I'm just going to use the shorthand because who doesn't love things that are short

but now that I've I've given it the dimensions of 500 pixels um tall 500 pixels um wide you can change this to whatever

you like 600 make it a rectangle now it's wider if you do not give something a height and a width or either one of these if

you only give a height or you only give a width it's going to take the width or the height of the pairing so example if I just said oh well I don't really care

about what the width is tml that it's in because the box is a child to the HTML the HTML is what holds the

Box so if I were to take away the width then it's just going to take on the width of the

the screen the HTML so it's as big as the screen and again if you did the same with height if you took the height away then it's just going to take the height of

the parent it's in in this case it is the child of HTML HTML is its parent HTML also doesn't have a width or a

height it's just the entire screen so oh it doesn't do that with height that's interesting I think because with the height it just takes the um the height

of the children that it's in but if I did want to make it the entire screen I could do tight 100 and it would be the entire screen

so make sure to put height and widths with things that you want to be a specific um size now with margin Auto

margin is about what is outside of the box think of the margin of a paper the outside of the margin padding is about

what is inside of the box like which you do when you pad something so it doesn't touch the edges like when you uh I don't know ship off a package you have to put

padding inside if it's very fragile so for right now we have the margin Auto so that means that it will it's just going to be in the center of the page

no matter what if someone's uh screen is wide it's going to be in the middle if someone's screen is small it's going to be in the middle if I just said margin zero

it would just change back to its normal form which is to the left things are everything almost everything default is to be left oops sorry

there we go so margin Auto if you want it in the middle margin nothing margin zero if you just want it to the left

so I'm putting it back in the middle um then again padding as I said that is for inside the box so whatever whatever children is inside the box is not going

to touch the edge you are welcome to do as little or as much padding as you want if I took away maybe if I added a little bit more padding it's farther away see

farther away from the top left right middle all that stuff it's it's Darkly in the middle um and then the background image first

off I would just like to say there is no order to the attributes just change the attributes when you feel like it the only time

order matters is if you somehow put border aqua and then you said border

Dash color and you said red which would be confusing then it's going to take red instead because of the order it's in but besides that nothing matters you give it the height before the whip lift

before the height there's no nothing there's no need to care about it like that but anyway back to the background image is that well it's a background image it's an image that I have locally it's

on my computer so there goes the box that is our container that keeps all the little things in here now we're on two one one is the first

div that I have in here as I said before if you do not give it a height or a width it will take the width of whatever it's in its parent is same with me class

is the Box um div ided so our box is

600 pixels wide so our div our div called one is 600 pixels wide as well except for the um the padding that is in

the Box it's not touching the edges um I gave it just a very plain border so I could see them better um the background image again local

you can make your background images images from somewhere else as I said before if you want to do that do that you want

this instead I can't remember if it's working on yep look background image is that it does not have to be on your computer though I will say specifically for Neo cities do

not hot link hot link means that you are taking the bandwidth from their side to you if you want a picture on your own

um on your own site please download it and put it on your computer but Tumblr or something if if it's hosted on Tumblr who cares number is a

billion dollar company they'll be fine and then going back to two which is our second div right here um

to talk about margin and padding again as I've said before margin is outside of the box padding is inside

so if this had no margin they would be touching like this so if you would like two divs and you

would like some space between them do a margin you can do margin top 10 PX for two for so the second div it has the

margin up here or you can go to one and put the margin at the bottom and it would be

the same there's no difference again there's very many ways to do the same exact thing so if you want to put a margin top for the second div if you want to put margin bottom for the first

if whatever floats your book that's all now a which you might not know is a link

we are styling the link as I said before text color is um you just put color colon red semicolon and you can color it

any way you'd like now it's blue or there's lots of colors that are um built in you can also do Hex colors I just don't feel like remembering any of

them but there's lots of ones that are built in that will work so oh there we go deep pink if you want a pink link and span styling span is the background

color is Aquamarine as you can see the desert here um I believe that is it I think I've explained everything I hope

that it was it made sense um genuinely oh and since we're talking about things

being in the center with margin I could just make the text align Center so that means everything that is an HTML which

is everything will be centered and look I said in the center so I hope that I really do hope this made sense

um I tried to explain it as best as I could with everything um again divs are dividers they're sections

you don't have to style them they could just be sectioned out for no reason but that's the the most common use of Ado is to section things out in a box form some

sort of form um again I tried to make this extremely easy for beginners um oh maybe I should talk about how to

maybe upload it there's nothing really to it this is the main um the main folder for everything

so I usually keep my htmls here like my HTML files here so let me upload blow the one that I just did where is it

called basic I'll delete it later but since all of my images that I used here are also already uploaded for other pages I don't have to

upload my images but you will have to whatever you used in here whatever you link to in here needs to be uploaded here

so now I can look at the same facing that HTML oh something's missing don't know what though but anyways

man what is it missing I have all those Egyptian stuff but whatever yeah what am I missing weird I guess I do have to upload some stuff

hold on y'all images origin I thought I was scot-free apparently not let me

what listen brick for real um uh let's see that squiggly this is already uploaded here

there we go now it's perfect so that's what it looks like you will have to upload the images where they're supposed to be because if I uploaded them out of order somewhere else

like in some other folder that wasn't named the same it's not gonna work so make sure to keep your folders um as organized as you can there we go

and I'm going to delete it because I don't really need it anymore um but that's all um again I hope it was helpful if you have any sort of

uh questions just let me know I don't feel like recording anything else with videos so you will just have those into my voice but um I couldn't edit this like I usually

do I couldn't figure out how to do like um recording myself doing things in real time and then talking so I couldn't edit it as well as I usually do um but again if you have any questions

put them down below I had recorded like this twice basically I had one that was like 35 minutes long and I was actually doing it in real time like typing up all this

stuff in real time and then when I was finished with the side I was like What if I just go back and talk on it like I still went through everything and explained it but I was like literally figuring out what to type as I did last

time so I thought it was just like a lot more messy that way so I I redid it I redid it with the page already done and me just going back and talking about it but I guess if you guys would like to see another video let me know if you

guys want me to do it in like a spur of the moment literally code along with me thing because that is way harder for me to edit or if you like this or I have a

page already done and I just explain how I did it because I would if you guys would want another one like this if you guys would want me to do like another page when I'm actually doing my pages

for my website if you guys would like me to you know show you guys more Advanced Techniques but this was literally just for people who have never coded a darn thing I wanted to explain it as much as

I could I hope I helped and if I did not you can go to w3schools they um they're very good at teaching what tags do and different things and when you're

actually coding your site you can also go to um stack Overflow it's like it's more like a troubleshooting Place more than a teaching you whatever site so if you have a specific problem that you're

running into and you can troubleshoot something a stack overflows to your place but if you're literally just starting out coding anything and you want to learn more actual knowledge and

syntax and all that stuff then w3school is also your place everything will be linked down below that you need and if you guys even wanted the little file that I have like the the page that I made to download you can guys can have

that too just let me know what you guys want and that is all bye