DEV Community

Cover image for Do You Want to Learn How I Built my Website from Scratch? πŸ› 
Franco Scarpa
Franco Scarpa

Posted on • Updated on

Do You Want to Learn How I Built my Website from Scratch? πŸ› 

It happened to me, too. Two weeks ago, I accidentally deleted the directory that contained all of the files of francoscarpa.com, my website. How? Using Eleventy, I ran the rm -r _site/ command, while I wanted to run the rm -r source/ one to compile the source directory (this was the sad post I wrote of that tragic day). Having made no backup copy, I was screwed. There was only one thing left for me to do: start over. This event, however, was not entirely a disaster; on the contrary: it gave me the chance to build a new version of the site, a version I really like.

I have always been proud of my website, in all of its multiple versions. At the same time, I tend to get soon tired to see again and again the same layout, even when I spent hours working on it. I’m not talking about content, which, of course, must be updated continuously. I’m talking about changes to aesthetics: layout, fonts, color palette, etc. This time I can say that the appearance of the new francoscarpa.com site has come to a version that I can consider stable.

So, I’d like to take this opportunity to inaugurate a series of articles that describe my whole website: from structure to functionality! I really wanted to do such a thing. Before embarking on this adventure, however, you wanted to have feedbacks from other web enthusiasts like me. Each article could take me a fair amount of time due to my perfection craze, so I’d like to have opinions from other web developers.

In the case of positive feedback, several exciting chapters await you, among which I will touch topics like:

  • layout;
  • typography;
  • offline behaviour;
  • color palette.

The dev.to site seems to be a place full of people who love to learn, study, give ideas, advise, and instruct. Therefore, it appears to be a great place to try to gather feedback before embarking on this new adventure! Let me know what you think and I encourage you to share this post so I get more feedback!

Top comments (8)

Collapse
 
kchristmann profile image
kchristmann

Hi there,

I am a enthusiast of minimalistic websites myself. I know that much work in minimalist web development is the thought process itself and deciding why you choose what. So I think covering these topics is a good idea, when it results in giving inspiration and new information for other people who like this approach.

One feedback about the site itself: Both the "Home" and the "Contact" page have little amount of content (which I like), so that everything fits in the viewport without scrolling when using a mobile device in portrait orientation. If you adjust the font-sizes or the spacing just a little bit, it would be possible to also not having to scroll on a desktop pc or a tablet in landscape orientation.

Is there a reason you deviced to still keep the distances large enough for having to scroll? If not, I would suggest to adjuest that a little bit, so everything fits in the viewport without having to scroll.

Collapse
 
francoscarpa profile image
Franco Scarpa

Thanks! I’d like to make pages with little content to not use scrollbars. However, there’re so many devices: if I adjust the font-size to make the site not show a scrollbar on my tablet or desktop, maybe other tablets and desktop PCs are forced to show it. Moreover, the idea behind my website is basing the sizes of elements and spaces on the viewport width. That’s the core idea. I love websites that use all the space available, so I basically use a CSS variable that depends on the width of the viewport. This lets me make the appropriate calculations and present the content in the correct way for each device.

Collapse
 
ben profile image
Ben Halpern

Eleventy is so elegant. Nice choice.

Collapse
 
ben profile image
Ben Halpern

Glad things worked out in the end.

Collapse
 
ben profile image
Ben Halpern

Or wait, maybe I misunderstood this post. I think I need a computer break. Good luck with everything going forward!

Thread Thread
 
francoscarpa profile image
Franco Scarpa

What did you think? :)

Collapse
 
bugsysailor profile image
Bugsy Sailor

Love that background pattern!

Collapse
 
francoscarpa profile image
Franco Scarpa

It’s a combination of background-color and background-image :)