Making Your Own Student Website Can Be as Easy as Baking a Cake
Recently, I decided to put to practice what I’d learnt so far as a fourth year engineering and IT student and created my own personal website.
It’s easy to think that having a website is just another copy of your resume or Linked In profile, but there can be a lot of value in dynamically showing off your skills. With a well-chosen icing colour and nice toppings, a website can have much more charm and appeal than a 1–2 page piece of paper.
But hand-coding a personal website doesn’t have to be difficult. There’s an abundance of websites with easy guides and tutorials to follow. In fact, the hardest part is finding the right recipe to suit you.
For this reason, I’m going to share my process on how I created my own website to help you create yours too!
(This article is aimed towards IT students or anyone who has a bit of previous experience with HTML, CSS and JS.)
Step 1: Decide on your ingredients
When considering what content to put into your site, think of your website as your expanded resume. You’ll want the basics such as your name, who you are and what you study. Then you’ll want to expand on your skills, experience and projects. Potentially, even consider adding a portfolio if it’s relevant. Finally, you’ll want a way for potential recruiters or collaborators to contact you.
I’d recommend collating all of this into a single document as it’ll make planning your site layout much easier.
Step 2: Design the blueprints
Before you start making your site you should first plan out what you’d like it to look like. This will save you a lot of time during the later coding steps.
Step 2.1: Choose a structure
The two main routes you can go down are to have a long, one-page site or to split your site into several pages. I recommend choosing based on the amount and type of content you’re looking to include.
If you want to keep it clean and simple, and you don’t have too much you want to add besides the basics, I’d recommend a one-pager. Otherwise, if you’ve got numerous projects, experiences, photos, etc., splitting everything into separate pages will help you keep your site modular and easy to use.
Step 2.2: Divide up the ingredients
The next step is to decide what sections / pages you’ll want. This will be based on the type of content you have. Again just consider how you divide up your resume or even how Linked In displays your profile.
Step 2.3: Find some inspiration
Don’t feel like you need to come up with your design alone. There are some great sites dedicated to inspiring you and helping you find your own style. Below are a few of my suggestions:
- Google Material Design: An essential tool for good design.
- WebGradients: ‘ A free collection of 180 linear gradients that you can use as content backdrops in any part of your website.’
- Dribble: ‘The leading destination to find & showcase creative work and home to the world’s best design professionals.’
Step 2.4: Prototype
Usually I’d spend hours adjusting the CSS to perfect my website’s design, but little did I know that Adobe XD could make the process a million times easier and faster.
In fact, the greatest lesson I learnt while designing my site was the power of a good user experience prototyping tool. It’ll help you plan out the layout and style of your website just the way you want and then give you the sizes and measurements to put it into action with CSS. It’ll also help you design for mobile compatibility in advance which will save a lot of hassle later on.
You can see that I’ve prototyped each page and sometimes even alternate designs. It wasn’t 100% what my website turned out to be, but it was pretty close.
Step 2.5: Design Tips
- Pick one or two accent colours and stick to them. This keeps continuity in your design.
- Similarly, pick a custom font family for your headings and an easily readable font for your general text. You can find plenty of free fonts with Google Fonts. Personally, I always like Open Sans.
- Make sure your text is readable, i.e. font size is big enough, enough contrast between text and background colours, good line-height, etc.
Step 3: Find the right tools
To create my site, I took a leap into the unknown and decided to use the framework Vue.js. Using a framework definitely isn’t a necessary step and there’s nothing wrong with some straight forward HTML, CSS and JavaScript. However, it did come with some nice perks, so I’d recommend trying one out if you have some spare time to learn something new. On my projects and experience pages I had a lot of components with identical styling. Using Vue.js meant I could put all the data into a nice, neat array and then generate the components with a loop rather than have lines upon lines of duplicated code. This made my code so much cleaner.
(The official Vue.js tutorial is really easy to understand, so I’d definitely recommend having a look if you’re interested.)
Step 4: The hard work
Whether you’re using a framework or not, the next step is to finally get on with baking the cake and adding the icing, aka just a lot of writing HTML, CSS and JavaScript.
(Don’t forget for the CSS you can take your dimensions, e.g. colours, font-size, padding, margins, etc. straight from your prototyping tool.)
Step 4.1: Tips & Tricks
- Design for mobile first then use media queries to build up to desktop. In all honesty, I normally get too excited and do it in reverse, but this is the recommended way.
Step 5: Add the toppings
Congratulations! If you’ve gotten to this point your website is nearly done, but before you celebrate, don’t forget to add the final touches and make sure your visitors come back for seconds. There are a number of ways you can customize your website, these are some suggestions:
- Add images. Whether it’s of you, your projects or even just something decorative, images add a spark of life and provide a nice break from just text. If you’re interested in creating your own imagery, look out for my next tutorial on how I created my website’s vector illustration.
- Add transitions and animations. You wouldn’t believe how a sprinkle of nice page transitions and a handful of hover animations can transform your site. I’d recommend browsing Code My UI for inspiration. If you’re using Vue.js, then I’d also recommend looking into the tutorial page on ‘Enter/ Leave & List Transitions’.
- Use Google Analytics: If you want to go a step further and track site visitors then consider adding Google Analytics to your site. This will let you view details such as how many visitors you’ve had, what countries they’re from and more.
Step 6: Taste-test it
- Test your site on a range of browsers (yes, even Internet Explorer if you’re game).
- Test for a range of media sizes. More often than not you’ll find that there’s a couple different screen size ranges that will break your design the first time round. You can easily do this using Chrome DevTools or another browser’s equivalent tool.
- Ask your friends and family to give it a try. They’re the best people for picking up any typos you’ve missed or any small bugs you haven’t found yet.
Step 7: Show it off
There are a bunch of different ways to store and host your site but for a student, the best way is the cheap way. These are the steps I used to get mine up and running:
- Buy a domain. This step is optional, however, there’s a certain amount of joy you get from having your own URL. I bought my domain from Google Domains but there are definitely some slightly cheaper ones out there.
- Storing the code. I keep my code repository on Github. Github Education has a free student developer pack which comes with Github Pro plus a bunch of other useful tools. With it, you can create both public and private repositories.
- Hosting. I host my site using Netlify. It’s free and connects directly to my Github repository so that whenever I push a change to my Github repository it automatically updates my site.
It’s only through doing projects that you can really improve your web development and graphic design skills, and now with your new recipe to success, next time will be a piece of cake!
