Define the website’s purpose: Portfolio, business card or fun demo?
When I built my first site, it was important to be able to show and document my work in one place. But it was also useful when applying for some of my first jobs; it made it easy to go to interviews, pick which projects to show and which to hide, and talk through my work without panic-printing a new portfolio every time.

However, since using Instagram more and more to showcase my work, my website serves as more of a business card than a portfolio. I decided to remove all of the project pages from the site, as it seemed silly to post every bit of work to two places at once.

Curating work: Less is usually more
It’s best to limit yourself to showcasing around five or so stand-out pieces of work. Being able to curate your own work is an attractive quality for potential employers to see, as it shows that you are confident and objectively critical. Also, you remove the risk of someone clicking on a less-than-brilliant project first, and getting a bad first impression.

If you really want to include everything, consider putting your top projects on the homepage, and keeping links to everything else in an archive page. That way, people are likely to look at your better work first, but you can still direct potential employers or clients to other projects that are relevant to them.

Adding text: Again, less is more!
I wrote SO MUCH about my work and process on the original incarnation of my site which really makes me cringe now. In retrospect I realise that no one wanted to read my 600 word opinion piece on the process of designing my (very ugly) modular typeface. As long as there’s reasonable explanation of what your role was in the project, what it is, when it was, and if applicable (but very importantly) the client and project credits, you should be fine. Unless the work itself is a written piece, or something super-conceptual, people generally will want to look at your work, rather than read about it.

And please, please, please don’t write your bio in third person. It’s always obvious when someone’s written their own bio. It always sound pretentious when you refer to yourself by your own full name. I know this because I was guilty of it, and I also think I committed the cardinal sin of slipping between first and third person, because I hadn’t decided which one worked best. Please put your hand on your heart and promise that you’ll never do this.

Make contact details easy to access
Make sure your contact details (or at least an email link) are visible at all times! The last thing you want after sufficiently impressing a potential employer, client or collaborator is for them to give up because they can’t work out how to reach you.

An email address is the only one you need, strictly speaking, but if you have a work-related Instagram that you post on regularly then also definitely link to that. If your social media tends to be mainly for personal posts, then work out whether it’s suitable to link or not, and maybe just keep it to an email.

Make it load quickly
When it comes to hi-res images and files: if you usually design for print, it’s likely you’ll be in the habit of keeping the size and quality of your images as high as possible. It might feel counter-intuitive, but for web try to keep them below 300kb in size, otherwise your page will take ages to load, and people will get bored and leave.

A good trick is to save all your non-transparent images as jpegs, and reduce the quality rather than the resolution. This reduces the file size massively, without making the image look pixelated. If you want a fullscreen image, a jpg saved at 20% quality and 2500px wide will usually look better than one saved at 100% quality and 900px wide.

There are lots of practicalities to consider when building a website from scratch, here are a few pointers:

• You will need to buy a domain and hosting
Try and choose one which lets you buy these as a package and connect them automatically for your first go, as it will save you a lot of tech-related headaches. GoDaddy is good for this; user friendly with decent support if you get stuck.

• HTML is the only language you need to know to create a functioning website, and it deals with the structure and content of your site. CSS is easy to learn and add, and deals with how your website looks. If you feel confident using these languages, try adding some JavaScript. It deals with how the user interacts with the website. You can also use html shell as an easy starting point for web pages.

• You will need to download a code editor. Editors such as Sublime Text and Atom automatically highlight parts of your code as you type, so it’s easier to read. It’s possible to use something like text editor if you really want but I wouldn’t advise it because it makes your code super-hard to read.

• You will need an FTP client. I use CyberDuck, mainly because I like the 3D duck icon (and it’s free).

If you’re stuck, start with a sitemap
It’s easy to fall victim to choice paralysis when you’re deciding how to structure your website. After all, the possibilities are pretty much endless. If you’re feeling too stuck at planning stage, a good place to start is the traditional sitemap [see here for some tips on creating one] of a homepage, containing links to projects, individual project pages and a bio or information page.

After this, try adding in some of your work to see how it looks and experiment from there. It’s much easier to visualise how your site will look when it contains content rather than working from a blank canvas.

If you’re looking to show your coding abilities rather than a body of print, video or static work, sometimes creating a web toy or fun interaction, along with contact details can be just as effective. Some examples of this are:

osk.co
seamus-white.com
lecollective.co.uk
fefegha.fun

Generally, this kind of site usually makes people want to find out more about you. Consider adding a line of text that invites people to contact you for a copy of your portfolio.

You want to try and build a site that complements and reflects your style of work – it doesn’t always have to be clean and minimal to look professional. A good example is breadandmeats.com, as it’s aesthetically busy, but effective in communicating Joyce Kim’s visual language. Another great example is twomuch.studio, which combines a clean aesthetic with a memorable, playful interaction. [See below].

