As a frontend developer, people expect me to be good and proficient at building websites. But I am not. I decided to change this, so I started creating my own Portfolio.
Initially I looked for tutorials showing me the general path from a dev point of view but what I found were either too tech specific like 'How to develop website with x and y technologies' or some others articles like 'how to create a website without coding'.
That's how I came up with my own set of decision trees!
First stop: Draw what you want to see at the end
Draw the layout of each page of your website. Think about the user's navigation, positioning and content but ignore details such as styles, colors and fonts.
Don't underestimate this step as it will get you deeper into your project requirements and help you discover issues from the very beginning.
Second stop: Are you a designer?
Templates are the best way to go If you don't need a custom website. They're well-designed and well-organized and save your time. You can even find templates in your favorite CSS frameworks.
Theme Forest prices start from 2$
Free CSS and HTML templates
Jamstack template website Choosing your stack it gives you a starter theme✨.
CSS challenge websites Get the idea and implement your CSS
To find a website designer, it's always best to ask your (social)friends. You can also hire a freelancer through Fiverr or Freelancer. I also search in Figma and Sketch communities to see work samples of designers. If you like their work, you may contact them directly .
To communicate with your designer
1. Prepare first draft of your website skeleton.
2. Inform your designer If you prefer to receive CSS in a specific framework (Tailwind, material, ...).
3. Prepare a list of your favorite websites in your scope.
Third stop: Select your static tech stack
Understanding your content and its updating behavior plays an important role in technologies you choose. If you are the only one updating the website from time to time, put all the content in HTML and ignore the CMS topic, but if you have a non-technical person updating the content, you should choose a CMS for your website.
Traditional CMS vs headleass CMS:
traditional CMS platforms allow non-technical users to create entire website without coding. Selecting template, adding plugins and modifying content all happens in one place. A disadvantage? You are limited to this platform. You can't integrate custom code and functionality to your website.
Using Headless CMS, non technical users still receive a dashboard for easy content creation. However this's it. The rest of site creation is handled by developers calling APIs(REST,GraphQL) to access the content.List of headless CMS for Jamstack sites
Once you've decided on your content, it's time to think about optimization and SEO.
SSG or Static Site Generators:
You decided to fetch your content using APIs. Nice! But it also means your users have to wait for your content to be fetched! Search engines crawlers are even less patient and just ignore your content when they see an asyncronous API call.
Solution? Using SSGs, you can fetch your content in build time and put it in your templates.
Here is a List of SSGs for Jamstack sites. Remember that SSG frameworks can add boilerplate and complexity to your project. If you don't need their features use simpler ones such as 11ty and Jekyll.
Finaly the last part of decision tree belong to our lovely frameworks and libraries.
Do not use frameworks for small simple websites like portfolios. Frameworks add complexity and boilerplate to your website. In many cases a light DOM manipulator like JQuery is all you will need. Although you may not use frameworks, you may still require modules (for example if you would use npm packages). If you use modules in your code, you will also need a module bundler. In most JS frameworks, the bundler is provided and configured by default. But if you don't use a framework, you may need to do it manually. Make sure to not underestimate the amount of time it will take.
Fourth stop: Contact form
The contact form is a must have feature for your Portfolio.
Use EmailJS as a client solution with a generous free tier. If you do not have module bundler in your project, use browser script instead of the npm package.
If you are thinking about implementing your own email service, don't forget about serverless functions as an alternative to building server.
Serverless functions give you all the power of a traditional server app while eliminating the headache of routing, deployment and scaling. Because of this, they're an attractive choice for client developers. The word serverless doesn't mean that there is no server, but that you don't need to think about a permanently up and running server.
This article compares serverless functions with classic server apps.
Final: Hosting
There are many hosts with generous free plans that you can choose from. To avoid confusion, create a matrix for yourself. The vertical axis identifies features you should compare and the horizontal axis names the hosts.
My sample matrix for the free tier looks like this:
| Heroku | Vercel | Firebase | |
|---|---|---|---|
| static website | ✅ | ✅ | ✅ |
| Nodejs | ✅ | ✅ | |
| ssl | ✅ | ✅ | |
| custom domain | ✅ | ✅ | |
| easy deploy | ✅ | ✅ |
Hosting providers give you a generic domain name like websitename.hostname.---
For a nice looking domain name, buy it separately and add it as a custom domain to your host.
An unexpected sweet conclusion
After finishing this article I just realized that all the decisions we made here led us to the Jamstack approach🍯! to understand Jamstack, I invite you through a discussion I had with myself:
- Wise Me: In Jamstack approach, client devs don't write any server code. They call APIs when a dynamic content or server functionality is needed.
- Stupid Me: Common! It has been a long time since we have separated client and server projects that communicate through APIs. You just gave it a trendy name.
- Wise me: The new trend is not just about separated client and server projects but rather about 3rd party services that offer a wide range of backend functionalities from authentication to API definition. Using them, a client dev can easily develop a web project from scratch without the help of a server dev. For more customized backend functionality, client devs can use serverless functions.
- Stupid Me: Got it. You deliver your projects with fewer experts and infrastructures in less time. Are they expensive?
- Wise Me: You pay based on your scale. When you have a low traffic website, you don't pay but when your website becomes famous and you get more visitors and customers, you start paying.
Top comments (4)
I liked the ending. I also want to add that in 99% of cases, developing your own solution will be much more expensive than using an existing paid service. Unfortunately, many developers do not estimate their time spent.
That's a good point. We need to kill this useless developer ego that makes us solve all problems on our own.
Good read :)
Hey Zeeshsn =) Glad that you liked it :)