Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

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 MDB package. Click the button below to see a demo of the project we will build.

See the final demo

Let's start!

Step 1 - prepare index.html file

Let's remove unnecessary code so we have a place for our new project.

Below the opening <body> tag you will find the comment Start your project here and on line 46 you will find End your project here. In between is the code with the MDB welcome message:

        
            
    
    <!-- Start your project here-->
    <div class="container">
      <div class="d-flex justify-content-center align-items-center" style="height: 100vh">
        <div class="text-center">
          <img
            class="mb-4"
            src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
            style="width: 250px; height: 90px"
          />
          <h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
          <p class="mb-3">MDB Team</p>
          <a
            class="btn btn-primary btn-lg"
            data-mdb-ripple-init
            href="https://mdbootstrap.com/docs/standard/getting-started/"
            target="_blank"
            role="button"
            >Start MDB tutorial</a
          >
        </div>
      </div>
    </div>
    <!-- End your project here-->

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

Remember: You don't need to manually refresh the browser if you use Visual Studio Code editor and Live Server extension. Live Server will do it for you and automatically refresh the browser any time you make changes to in your code and save the file.
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:

        
            
  
        <!--Main Navigation-->
        <header>

        </header>
        <!--Main Navigation-->
      
        <!--Main layout-->
        <main>
          <div class="container">
      
          </div>
        </main>
        <!--Main layout-->
      
        <!--Footer-->
        <footer>
      
        </footer>
        <!--Footer-->

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.

But that will change soon. Click "next" to go to the next lesson where we will start building our portfolio.

Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at 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.