Making a website? Not as hard as you think!

14 AUG 2023
Tags: Technology

When I was a kid, the internet was a glorious place, filled with all sorts of interesting things to discover. If I found a flash game or website that I wanted to visit again, I would bookmark the page. In today's world, everyone spends their time on a handful of sites, most opting to use mobile apps instead. However, Social media has become an amalgamation of algorithms, a rapid paced echo chamber. Everything that once made these sites unique and interesting has come to pass, and instead of innovation companies are looking to increase profits off of stagnant user populations.

Social media is not the only way to express yourself on the internet. A little while ago, I stumbled across neocities. Neocities is a free static web hosting site that has a built-in social network. This means that you are able to code your own website and host it on Neocities, along with features allowing you to find other sites hosted there. This is where I host this site, as for a small personal project for someone learning to code, this is the perfect option.

The only knowledge of coding I had before going into this was some code.org stuff I did when I was 12. And back then I learned the true coder's path and copied and pasted much of my code, which resulted in me not fully understanding how it worked. When coding this site, I wanted to understand and learn how it worked, as this would allow me more customization and creativity. However, I had no idea where to start. I knew that the internet had plenty of free resources, but coming from an arts background, I didn't even know most of the terminology surrounding technology.

Please take this as a place to start your own learning path, as I am still very much a beginner, but I want to show other people who think coding may be too daunting of a task that it gets easier, and once you understand the basics the rest will get easier!

  1. Where do I write my code?

    Starting out, I didn't even know where to write my code. Neocities has a in-browser html editor, but I'm stupid and need more motivation to do hard things. So I downloaded Visual Studio Code, but there are many IDEs (Integrated development environment) out there, so find one that fits your needs. I chose to go with VS Code, as it has many features that improve your workflow, as well as being customizable. One of the main motivations for me is the themes, so my code can look pretty. This may sound stupid, but if I'm going to be looking at something for a long time, I want my brain to be like 2% happier looking at it. VS Code also has extension that you can download, which help me not forget certain things in my code. For example, I downloaded the Auto Close Tag extension by Jun Han, which will automatically write a closing tag for me, so I don't forget to do it. This prevents me from writing incorrect syntax, and spending hours ripping my hair out of my scalp for a simple mistake. VS Code will also notify you if you have written incorrect syntax, which helps catch mistakes.

  2. What should I learn before I code?

    If you're like me, doing is the best way to learn. I watched some youtube videos but it wasn't clicking in my brain, as having random words that didn't mean anything to me thrown at me by a guy with a gaussian blurred led light background wasn't conducive to my learning. I went onto neocities and started looking at some sites that looked interesting to me. I used inspector (ctrl+Shift+I) to look at the code that was running in my browser. I would select parts of the website, and look at what code I was looking at. This helped me alot when I was first learning, as I was able to see how what was written affects what is shown. Since neocities is for static sites, you would only need to learn html (for a very, very basic site), css ( customizes the html's appearance) and javascript (makes the site interactive). Therefore, looking at static sites would be the best reference.

  3. How do I start coding?

    Well the simple answer is to just start! I will not be going into depth on the actual code part in this section, as I am still a beginner and do not want to give you incorrect information. Refer to resources such as W3 schools and MDN Web docs to learn more about specific tags and web page structures. You can refer to other webpages in order to learn what goes in the head tag, and for structure, but code it completely by hand, customizing it to be the way you want it to be. To see your changes, drag the html file into your browser, and refresh often in order to view your changes. If something doesn't look the way you want it to, learn what you have to do to make it look that way.

    After you create something that you are happy with, create a new html file and try to code it without any external references. Use the code you wrote previously as your guide, making sure you understand what you are writing. Customize it differently this time. After that, you will have coded two web pages! Even if they aren't great, you still did it! You learned how to code and survived. With your new found understanding, you will be able to tackle even larger projects.

  4. Ok, I made something, but how do I share it with others?

    Once you have all of your assets and files, if you are using neocities, you can just drag and drop all of the items into the box on the "Edit Site" page. You can click on your url and make sure everything is fine when it is live, but now you have created a website! Share the link around with others, your friends, strangers on the internet, etc. and relish the power trip of conquering html.

And with that, you now are able to code (somewhat) in html and css! Allow yourself to experiment, and treat yourself with kindness. Learning to talk to a computer is hard, so if you're running into an issue, take a break and come back to it later. Just please stop banging your head on the desk, you're gonna have even less brain cells if you do that.

meme of html/css