DEV Community

Sia Karamalegos
Sia Karamalegos

Posted on • Updated on • Originally published at sia.codes

How to build a website in 2020

Step 1: Buy a domain. You might have a problem if you already have 20 domains waiting to be used, but that's okay. Feel free to buy more domains. You never know when you might need that perfect domain name. P.S. zeit.co has a great domain search tool with hacks. Now I've just enabled your habit. You're welcome.

Step 2a: Engage in Twitter debates about how JavaScript is ruining the web and which static site generators are best. Do this for 4 months.

Step 3: Take an entire course to get better at design. Spend 5 hours generating an HSLa exploration CodePen to visualize something that already exists. Bemoan color systems and values. Read a shout-out tweet about best conference talks that happen to be about React and color. Find a tool that does it way better than you.

Step 2b: Eventually some rando will tell you about Eleventy, and you're like "sounds brilliant". Repeat step 2a.

Step 4: Clone that starter repo and fire it up. Waste 17 hours trying to figure out how to implement some esoteric design feature no one will notice. "Fuck, it's midnight on a Friday, why am I still doing this?" On Monday, "add a circle".

Step 5: Let's do dark mode.

Step 6: (Six hours later) Let's not do dark mode.

Step 7: Look at other people's sites in envy.

Step 8: Write the actual content.

Step 9: Join the Learn with Jason livestream on variable fonts. "Oh that's cool, must add."

Step 10: Edit the color scheme 20 more times. Play with the design and variable fonts. Open Firefox because the font dev tools are 🔥. Go blind because Firefox oversaturated the colors. Recover from blindness, and edit the colors again.

Step 11: Sees how CSS Tricks implemented dark mode and admire how well they did it. Silently close the tab.

Step 12: Launch! Ugh, non-responsive iframes and bad break points. Run Axe. Feel like a terrible person. Fix issues (and edit colors again).

Step 13: 5 months later, write a blog post.

Note to self: next time, just hire a designer.


This article was originally published on sia.codes. Head over there if you like this post and want to read others like it, or sign up for my newsletter to be notified of new posts!

Top comments (13)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Step 10: Edit the color scheme 20 more times. Play with the design and variable fonts. Open Firefox because the font dev tools are 🔥. Go blind because Firefox oversaturated the colors. Recover from blindness, and edit the colors again.

LOL!

This entire post is eerily accurate

Collapse
 
czep profile image
Scott Czepiel

Oh no! I just spent two weeks of spare time rewriting my blog with Gatsby but after reading this I want to do it all over with eleventy!! And of course I can totally relate to this post: the degree of perfectionism that kicks in when working on a side project like a blog is so unnecessary, and yet I can't help it!

Collapse
 
thegreengreek profile image
Sia Karamalegos

So right!

Collapse
 
ghost profile image
Ghost

hahahaha, Step 6 almost killed me with laughter, I think an unicorn is in order. And I don't "unicorn" lightly :)

By the way, when should spend hours figuring out why one element is 2px misaligned? just to change everything the day after? or the hours finding the perfect shade of blue, just to find out that #0000FF looks better?

Collapse
 
thegreengreek profile image
Sia Karamalegos

Lol thanks! And yes, I have been there too. 😄

Collapse
 
brandinchiu profile image
Brandin Chiu • Edited

I suspect a number of people here now feel personally attacked.

Collapse
 
trippymonk profile image
Blake Stansell

Step 7. Every. Day.

Collapse
 
selectivehouse profile image
Joe Jordan

Step 4 hurts me on a deep level.

Collapse
 
patryktech profile image
Patryk

Don't forget to write three support libraries to do basic things, and learn how to publish Python packages.

Collapse
 
around25team profile image
Around25 • Edited

Step 4 & Step 12 - ummmm so that's why project managers are stressed out 🤭

Collapse
 
codenutt profile image
Jared

This is perfect. Eleventy ftw.

Collapse
 
thegreengreek profile image
Sia Karamalegos

Lol you're welcome. I have also now joined that tribe of rando Eleventy pushers.

Collapse
 
colorswall profile image
colorswall • Edited

Step 0. Don't forget to create colors palette for your website on colorswall.com/palette/generate :)