ThemeXpert Blog

How to Create a Portfolio Website (Step By Step Guide)

Joomla-Portfolio-Website
Shams Sumon


10 mins
Those who are searching for how to create a portfolio website here is your easiest solution to create a portfolio website for free. Nowadays, creating a portfolio website is a much-needed topic as without having a standard portfolio website, you can't expect to present your works and achievements in front of your targeted audiences.

To own a portfolio website, either you need to buy a completed website from others, or you need to know the procedures on how to build a portfolio website. In this article, I have tried so high to make a complete guide on how to create a portfolio website so that you can build your own portfolio website rather than buying other websites for showcasing your profile.

So, let's explore the procedures in detail rather than searching for how to create a portfolio website here and there.

Why You Need a Portfolio Website?

An online portfolio brings many opportunities for your career and business. Your online portfolio will not only help get you more business, it also connects you with like-minded people who're looking to expand their businesses in the same direction.

There're many reasons to create an online portfolio. We're listing a few below so you'll understand the primary benefits of having your own portfolio page:

  1. Professional Way to Showcase Your Work: Building a website about your brand and experience is a polished way to share your expertise with others. Websites can be more creative and innovative than traditional portfolios and are able to share with anyone in the world.
  2. Smart Way to Share Your Resume: When someone asks you about your portfolio, you won't need to send it to them by mail or fax. You can simply share the link to your portfolio page.
  3. It's A Great First Impression For Employers: If an employer sees your website link in your signature or on your resume, they'll likely click on it to see what you've built. Seeing you've taken the time to build a website featuring work samples, recommendations, previous presentations and more will be a killer first impression.
  4. Increases Your Visibility And Online Presence: When an employer Googles your name, your professional portfolio will be one of the first search results that pops up.
  5. Better SEO: An online portfolio page improves your website's search engine rankings.

Requirements

  • Domain Name: Choose an easy domain name so that your user can remember your site name.
  • Web Hosting: Select a trusted source to buy web hosting.
  • CMS: Select a CMS platform.
  • Template: Pick a contemporary and responsive template.
  • Page Builder: Use a page builder as an editor. 

Step 01: Select a Domain Name

Before starting anything else, at first, you need an easy, simple, and relevant domain name. It's a key element of your website that gives the first impression to website visitors, affects your SEO, and defines your brand.

If you don't have any idea about where from you should register your domain name, you can visit Siteground to register your domain name. When you are selecting your domain name, consider the following tips (not mandatory).

  • It should be simple, so it's easy to remember.
  • Your domain name should end with .com, .net or .org.

Step 02: Choose a Web Hosting

Now, its time to choose a web hosting to reach another step to your dream. There are so many options to choose a web hosting around you. It may make you confused but I believe How to Select Best Web Hosting can definitely help you. 

You can select any of the web hosting providers; however, if you don't feel comfortable with their offerings, you can visit Siteground, you will get your preferred hosting with minimal costing. 

When you are dealing a web hosting, consider the following tips (not mandatory).

  • Page Load Speed: How fast is the hosting provider? It should load your site within a possible shortest time (500-700 ms).
  • Customer Support: You'll have to sort out issues with support at some point – therefore you should choose a host that has good-quality and responsive customer support.

Step 03: Install Joomla

You may think why I am using Joomla. Well, I have solid logic behind this decision. Before selecting Joomla, I have gone through a study about which platform is the best for a beginner type of developer. First of all, I read Joomla vs Wix, a details guide on the comparison. 

Though they clearly have shown how far Joomla has already gone, still I had some doubts about Joomla. Then, I read Joomla vs WordPress, and my misgivings totally disappeared. Now, I am convinced, for me, as I want to develop a portfolio website, Joomla is the best choice so far.

Let's start the installation phase. Besides these steps, you also can seek help from our organized video tutorials section.

Download Joomla Package File

  1. Download the current release of Joomla
  2. Downloaded Joomla file needs to be unpacked in the root of your site. Move your downloaded file to C drive > Xampp > htdocs > Create a folder and unzip there (in case you are using xampp localhost).

Database for Joomla Installation

You will need to note basic database information needed when your Joomla installation is started.

  1. Location of database, localhost? Or a specific host's server such as dbserver1.yourhost.com
  2. The database name
  3. The database user's name
  4. The database user's password

If your using localhost, then, navigate to localhost/phpmyadmin in your browser and click the Databases tab at the top and then create a database from there.

Make sure you remember the name of the database you created, as it will be required during Joomla installation.

Main Configuration

Navigate to localhost/yourfoldername. Here 'yourfoldername' is where you have moved your downloaded Joomla file and unzipped that file.

You will be presented with the following screen. Now, configure it by following the below steps.

  • Site Name: The name of your website — this can be changed at any point later in the Site Global Configuration page.
  • Description: Enter a description of the website (optional).
  • Admin Username: Joomla uses a default "admin" as the username for the Super User. You can leave it as is, or you can change it.
  • Admin Password: Set a password.
  • Site Offline: Click the Yes or No box. Yes - this means when installation is complete, your Joomla website will display the 'Site is offline' message when you browse to yoursitename.com to view the home page. No - this means the site is live when you browse to yoursitename.com to view the home page. You can use the Site Global Configuration in the Administration interface to change the Offline status at any time.

