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 demoLet'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:
<!-- 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:
<!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:
<!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:
<!--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.
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.