page page page page page page page

so you want to make a personal site

18 or younger? Hack Club can grant you a free custom domain!

personal sites are magical.

they're your own customizable corner of the web, where you can show off your projects and interests, and where other people can learn more about you!

here are some examples:

they're also super easy to learn how to make. never coded before? not a designer? no idea how this works? no worries :D

let's walk through how to make a site, from scratch!

step 1: design!

firstly: where do you design a site?

i use Figma: a vector based design app! you can download it here, but there's also a web version. you can follow this figma tutorial i made to learn the basics.

you can also use any raster art app to design it - Procreate and Krita are ones i've used. pen and paper work too.

secondly: how do you make it look good?

site design boils down to three things: colors, layout, and assets.

color basically means choosing colors that work well together.

for site layout ideas, look at sites you like and learn from them.

for assets, i like drawing them in figma/procreate and exporting them as svg/png, then putting it onto my site. however, you can also try to make them with css.

step 2: code!

haven't ever made anything with html/css? you should probably doing that first! html contains the content on a page, while css is the styling.

here are some resources:

got html/css down already? want to try doing a little more?

  • Tailwind CSS - css framework! makes writing css so much easier
  • React.js - javascript library for building user interfaces
  • Astro - javascript web framework for building static sites. this site uses it!

more resources!

step 3: deploy!

deploying a site basically means to move it out of the local development enviornment, and to a place where everyone can see it! this way, others will be able to visit your site via your domain name url.

two common places to deploy a static site: github pages and vercel.

for static sites, both of these are free! you will however be constrained to a .github.io or .vercel.com domain name.

Max Wofford's how to make a personal site tutorial includes how to deploy a site on github pages.

step 4: ship!!!

thanks for reading!!! got questions? want feedback?

feel free to ask in #personal-site-ysws on hack club slack!!

done making your site? 18 or younger? hack club can give you a free domain if you submit your site! learn more here :D

made with :3 by acon (repo)

hack club // slack // clubs // hackathons