If you’re looking for more inspiration, Hoverstates is a great place to check.

Make it user-friendly
Impressive code is, well, impressive. But impressive code that stops the site from actually being useable is annoying. Even if you’re the most advanced coder, resist throwing every JavaScript trick you know into your website, and your users (and their download speed) will thank you for it.

Alex McCullough’s website [see also below] is brilliant because although the interactions are fairly simple, the transitions and use of images are a carefully considered focal point, which can be way more effective than a site with loads of interactivity going on.

Make your own templates
If you were designing a book on InDesign, you’d make master pages for consistency and speed. It’s the same for web design: if you’re putting project pages on your site, make yourself a basic template to make things easier for yourself.

PHP is a language that can be used alongside HTML to automate templates and snippets of code, so if you’re feeling confident, read up on it here – it might make your life a bit easier. If you’d rather to get to grips with HTML first, create a file to use as a template, and duplicate it every time you want to make a new page.

Design responsively
Remember when webpages didn’t automatically resize to fit mobile screens? No? Lucky you. It’s so important to make sure that your website works just as smoothly on mobile as it does on desktop screens, because so much of the internet is viewed from people’s phones.

See mediaqueri.es for some functional examples of this. W3Schools has a good section on it here. Going back to my previous point, this doesn’t have to be purely functional: you can use responsive design to change your site completely with CSS across different screen sizes. A particularly good example of this is Braulio Amado’s site. [See below; desktop and mobile sites].

It doesn’t have to be difficult
P5 is a language which was developed for coders with creative backgrounds of all skill levels. It has an online editor which is completely free to use here. The editor gives you examples you can use as a jumping off point, or you can write your own from scratch.

You can see your work in the display window as you code, and when you’re ready you can copy and paste what you’ve written to your own site. If you’re someone who has good ideas but doesn’t yet have the technical knowledge to execute them in code, P5 is for you.

Websites such as Codecademy offer free online classes in basic HTML, CSS and JavaScript, amongst other languages.

CSS is your friend
If JavaScript feels daunting, see how far you can get with HTML and CSS, and you’ll probably be surprised at how much you can achieve. CSS is written in a much more human-friendly way than JavaScript, and things like CSS animations can make a site look much more complex with a lot less legwork (see here).

Talk to web developers online
If you want some one-to-one advice, I’ve found that other web developers are some of the most friendly people online. Coders have to constantly be learning to keep up with advancements and trends in technology, so it’s important to be willing to share ideas to enable everyone to progress.

If they don’t reply immediately, don’t be disheartened, it’s possible that they’re just busy dealing with never-ending bugs and emails. Likewise, if you have the opportunity to share advice, then do! orkshop.xyz, set up by Kingston grad Olly Bromham [see above] documents a series of coding workshops he ran during his degree, along with some resources to help people who weren’t able to attend.

Learn from other people’s work, but be considerate
Code has a lot of weird grey areas when it comes to intellectual property. If it’s a free plugin, or something on a site such as CodePen that’s presented as something you can use and modify for free, then you can take it without worrying. However, if you see something on a website that you want to emulate, make sure you tread carefully.

• DO open up inspector tools and try to figure out what the author did to make a certain interaction work.

• DO think inventively and make sure that you re-contextualise any snippets of code you take into something different.

• DON’T copy and paste someone’s entire site and fill it with your own images and text. Be respectful, someone probably spent a lot of time and effort writing that code.

If you want to know how someone did something on a website and you’re not sure where you stand, always err on the safe side: send them a DM or an email asking them if they’d mind sharing how they did it. Often, they’ll be flattered that you asked, and this way you don’t run the risk of them finding out that you took their work on the sly.

If you see a website you like, it will usually be credited to the coders who authored them, so you can follow their work and ask them questions.

For some tips on creating a traditional sitemap:
theuxreview.co.uk/sitemaps-the-beginners-guide

For a domain and hosting in one:
uk.godaddy.com

This is an easy starting point for web pages:
htmlshell.com

For website inspiration:
hoverstat.es

These downloadable code editors automatically highlight parts of your code as you type, so it’s easier to read:
sublimetext.com
atom.io

This free FTP client:
cyberduck.io

Reading on PHP to automate templates and snippets of code:
w3schools.com/php/

For some examples of responsive designs:
mediaqueri.es and w3schools.com/css/css_rwd_intro.asp

This free P5 online editor:
editor.p5js.org

Codecademy offers free online classes in basic HTML, CSS and JavaScript, amongst other languages:
codecademy.com

Reading on CSS animations:
w3schools.com/css/css3_animations.asp

Coding workshops and advice by Olly Broham:
orkshop.xyz

Online code editor and open-source learning environment testing and showcasing user-created HTML, CSS and JavaScript code snippets:
codepen.io