October 4, 2020•543 words
A portfolio website is more than a simple resume. It is a thing that proves that you can do what you talk about in your resume. Making a good-looking Portfolio website is good but too many things will make a mess and would likely take much time to load.
Today, we are going to make a static portfolio website using many frameworks such as tippy.js, popper.js but mostly we are going to use tailwind.css.
Folder Structure :
What is Tailwind CSS?
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Tailwind is A utility-first CSS framework for rapidly building custom designs. It was made by Adam Wathan and Steve Schoger.
Why should I choose Tailwind over Bootstrap?
There are many reasons why you should consider Tailwind over Bootstrap
- It is more lightweight - The good thing about Tailwind is that it is very lightweight. Tailwind compressed is 45.2kB while Bootstrap compressed is 147kB.
- The documentation is easier to read than bootstrap - This may change from people's views but I think that Tailwind has better documentation than Bootstrap. The reasons are that you can quickly search by pressing / , they give examples with normal CSS in the right. Easier To Understand3. It is easier to write and read - In Bootstrap, If you wanted to have a custom style, you had to create classes that come close to Bootstrap's classes but just needed to be just a little bit adjusted too often. But if you use Tailwind, all you have to do is add it to the colors object in the Tailwind configuration file. That's it!
What are Tippy.js and Popper.js?
Did You Know? Medium uses Popper.js for its editor.
Let's start coding!
First, Let's make an index.html file and make a simple skeleton and the frameworks via CDN. Enter the code below.
Add the divs and classes
Now, we are going to fill the body tag with divs and classes. If you don't understand anything in the code, you can always comment it below or look it up on the Tailwind.css Documentation.
Add the background photo and profile picture
We must add the background and profile picture. Add the files and change Line 6, Line 16, Line 19, and Line 79.
Lastly, Add the JS
Everything is set except for popper.js so let's add the script.
It should look like this
The final code should look the same as below.
You have successfully made a static and responsive website with Tailwind CSS! You can make it better by adding many things such as the menu's, more pages, etc. If you liked it, don't forget to share it with your friends and/or give me a clap (plz). Thanks for reading!
"Create a Beautiful Portfolio Web Page using HTML and CSS" from https://www.udemy.com/course/thecompletewebdeveloper/
(I am not promoting/promoted)
(I have asked permission to make this)