Building a Portfolio page with HTML, CSS and Flask (Python)


For the ones who lack expertise on JavaScript, Flask can be a very good option to build simple websites, portfolios and online forms. Flask is a Python library that acts as a micro web framework.

In this post, I'll be describing the steps I took to develop my first portfolio page.


HTML, CSS structure 🛠

In order to find a structure that aligns with my sketches, I basically look into several portfolio templates available online and inspected the code. From those templates, I took the components that I would like to see on my portfolio, and I did my own adjustments. Finally I divided the code into sections:

  • About section: Having the navbar, a profile picture, an image and short intro about me.

  • Skills section: With icons and progressive bars.

  • Projects section: A container with several Divs, with images and links to my projects.

  • Contact section: A contact form, so people can reach me out.

Flask Web Framework 💻

In order to launch the client (server), the only code needed is the following:

from flask import Flask, render_template, request

app = Flask(__name__)

if __name__=='__main__':

In order to render a certain HTML template, do the following:

def html_render():
    current_year =
    return render_template('index.html', year = current_year)

In the example above, you can see that I defined the variable current_year. In case you are wondering, I have done this, because in my HTML, I have a dynamic variable called year in my footer element:

<footer style="background-color: #f5deb33b; padding-top: 3%;">
        <p>Still running in {{year}}. Built with &#129505 by Me.</p>

With flask, you can define several variables on the HTML code, that will dynamically change according to your python code. These variables are then rendered in the render_template() function.

Note that for flask to recognize the CSS files, they must be inside a folder called "static".

Domain, hosting and deployment 🚀

If you are looking to have your own domain for a fair price I advise Namecheap. There you can find domains such as, .com, .org which are a little bit more expensive, but also very cheap options, like .xyz, .io, .tech, you name it 😉


For the hosting I'm using GCP (Google Cloud Platform), and with the help of Zeet I was able to jump all the DevOps steps. I just need to connect my GitHub account to Zeet, and the integrated DevOps tools do the rest. Every time I do a git push of my code, it automatically builds, and deploys it to a Zeet URL, it is indeed very useful and easy to use.

Of course, this easiness comes with a price, but at least it is free for the first 3 projects 😁


The GCP also comes with a certain cost, but since I'm not using Data Bases, Deep Learning or any order expensive computational activity in my website, I get to pay very few cents in the end of the month.

In order to map the domain bought previously, there are some steps to be done on GCP, I won't explain them, but you can easily follow them on this link.

Last Notes 📑

  • For the ones curious about the cost 💸: I bought a domain for 2€ per year, and last month I paid 0.20€ for the hosting. Pretty cheap right?

  • For the ones curious about the full code 💻: The post lacks a lot of code indeed, because it is quite robust the HTML and CSS part. The same for the python (Flask), part. However it is open source on my GitHub 👍.

  • Avoiding spam 🚽: I developed this website a while ago, but I'm just writing the post now, because at the very beginning I did the mistake of not having a reCAPTCHA 😆. Of course I ended receiving a lot of spam messages, so definitely very important to have a reCAPTCHA, if you have a contact form. I followed the steps of this article.

  • Ok, what about the website?

Almost forgot 😊, check it here:

🚀 🚀


Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support. 


Congratulations @macrodrigues! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 1000 upvotes.
Your next target is to reach 1250 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Support the HiveBuzz project. Vote for our proposal!

Flask is a good tool indeed, I decided to learn JS and go with react though!


You can earn passive income by delegation of tribe tokens to "The Cartel".

Click this banner to join "The Cartel" discord server to know more.


React is definitely more powerful, once I have some free time, I'm planning to learn it as well. Meanwhile Flask works pretty ok for simple websites 👌