When I decided to build my portfolio website, I gave myself one rule:
No paid tools. Only free resources.
I wanted to challenge myself, learn new technologies, and prove that you don’t need a big budget to create a professional developer portfolio. If you’re a beginner web developer or just someone trying to build an online presence this guide will show you every free tool I used and how you can do the same.
1. Planning the Structure With Notion (Free)
Before writing a single line of code, I opened Notion and planned:
What pages I wanted (Home, Projects, About, Contact)
The tools I would showcase
The style and colors I wanted
My website goals
Notion helped me outline everything visually without needing any design software.
2. Designing the Layout With Figma (Free)
Next, I switched to Figma—a completely free design tool.
I created:
A simple homepage layout
A section for my projects
A clean navigation bar
A mobile version of my design
This made development faster because I already knew how everything should look.
3. Building the Website Using HTML, CSS, and JavaScript (Free)
I built the website manually using:
HTML for structure
CSS (Flexbox & Grid) for layout
JavaScript for animations and interactions
I didn’t use any paid libraries or frameworks.
Just clean, lightweight code that loads super fast.
4. Using Free Icons & Fonts
I also added:
Google Fonts for typography
Lucide Icons / Font Awesome Free for icons
Both are free and extremely easy to use.
5. Compressing Images With Free Online Tools
Large images can slow down a website, so I used:
TinyPNG
Squoosh
Both free, and they reduce image size without losing quality.
6. Hosting the Website on GitHub Pages (Free)
For hosting, I chose:
GitHub Pages (100% free)
It gives:
Free HTTPS
Fast global CDN
Easy deployment
Git version control built-in
All I had to do was push my code to a GitHub repo and enable GitHub Pages.
7. Getting a Domain Name (Optional but Recommended)
While tools like GitHub Pages give you a default domain, I wanted something personal.
To check domain availability quickly, I used a free domain checker I built, which makes it easy to know whether a domain is available instantly.
If you can't buy a domain yet, using the free GitHub Pages URL is perfectly fine.
8. Generating Website Content With Free AI Tools
Writing content for your website can take time, so I used free AI tools to speed things up:
AI Content Writer
I used it to generate clean descriptions for:
My About Me page
My project summaries
My homepage intro paragraph
Click here to check on the free tool
AI Email Writer
I used this to craft a simple but professional “Contact Me” auto-response message.
Click here to check out the free tool
Hashtag Generator
Useful when I shared my portfolio launch on social media and wanted the right hashtags to reach more people.
Click here to check out the free tool
All these tools saved me hours of writing.
9. SEO Optimization Using Free Techniques
To make sure my portfolio was easy for Google to understand, I added:
Proper meta titles
Meta descriptions
Alt text for images
Clean URLs
A fast-loading design
I also used Lighthouse (built into Chrome) to test my performance for free.
10. Final Touch: Adding a Contact Form Using Formspree (Free Tier)
I wanted people to reach me without exposing my email publicly, so I used Formspree, it lets you create a free contact form that sends messages directly to your email.
Conclusion
If you're building your own portfolio, feel free to use the same free stack. And if you want help generating content or checking domain availability, the free tools I used are available here:
All of them helped me speed up the process especially the writing part.
Top comments (0)