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:

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

.

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

HTML

<!-- Start your project here-->
<div
  class="mx-auto max-w-[540px] sm:max-w-[604px] md:max-w-[720px] lg:max-w-[972px] xl:max-w-full xl:px-12 2xl:max-w-[1400px]">
  <div class="mt-[200px] text-center">
    <div
      class="mb-4 flex items-center justify-center text-[40px] font-medium dark:text-neutral-100">
      <picture>
        <source
          srcset="
            https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp
          "
          type="image/webp" />
        <img
          src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.png"
          class="mb-1 me-4 h-[35px]"
          alt="logo" />
      </picture>
      TW Elements
    </div>
    <!-- Create a centered section with text and link below the text-->
    <div class="mb-4">
      <div class="dark:text-neutral-200">
        TW Elements is a collection of
        <strong>beautiful components</strong> that will
        <strong>speed up your work</strong> on TailwindCSS projects.
        <hr class="my-10" />
      </div>
      <div class="mt-10 grid grid-cols-2 gap-6">
        <!--Col 1-->
        <div>
          <p>Step 1: Check out our documentation resources:</p>
          <div class="mt-4">
            <a
              href="https://tw-elements.com/docs/standard/getting-started/quick-start/"
              target="_blank"
              class="inline-block w-[300px] rounded bg-primary-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
              QUICK START
            </a>
          </div>
          <div class="mt-4">
            <a
              href="https://tw-elements.com/learn/te-foundations/basics/introduction/"
              target="_blank"
              class="inline-block w-[300px] rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
              OFFICIAL TUTORIAL (FULL)
            </a>
            <div class="mt-4">
              <a
                href="https://tw-elements.com/docs/standard/getting-started/optimization/"
                target="_blank"
                class="inline-block w-[300px] rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
                OPTIMIZATION DOCUMENTATION
              </a>
            </div>
            <div class="mt-4">
              <a
                href="https://material-minimal.com/"
                target="_blank"
                class="inline-block w-[300px] rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
                DESIGN SYSTEM GUIDE + FIGMA
              </a>
            </div>
          </div>
        </div>
        <!--Col 2-->
        <div>
          <p>
            Step 2: <strong>Join our community</strong>. We're'
            <strong>waiting for you</strong>!
          </p>
          <div class="mt-4">
            <a
              href="https://discord.gg/TmkQWgwXU3"
              target="_blank"
              class="inline-block w-[300px] rounded bg-primary-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
              JOIN DISCORD as a member
            </a>
          </div>
          <div class="mt-4">
            <a
              href="https://github.com/mdbootstrap/tw-elements/"
              target="_blank"
              class="inline-block w-[300px] rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
              STAR US ON GITHUB
            </a>
          </div>
          <div class="mt-4">
            <a
              href="https://twitter.com/intent/follow?screen_name=TailwindElement"
              target="_blank"
              class="inline-block w-[300px] rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
              follow on Twitter
            </a>
          </div>
          <div class="mt-4">
            <a
              href="https://github.com/mdbootstrap/tw-elements/discussions/categories/support-from-community"
              target="_blank"
              class="inline-block w-[300px] rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
              USE SUPPORT
            </a>
          </div>
        </div>
      </div>
      <!--PS-->
      <div class="mt-10 pt-10">
        <p>
          <em
            >PS. TW Elements is open-source & community driven. Currently,
            we're looking for contributors for the
            <a
              target="_blank"
              class="font-bold text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
              href="https://github.com/mdbootstrap/tw-elements-React"
              >TW Elements React version</a
            >
            repository. If you're interested in contributing, please open
            your pull request on GitHub & contact us on Discord.
          </em>
        </p>
      </div>
    </div>
  </div>
</div>
<!-- End your project here-->

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:

HTML

<!DOCTYPE html>
<html lang="en" class="dark">
  [...]

  <body class="dark:bg-neutral-800">
    [...]
  </body>
</html>

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

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>TE Vite Starter</title>
    <!-- Favicon -->
    <link
      rel="icon"
      href="https://tecdn.b-cdn.net/img/Marketing/general/logo/small/te.ico"
      type="image/x-icon" />
    <!-- Roboto font -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
      rel="stylesheet" />
    <!-- Main css file -->
    <link rel="stylesheet" href="src/scss/index.scss" />
    <!-- Custom styles -->
    <style></style>
  </head>

  <body>
    <!-- Main js file -->
    <script type="module" src="src/js/index.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript"></script>
  </body>
</html>

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:

HTML

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

<!--Main layout-->
<main></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.

Demo and source code for this lesson

Ask question

Prev Next

About author

Michal Szymanski

@ascensus_mdb

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.

Basics

Tailwind CSS

TW Elements

MDB GO

Create a Blog

Create an eCommerce

Create an Admin Dashboard

Create a Portfolio

Step 1 - prepare index.html file

Step 2 - prepare the basic structure

Michal Szymanski

Step 1 - prepare `index.html` file