Making a Personal Website
When I created DevEtc a few months ago, one of the first people I started following was Liz Abinante. Through her Tumblr, I found her personal site—a sort of living cover letter—which inspired me to create my own.
You can now check mine out at mattmawhinney.com!
All told, creating and publishing my website took about a week, and I found it to be a valuable learning experience. I won’t go over all the details, just the stuff I think will be helpful if you want to do something similar.
Also, I won’t include all the HTML, CSS, and jQuery I used to make the site in this post, but you can check it out on GitHub.
- If you’re totally new to programming and web design like me, I’d suggest starting with a template for your webpage, like this one. It’s much easier to play around with the elements (colors, fonts, borders, etc.) in a template then to come up with all of these things on your own.
- If you have a rough idea of what you want your webpage to do but don’t know how to make it do what you want, Google around. There’s probably some code out there you can tweak slightly to get the results you want.
- Once you have a website built, getting it live at the domain you want is a bit of a tricky process. I’ll discuss this more below.
Making a Navbar with HTML & CSS
I started by working through the Web Fundamentals class at Codecademy. Then I borrowed this template for a resume web page.
Generally speaking, I just played around with the HTML and CSS until I got the page looking how I wanted.
To create my horizontal navbar I used the following HTML and CSS:
Making a Drop Down Menu with jQuery
Then I Googled around for drop down menus using jQuery. It took a while, but I found this helpful post by Kevin Liew. Based on Kevin’s post I modified my HTML and CSS files and created a jQuery file.
One very important thing to note from the HTML file: Make sure that in the
head section your
script tag that links to the online jQuery library, no matter which one you choose to use, comes before your
script tag for your own “.js” file. If you reverse the order, your jQuery functions won’t work, and you will spend several hours hating yourself.
At some point, you’ll probably want to move your HTML, CSS, and jQuery files from a local folder on your computer to a hosting site where they can be published to a domain name of your choosing.
I found this process to be long and needlessly frustrating. After searching around quite a bit, I ended up getting my domain through 1 and 1 and signing up for their Unlimited Hosting package. Don’t use their MyWebsite option!
I used FileZilla to transfer my files to 1 and 1’s server, and I will use it to transfer files for any updates I make to the site.
I’d also suggest taking a look at Weebly.You can register your domain name through them, and they have an elegant, user-friendly interface. What’s different is you don’t upload your files to a server like with 1 and 1, you just paste all of your code directly into their HTML editor.