Originally published in my weekly newsletter UX Things

So, people ask me a lot what’s the best way for designers to build their portfolios.

And I can see why it’s such a popular question. Portfolios are an important part of a designer’s career, and depending on your path, your portfolio website may limit your creative options.

One approach to get started is to take a step back and learn the basics of HTML and CSS, before diving into any of the tools.

As a result, you will understand what you’re designing for better, enjoy working with developers more, offer them better feedback, and generally enjoy working with them more.

This approach also enables you to have greater control and understanding over the visual presentation and user experience of your designs on the web.

And last but not least, it gives you the greatest degree of freedom when it comes to your own portfolio.

Learning the fundamentals

Learning the fundamentals of HTML and CSS is often overlooked, but it’s a straightforward approach for UI/UX and Product designers.

There are some great free and paid resources available to grasp the basics. Personally, I prefer practical books that require you to do the work rather than just reading through.

This book helped me get into web development, and after finishing the exercises, I felt confident about my skills. The book is still relevant today, despite its release date.

Head First HTML and CSS, 2nd Edition

If you’re not a big fan of books, give Freecodecamp a shot. It’s a free, practical and interactive. Recently, they released an updated version to learn HTML and CSS called “(New) Responsive Web Design”.

Recently, they released an updated version to learn HTML and CSS called “(New) Responsive Web Design”.

If you’re interesting in fast-tracking your learning, you can also check out my one-on-one coaching program. Within weeks, you'll be well on your way to building a portfolio you can be proud of.

Webflow

The first and most obvious choice is Webflow.

While it’s often said you don’t need to know HTML and CSS to use Webflow, the opposite is often true since Webflow’s UI can be quite complex for a beginner, and knowing the basics of code will result in having less frustration.

Webflow provides you with a visual interpretation of HTML (Layout) on the left-hand side and CSS (Styles) on the right-hand side, making it easier for you to navigate around.

Building your portfolio with Webflow offers several benefits, such as having full control over your portfolio, as well as an opportunity to learn the basics of web development, and learning Webflow itself.

Webflow tutorials

Webflow’s official channel on YouTube provides you with some fantastic tutorials. The effort Webflow has invested in educating their users sets it apart from any other tool when it comes to building websites.

The courses are well-organized, easy to follow, and quite engaging.

They also make great ads.

Alternatives to Webflow

Framer

A popular alternative to Webflow is Framer. Their focus has shifted in recent years from just being a prototyping tool to actually competing with Webflow.

It’s a an alternative worth exploring, especially if you’re trying to create interactive websites. Framer has a lot of built-in animations and interactions, making it suitable for creating engaging interfaces with motion.

Just like Webflow, Framer also has CMS support (basically integrated backend), and you can also publish your site online from within the tool.

I would recommend checking it out if you want a site with quite a bit of motion.

Semplice

If you’re still not sold on learning the basics of code, Semplice could be a great option as well.

It’s a WordPress-based portfolio tool with a vibrant community of designers and creators.

Their platform makes it easy to build a custom website — no coding required.

Notion

This one might come as a surprise, but Notion is frequently used as a portfolio tool by designers, as well.

Check out these free templates to get an idea on what can be achieved with Notion.

If you’d like to take it a step further, you can also assign a custom domain to your notion page. Several tools can do that for you, and it’s pretty easy to set things up.

Simple.ink, Super and Potion offer such services, to name a few.

Apply your learnings

As you’re learning new things, it’s always a good idea to think of a project where you can put your learning into practice. This is especially true for skills that are more on the technical side, where it’s easier to forget.

In an ideal scenario, this learning project could might as well be your portfolio website.

Ultimately, you’ll end up with a website that’s both functional and visually appealing, as well as efficient and easy to maintain.

Enjoyed the read? Check out my UX Things Substack for more design fun!