Personal Websites: Why You Need Them & How to Code Them
Imagine an easily accessible location where anyone could learn about you and all the cool things you’ve done. Imagine someone typing your name into Google and not clicking on the embarrassing profile you made in 7th grade, but instead a personalized page that you’ve designed for one purpose: showcasing yourself.
Why You Should Make a Personal Website
Not many people take advantage of personal websites, but you can. Because a personal website is yours. It’s entirely about you and you can choose to fill it with anything and everything your heart desires. The possibilities are (nearly) endless. As long as you’re aware of everything you’re putting online, the sky’s the limit.
Don’t be afraid to show your personality and be quirky — your site is a place to express yourself and to demonstrate that you are more than your black-and-white, static résumé.
Now, you may be thinking: Okay, this sounds cool. But, really, do I need this? Well, if you’re work has anything to do with the Internet or using the Internet (and, let’s be real, it probably does), my answer is ABSOLUTELY YES. A personal website allows you to stand out amongst others in your field and makes it easier for you to be found.
Personal Websites That Already Exist
Before we get into designing your own site and how to go about making it, let me give you a few examples of some active, updated sites maintained by today’s regular (and irregular) humans!
You may have heard of Hank and John Green. Guess what? They each have a personal website! (You can find them at hankgreen.com and johngreenbooks.com). You can also find me at madisonramos.com and the infamous Thomas Frank (College Info Geek) at thomasjfrank.com. Other GG members have sites as well! (Check out Izzy at izzylapidus.com and Swathya at thekingdomofpoetry.blogspot.com.)
Custom Domain Names & (Free) Hosting Platforms
Domain Names
You may have noticed something about all of those domain names. That’s right, they’re usually your name! If your name is Adrianna Grace Lopez, you might want to consider adriannalopez.com.
Of course, the next step is to secure your domain name. Luckily, you can purchase domain names from a variety of vendors. My personal preference is Namecheap (www.namecheap.com) but do your research before deciding.
Unfortunately, you may come across a situation where your name has been taken. It’s sad, but there are solutions! If you were Adrianna, you could consider adding your middle initial (adriannaglopez.com) or using your nickname (annalopez.com).
TLDR; If it’s available, your domain name should be your name.
Web Hosting
The next problem people often come across when first creating a website is hosting. I, in my unknowledgeable state, even spent hundreds of dollars on hosting from HostGator. Of course, there are some decent paid options (and you can look online to find out more), but I’m here to propose a few free alternatives.
For one, Repl.it offers free web hosting, which you can link to a custom domain that you’ve purchased OR on a free URL they generate for you. Find out more here. You can also choose to use GitHub Pages for a similarly nonexistent price tag. And, as usual, you can link that site to a custom domain! Find out more here.
TLDR; Check out Repl.it or GitHub Pages for free hosting!
Actually Coding / Learning to Code Your Site
First, I’ll give you a brief introduction into each of the most essential languages for web development, and then I’ll leave you with some more resources/ posts around the internet that’ll help you grasp the concepts and begin building.
- HTML (HyperText Markup Language) files are your foundation. HTML is the first thing loaded on your site, and you can technically make a site using only HTML.
- CSS (Cascading Style Sheets) adds the style to your site. It makes it interesting and less… well… plain. You can use CSS to layout your page and add interesting colors, fonts, etc.
- JavaScript is what allows you to add interactivity to your site. JS will make your sites more dynamic.
Now, one of the best, completely free resources for learning HTML/ CSS/ JS is W3Schools. The site will teach you everything from the ground up and has some very good documentation when it comes to the above languages. Some other cool resources are CodeAcademy and the HTML/ CSS/ JS interactive cheat sheets.
I wish I could teach you everything about these languages in this very post, but I’d, unfortunately, eat up hours of hour time reciting information that I learned from the resources listed above. Feel free to also look around YouTube and other sites such as Lynda and Skillshare that offer detailed video courses. (In terms of Skillshare, look online for promotions that will give you 2+ free months!)
Getting Your Site Online
If you’re using any of the free resources listed earlier, you simply need to load your code into the respective Repl.it / GitHub repository. This is relatively easy to do but, if you’re confused, Google is your best friend! If you’ve opted for paid hosting, you can usually upload files through your control panel, and may want to look into FTP (File Transfer Protocol) clients that will allow you to update your site with ease.
WAIT- WHAT DO I PUT ON MY WEBSITE???
Were you wondering when I’d get to this part? I talked a lot about what you need to do to secure your website, create it, and get it online. But I never told you what you should think to include!
From the sites I’ve seen, here are a few things to consider:
- An About Section. Introduce Yourself! If you’re confused, consider looking up the “elevator pitch.”
- A Portfolio. If your work is creative (design, writing, photography, coding, etc.) you should showcase your favorite/ most impressive projects.
- Links to Social Profiles. Maybe don’t link your childhood Tumblr account, but you should definitely consider linking your professional profiles.
- A Blog. This one is totally optional BUT, if you’re a fan of writing, it’s a great way to engage your readers.
Overall, you really just want to show yourself in the best light. Maybe look into a personal logo, and upload some nice photos of yourself. Show the best YOU.
Whew. You’ve Been Here For a While. Almost Done!
After making it through this post, I hope that you’re all excited to start learning and building! Don’t worry about what the first draft looks like. Remember, your website isn’t static! It evolves with you. As you learn more about web development, your site will reflect your expertise. Plus, I’m still working on my own site, so it can be a group effort! Let’s all better ourselves and put our best foot forward on the Internet!
On the other hand, if you’ve decided that web development isn’t for you but that a personal website totally is, check out Thomas Frank’s no-code-required guide. He spent 15+ hours putting it together, and it’s an amazing resource.
