HOW TO MAKE A WEBSITE
Back before social media sites llke Facebook took over the web, back before such things even existed, many people learned to build their own websites. They built these websites to share information about their hobbies and interests, show off their personal projects, as photo albums for their families, and to connect with others and find out about their interests, hobbies, and life. And these sites would be filled with photographs and pictures, poetry and stories, animated GIF's, music files called midi's or wav's that would play when you opened a page, and links to other websites they liked or that were about similar things. Your website was literally your "home on the web", and some of the front pages of these sites would have animated gif's of doors opening and little mailboxes that you could click on to send the website owner email. A website owner/creator was called the "Webmaster" (some women liked "Webmistress"). Each of these websites was like a unique, little universe, and there were MANY of these to explore. It was a neat time when people would actually "surf the web" . . . and often get lost far from the place they had come in.
I started learning web programming back in the Spring of 2014 because I wanted to be part of the Old Web. Most of these types of personal websites were made back in the mid 90's until the mid 2000's. I didn't have access to a computer fulltime until around 2004 so I missed out on being able to make one back in the early days - but I loved surfing them! You could literally spend years learning all the ins and outs and little tricks of web programming - there is so much you can do with it - but the basics are pretty easy to learn in a very short time. In the sections below, I'll outline all the things you'll need to have and to know in order to start making your own site. I'll explain a little about each of the tools and languages and link to some good HTML/CSS tutorials on Youtube and elsewhere to get you started. Most of these tutorials are broken down into 5-10 minute segments/videos, so they're easy to follow and you don't have to do them all at once. Just take your time and enjoy discovering a new world. :)
NOTE: Read this whole page through before beginning anything. It's kind of an overview of things you'll need to know.
Notepad++ is a simple text editor that you will write your program files in. It's what I'm writing this on right now. This is a link you can download it from -> Click Me. It takes just a few seconds to download and install, just follow the directions. Make sure to check the box that asks if you want a desktop icon. It'll make it easy to find when you need it. I don't know if you have any experience with downloading and installing things so if you have any questions just send me a PM on Facebook. It should be easy though. If it has any boxes checked for adding a Yahoo toolbar, Macafee AntiVirus software, or other things that don't sound like stuff having to do with Notepadd++, UNCHECK those boxes during the install, it's just unnecessary spamware. It shouldn't have that but some places do.
When you open up Notepadd++ after it's installed, you'll see your basic white screen with tabs at the top labeled things like 'File', 'Edit', 'Search', etc. There will also be a tab below that that says "new". That's telling you that Notepad++ has a new, empty file already opened for you and you can just start typing. If the "new" tab isn't there, you can just click on "File" and then on "New" to start a new file. If you already had one saved that you wanted to edit, you can ignore it and just click on "File", then "Open". This will take you to your computer files so you can find the one you want and open it in Notepad++. When you go to save a file on your computer for the first time, click on "File" then "Save As" and give it a name. HTML files will need to have a .htm or .html suffix attached and CSS files will need the CSS suffix(Cascading Style Sheets). When you go to save it the first time, there will be an arrow on the right side of where you name your file which, when you click on it, will let you scroll down to find the correct suffix type for your file. You'll see what I mean when you do it. After the first time you have saved the file, it is already named so do not use "Save As" anymore for that file. If you need to open it again in Notepadd++ to edit it, you can, and then just click "File" and then "SAVE" to save it.
The first HTML file you create - the one that will be your Homepage - you will want to call that "index" because when you eventually upload your website files to a web host like Neocities, that's how its server will know where your website starts. With it's html suffix it will look like "index.html". The rest of your pages you can name whatever you want. When you make and save CSS pages to go with your HTML pages, it's helpful to name them something similar to the HTML page they are linked to, so the CSS page that goes with your index.html page might be called something like "indexcss.css".
Up at the top of the page is also a label called "Run". When you save a webpage, and still have it opened up in Notepad, you can click on "Run" and then scroll down to which browser you want to see it run in. This way you can see how it will appear online when you upload it to your webhost. You'll use this feature A LOT while you're editing your pages. It will, however, only allow you to run the web page on browsers you actually have installed on your computer. I have Firefox(this is the one I use all the time when I'm online), Google Chrome, and Internet Explorer 11. My website works well in all of these because I designed it to. Back a few years ago, each browser rendered the page a little bit (or a lot) differently from every other browser for various reasons, so you had to check several browsers to make sure it would run right for most people. Nowadays, many browsers run on the same engines - or forks thereof - so they should all render about the same. . .usually. There are still occasional differences - and special code for those differences - which you will no doubt find as you go along. I'd recommend making sure it runs well on Firefox, Chrome, and Edge, as that covers the majority of computer users on the Net.
NOTE: The HTML5/CSS3 tutorials in the Tutorials Section by Bucky of thenewboston and Quentin Watt show how to download and use Notepad++. Bucky also shows how to save files and add the .html and .css extensions when you save them.
At some point, once you have a few pages of your website written and saved to files in a folder on your computer, you'll want to upload them to a web host so that everyone on the Internet can see them. I use NEOCITIES It's free, Kyle, the creator, gives you tons of space, and there are no ads put on your pages to collect revenue like most webhosts do. HERE you can see all the most followed sites on Neocities. (I'm about halfway down the first page). If you click on the website image or the website name in red letters, it will take you directly to the site. If you click on the black lettered name just underneath next to the little person image, it will take you to their profile and you can also access their website from that place. Whenever you're ready to do that, let me know and I'll walk you through it. It's very easy to do.
Okay, here will be some of the tutorials I went through when I was first learning web programming. You will want to create a lesson folder on your computer where you can store the HTML/CSS files you write while watching the video lessons. i still have a whole folder of them because they are useful as a handy reference for how to do things if I forget - although I usually use my website as a reference these days since there are so many different things on it. :)
The first place I want to take you is called the littlewebhut. Now, some of these videos may go a bit fast because there is so much information in them - especially when he gets to the CSS videos. I had to watch them several times to really grok what was going on. So don't worry about having to stop and replay stuff 100 times. It will take a little while before you really get the hang of the terminology and how all of these elements interact. I watched several tutorials and kept copious notes over several months before I even began making my website. That's just me. I like to get all the information I think is necessary before jumping into something. You may do it differently. There is a nice little video on centering images in the CSS lessons that I found to be very useful, FYI. The video lessons are also written out so you can read what he was talking about. HERE is the set of HTML5 videos and HERE is the set of CSS videos.
HERE is another set of Youtube videos on HTML5/CSS3 by Quentin Watt, a guy living in South Africa. These lessons are also very good and I like listening to him. They cover much of the same ground as Bucky's, with a few new things. I would recommend watching both these and Bucky's videos all the way through, because different perspectives are always helpful when learning new things. . .and it's fun. He also describes how to download and install Notepad++.
Well, that's all I can think of at the moment. I imagine you will have a million questions as you go along, so don't hesitate to ask. If I can't answer them I will probably have a good idea of where to look to find the answer. My Google-Fu is pretty good and I've been doing this for a few years now. Here is the LINK to the original homepage I made for your future website a few years back. You don't have to use it, lol, I was just having fun. But you might want to save the moon, star, or heart gif's from it for use on your own site. I created the glittery name of the site with a glitter text website that no longer exists. :( But there are other places online to create glittery text. :) Let me know if you need anything else. I love you always and forever.