Create a Portfolio

Enough of this theory and preparations! It's time to roll up your sleeves and jump into the code 🚀

In this tutorial, we'll learn how to create an impressive portfolio that you can later use as your own in real life.

We will use advanced flexbox techniques to create a complex layout and we take advantage of the full potential of the TW Elements package. Click the button below to see a demo of the project we will build.

See the final demo

Let's start!

Note: If the project setup or file structure are unclear to you, go back to the "Setup overview" lesson from the previous section.

Step 1 - prepare index.html file

But before me move further let's remove unnecessary code from index.html file so we have a place for our new project.

Below the opening <body> tag you will find the opening comment:

<!-- Start your project here-->

and at the bottom of the file you will find the closing comment:

<!-- End your project here-->.

In between is the code with the TW Elements welcome message:

Remove it, save the file, and refresh the browser. You should see a completely blank screen.

Now we have a place for our new project.

Let's also remove unnecessary (for this moment) dark mode classes from <html> and <body> elements:

Remove it, so at the end your index.html file looks like this:

After saving the file you should see a completely white screen in your browser window.

Step 2 - prepare the basic structure

Our project needs a basic structure to keep the code organized.

It may not seem that important at first, but you will appreciate this approach when the amount of code starts to grow exponentially.

Add the following code to your index.html file below the opening <body> tag:

After saving the file and refreshing your browser, you will still see a blank page. This is fine, because the structure we added doesn't have any elements to render yet.

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.