Creating your first website, from scratch!

I am a developer without website. As surprising as it sounds, its true! and I wanted to change that. So I started on building one and this is the complete start to finish story of that. I started writing this when I set sail on my journey and will edit this periodically to reflect on my journey.

What do I even need

I want my website to do one job: Reflect me. It will also be my personal project and a playground for some experimentation i have in mind.

Here is a list of things I decided i wanted to have early on:

  • No JavaScript — as much as I love JS this is something I wanted to do for a while, and this seems the best time and place to do it.
  • Text First — I wanted to avoid images and stick to text (& SVG glyphs) for most part.
  • Mobile Friendly — There’s a 9 in 10 chance you’re reading this on a mobile device.
  • Animations!!
  • Link out to other platforms as much as possible — I’m lazy!
  • Promote both my development and design skills
  • NO TRACKING — This is a big one for me, I don’t want to add any tracking on my site.
  • Start to finish all work done on HP Stream 14one thing that people aspiring to be a software developer or designer get stuck on is that they think they NEED a powerful desktop setup to do anything. This won’t allow me to record & stream (oh the irony HP!) myself building the website but that’s something for next time I guess. Even this was written on that laptop.
  • Open Source & Accessible — All Assets from this project will be available to view, modify and use. Except for projects I showcase, because Duh! (Slowly, not at once!)

DESIGN ALL THE THINGS!!

First up, lets design the website. Usually I am partial to Adobe XD ever since I started using it but since my Stream 14 runs Manjaro and not Microsoft Windows 10, that was not an option.

In comes Figma

In case you’ve been living under a rock (like i was for quite a long time), Figma is the new popular kid on the block. It has a webapp that I can use on linux. I have used Figma previously, mostly for editing vector files and to build quick wireframes and this will be a first for me.

One thing I love about it being web based is that I can access it from anywhere. You’d say Adobe has Creative Cloud but to work on say a .xd file you need something running windows or macOS and then you need to install and login to your CC Account, not something you’d do anywhere. With Figma you need just a *modern* web browser.

Lets start, Now UI wise, I still find XD UI much better but this is not bad. I find that top bar repulsive for one but it gets the work done.

A blank region on figma. I am sad, please send help :(
A blank region on figma. I am sad, please send help :(
That top area sure would remind you of IE6 days, going full screen takes care of that for most part though

My website uses Comic Sans. What are you gonna do?

No No No please don’t leave, I was just kidding!

So What font did I settle on? Manjari for text and Yeseva One for display. Yeseva is quite similar to Playfair but has subtle differences with I liked on my website.

Colors

Colors are Important.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store