When everything on the first page is completed, click the next button to proceed.
You will get an interface like this,
Now configure this one.
  • Database Type: MySQLi is the common database used.
  • Hostname: Where is your database located? Common is localhost, but some hosts use a specific database server such as dbserver1.yourhost.com
  • Username: The username used to connect to the database
  • Password: The password for the database's username (keep it empty if you don't save password when you were creating your database).
  • Database Name: The name of the database.

Click the next button to proceed.

You will get an interface like this.

Clink on the install button and it will take some time to finish the installation process.

You will now be presented with a very similar Congratulations! Joomla! is now installed screen.

Now you can delete the Installation Folder. Click on Remove Installation folder and a success message will appear. Now you can navigate to the Administrator log in by clicking Administrator or go right to your site by clicking Site.

Step 04: Choose Template

​Before uploading a template, you need to know which template gonna best for you. There is a lot of modern designed Joomla templates, but you must decide which one will be the best fit for you.

Your selected Joomla template must be responsible as well as contemporary designed. Check the following factors while you choose a template.

  • Support: It's great to have technical support included, as these people can fix any issue for you.
  • Pricing Plan: It should be affordable like you must not buy or download a template with minimal features and maximum price.
  • Updates: Joomla constantly updates their system. Make sure your template provider also updates their templates frequently to make sure it will work with the latest releases.
  • Documentation: From time to time, you'll need to check some features to learn how they work. Be sure there is a place where you can do so.
  • Responsiveness and Cross-Browser Compatibility: This means your template should look great in every browser as well as on any mobile device.
  • Customizability: Check out which template features can be customized by yourself. For example, look for templates that have many module positions.

Here, I have chosen Startup - the best portfolio template for Joomla website. Reasons behind choosing the template is its features and functionalities.

Features of Startup

  • 1 Homepage with 5 Inner Pages
  • Typography Control
  • Mobile Responsive
  • Easy Customizable
  • Drag and Drop Development
  • Smooth Animation
  • Constant Update
  • Dedicated Support
  • Gantry 5 Framework
  • Speed Optimized
  • Quick-start Package included
  • Full-Featured Blog
  • Smooth Accordion
  • Quix Joomla Page Builder
  • Quix Particles
  • Built-in Pages
  • Cross-Browser Compatibility
  • Dynamic Navigation Menu
  • SEO Optimized 

Step 05: Upload a Template

Template uploading will take your no time. You just need to know the right procedures to upload a template. Let's do it together.

Go to Extensions > select Extension Manager > Browse the extension package file (template file) > Upload & Install.

Joomla gives three more options to install extensions.

  1. Install from web- User can directly install the extension from JED (Joomla Extension Directory)
  2. Install from directory- user can install the extension by giving the path of directory.
  3. Install from URL- user can enter the URL to the extension.

After that, you still need to activate template and you do that under Extensions > Template > Styles. Here, click the star icon to the right of the template name to make it the default for the entire site

Step 06: Customize the Template 

To customize your template go to Extension > Templates > Style then click on your default template.

Now customize each section as you want it to appear on your website to grab your user attraction.

Add Modules

To build a page from scratch, it's best to start by enabling the preview mode for module positions. This way, you can see on where exactly on your page you can add modules and the names of the positions.

Add ?tp=1 after your preview URL, then you will know all the positions where you can add Modules.

Now go to Extensions > Module, click New. A interface like the following image will pop up.

Select any of the options to display on your website. Add title, select position and finally click on "save & close". 

Check your preview to see the result.

​Thus you can add new page, content, module, banner, image, text, and other things that you need to appear on your website. 

Step 07: Add Extensions

Extensions are also known as plug-ins. These are like coded shortcuts that add extra functionality to your website. It can help you track the health of your website. You can add things like a shopping cart to your website. Joomla has a central extensions database at extensions.joomla.org. There are thousands of extensions to choose from.

You will be able to install the Extensions directly from the directory. Then go to Extensions tab on the Control Panel to access what you downloaded.

You can also install your desired Extension by following the same way like uploading template (Step 5).

Step 08: Preview 

As you develop the website, you can preview it. This will show how your design appears to other web users.
To access a preview, do the following:

  1. Go to Site>Global Configuration to access the "backend" of your website.
  2. Say "yes" to set the site offline option. Click Save.
  3. Click on the site name on the top right corner to access the "frontend" of your website. 

Now you are ready to deploy your website.

Final Words 

​Once your Joomla website is ready, try to share this resource with others so that it could assist them in building their website without facing any difficulties. In the meantime, let us know your thoughts on our guide in the comment box below. Your comments can improve our guide.

How To Create Small Business Website Without Codin...
5 Best Joomla Gallery Extensions to Create Awesome...

Build better website with ThemeXpert

Get access to all premium Joomla templates and
next generation page builder Quix.

Join our club
 

Comments (0)

There are no comments posted here yet

Leave your comments

  1. Posting comment as a guest. Sign up or login to your account.
Attachments (0 / 3)
Share Your Location