The Best Resources For Making Your Own Hand-Coded Website

If you’re like me, you’ve always wanted to learn to code but didn’t know how or where to start. As an artist, making a website in this increasingly digital age is inevitable and therefore something I’ve always had an interest in. Despite this, I had never touched code besides maybe tweaking my Tumblr HTML about ten years ago, if you can even count that. I found the concept of coding your own website appealing but daunting — the task of stringing words and symbols together to create something visual just felt foreign to me as a visual design artist. 

This semester, I’m taking a class called Handmade Web at VCU run by Aidan Quinlan that emphasizes the use of hand-coding your own websites to fight the increasingly monopolized internet. It’s my first look into the coding world, and while I might have struggled in the beginning to get the hang of it, I’ve found that once the basics have been established, possibilities are endless in what you can do. 

I’ve put together some resources that have personally made my time coding easier and more enjoyable. Some of them are codes that people have created and shared, available for tweaking for your own project if you would like to start with a framework or certain effect. Others are libraries that have dozens of various elements to choose from to implement. Happy coding!

FreeFrontEnd

FreeFrontEnd is essentially an archive of different work that programmers have posted for others to use and tweak. It’s a great resource for inspiration, even if you don’t take directly from the code itself, as it includes effects and elements that I had never even thought of prior to seeing it on this website. The best part is that all the authors are credited, there is typically a link to a demo and the code itself, and it lets you know what programming languages are used so it’s never a surprise. 

CodePen.io

Where FreeFrontEnd is an archive, CodePen.io is the source. People post their work directly to the website which provides a demo along with the code sorted into HTML, CSS, and JavaScript pages so it’s easy to implement. I fell down a rabbit hole with this one — admiring the work of many coders while trying to decipher what each part meant. 

Oh, and you can edit the code directly in the editor which will change the demo, so you can alway test out your ideas easily before implementing them directly into your website. 

Animatopy

Ever wanted to do a simple animation but there’s so many resources and different ways to achieve a final result that you get overwhelmed? Well, Animatopy is a great resource for you then! It provides simple codes to create animations in CSS with a library of different options to choose from. All you need to do is copy and paste!

Animista

Similar to Animatopy, Animista is more specific in that you can tell the website exactly what you want including delays, direction, timing etc. and it will provide you with the code edited exactly as you want. If you don’t want to deal with the hassle of editing the code directly in your text editor, this is an excellent option. 

UI Buttons

Pretty much any button animation you can imagine, you can find on UI Buttons. I love that it provides the animation and code in an accessible way for people to find easily. 

Additional Resources

Handmade Web

As I mentioned before, Handmade Web is a class at VCU that teaches you how to make your own websites through basic coding. Everything taught in the class is uploaded to the website, so you can follow some of the tutorials and exercises to get started on your coding journey. 

ChatGPT

While controversial, AI chatbots have made my life so much easier since I started coding. It’s an all-in-one resource for anything you need or want to learn in the world of programming, rather than Google or another internet search engine which is sometimes filled with contradictory information. Definitely don’t be afraid to use it, it’s a life changer when you’re trying to learn how to code. 

Adobe Fonts 

Something I didn’t know before I started coding was that Adobe Fonts has a feature where you can directly add a font to a web project with a few clicks. It’s made my life a lot easier and has opened up doors to what I can create on the web. Just select your font, click ‘Add to Web Project,’ create a project title, and copy and paste your code!