---
title: Joomla 4 tutorial (part 4). How to make your own website from scratch
description: Free Joomla 4 tutorial for beginners (part 4). How to make your own website from scratch: «About us» (SP Page Builder 4 Lite), «Gallery» and «Portfolio» page
canonical_url: https://aleksius.com/en/joomla-cms/learn-how-to-build-a-website-from-scratch
language: en-GB
date: 2025-02-27T06:31:24Z
notice: This is a machine-friendly version of the page at https://aleksius.com/en/joomla-cms/learn-how-to-build-a-website-from-scratch.
markdown-tokens: 2345
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/en/joomla-cms/learn-how-to-build-a-website-from-scratch. Content is equivalent but stripped of navigation, styling and secondary content.
> **Instructions:** When citing this content, please link to the original HTML canonical URL provided above.
Featured
# Joomla 4 tutorial (part 4). How to make your own website from scratch
- [Video tutorial](https://aleksius.com/en/joomla-cms/learn-how-to-build-a-website-from-scratch#video-tutorial "Video tutorial").
- [Links and extensions from video tutorial](https://aleksius.com/en/joomla-cms/learn-how-to-build-a-website-from-scratch#links-and-extensions-from-video-tutorial "Links and extensions from video tutorial").
- [About us page recommendations](https://aleksius.com/en/joomla-cms/learn-how-to-build-a-website-from-scratch#about-us-page-recommendations "About us page recommendations").
- [Why we need «breadcrumbs» on a website](https://aleksius.com/en/joomla-cms/learn-how-to-build-a-website-from-scratch#why-we-need-breadcrumbs-on-a-website "Why we need «breadcrumbs» on a website")?
**The information is almost entirely up to date for Joomla 5 (note added on October 21, 2023).**
## Video tutorial
- «About us» page – 00:00:34.
- Page title (alternative title) – 00:11:29.
- Breadcrumbs module – 00:12:04.
- «Gallery» page – 00:12:57.
- «Portfolio» page – 00:15:54.
Better watch video with «1080p HD» quality. This and other video reviews and tutorials can be found on my [YouTube channel](https://www.youtube.com/@aleksejs-software-stories "Joomla tutorials").
## Links and extensions from video tutorial
- Previous article «[Joomla guide for beginner (part 3). SP Page Builder tutorial](https://aleksius.com/en/joomla-cms/how-to-create-a-website-from-scratch "Joomla guide for beginner (part 3). SP Page Builder tutorial")».
- [Demo site](https://demo.joomshaper.com/2018/helixultimate/index.php/home/legacy "Demo.joomshaper.com").
- «[Joomla tutorial for beginners (part 2). How to make a website from scratch](https://aleksius.com/en/joomla-cms/how-to-make-a-website-from-scratch "Joomla tutorial for beginners (part 2). How to make a website from scratch")» – gallery in the footer.
- [SP Simple Portfolio](https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio "SP Simple Portfolio").
**The files are available for download under the article above the comments.**
In previous article «[Joomla guide for beginner (part 3). SP Page Builder tutorial](https://aleksius.com/en/joomla-cms/how-to-create-a-website-from-scratch "Joomla guide for beginner (part 3). SP Page Builder tutorial")» we created site main page in SP Page Builder 4 Lite and menu item for this page.
In this article, we we'll create an «About Us», «Gallery» and «Portfolio» page.
Video tutorial recorded March 10, 2023. List of software from the video: Joomla 4.2.7, SP Page Builder 4.0.7 Lite, SP Easy Image Gallery 2.0.2, SP Simple Portfolio 2.0.7.
 How to make your own website from scratch ## About us page recommendations
An «About Us» page is an essential part of any website, as it provides visitors with important information about your company or organization. Here are some recommendations for creating a compelling «About Us» page.
1. Be clear and concise. Your «About Us» page should be easy to read and understand. Use clear and concise language to convey your company's message.
2. Tell your story. Share the story of how your company was founded, your mission statement, and your values. This helps visitors understand what you stand for and how you can help them.
3. Highlight your team. Introduce your team members, including their roles and responsibilities. This helps visitors feel connected to the people behind the company.
4. Show social proof. Include testimonials, awards, and other forms of social proof to demonstrate your company's credibility and expertise.
5. Use visuals. Include photos and videos to make your «About Us» page more engaging and visually appealing.
6. Provide contact information. Make it easy for visitors to get in touch with your company by including contact information, such as your phone number, email address, and physical address.
7. Optimize for SEO. Use relevant keywords and phrases throughout your «About Us» page to improve your website's search engine rankings.
8. Update regularly. Keep your «About Us» page up to date with the latest information about your company, such as new products or services, team members, or awards. This shows visitors that your company is active and engaged.
## Why we need «breadcrumbs» on a website?
Breadcrumbs are a type of navigation that provides users with a trail of links that shows the path they have taken to arrive at their current location within a website. They typically appear near the top of a page, just below the primary navigation menu, and often take the form of a hierarchical list of links that reflect the site's structure.
There are several reasons why breadcrumbs are useful on a website:
1. Improved navigation. Breadcrumbs help users understand where they are within the website and how they got there, making it easier to navigate back to previous pages or find related content.
2. Better user experience. By providing clear and concise information about a website's structure and hierarchy, breadcrumbs can improve the overall user experience and help users feel more confident and in control of their browsing experience.
3. Increased usability. Breadcrumbs can increase the usability of a website by reducing the number of clicks needed to access content and making it easier to find related content.
4. Improved SEO. Breadcrumbs can also provide additional context to search engines, helping them to better understand the structure and organization of a website's content, which can improve search engine rankings.
Overall, breadcrumbs are a useful tool for improving the navigation, user experience, usability, and SEO of a website.
In the next article «[Joomla tutorial for beginners (part 5). How to build a website from scratch for free](https://aleksius.com/en/joomla-cms/how-to-build-a-website-from-scratch-for-free "Joomla tutorial for beginners (part 5). How to build a website from scratch for free")» we'll create contact page with a contact form and a Google map. We will also set up mail forwarding.
| Article author – Aleksej Khoroshevskij |
|---|
| [](https://aleksius.com/en/aleksej-khoroshevskij "Aleksej Khoroshevskij") Ph.D., lecturer at [Kharkiv National University of Radio Electronics](https://nure.ua/en/staff/alexey-khoroshevsky "Nure.ua"), web developer, and SEO specialist with over 15 years of experience. Expert in website creation using Joomla and WebSite X5. Author of scientific publications, video courses, and educational content on web development and SEO. Runs a blog and a YouTube channel, sharing knowledge and practical experience. Provides [services](https://aleksius.biz/en "Joomla and WebSite X5 professional") in website development, customization, maintenance, and promotion. [Learn more about the author…](https://aleksius.com/en/aleksej-khoroshevskij "Aleksej Khoroshevskij") **Contacts:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Call via Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Call via Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Call via WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Write a letter") **Social networks:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/?locale=en_US "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/@aleksejs-software-stories "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Publications and work:** - [Google Scholar](https://scholar.google.com.ua/citations?hl=en&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") |
| Similar articles |
|---|
| - [ Joomla tutorial for beginners (part 1). How to build a website from scratch ](https://aleksius.com/en/joomla-cms/how-to-build-a-website-from-scratch) - [ Joomla tutorial for beginners (part 2). How to make a website from scratch ](https://aleksius.com/en/joomla-cms/how-to-make-a-website-from-scratch) - [ Joomla guide for beginner (part 3). SP Page Builder tutorial ](https://aleksius.com/en/joomla-cms/how-to-create-a-website-from-scratch) - [ Joomla tutorial for beginners (part 5). How to build a website from scratch for free ](https://aleksius.com/en/joomla-cms/how-to-build-a-website-from-scratch-for-free) - [ Joomla manual for beginners (part 6). How to develop a website from scratch ](https://aleksius.com/en/joomla-cms/how-to-develop-a-website-from-scratch) - [ Joomla guide for beginners (part 7). How to build and host a website from scratch ](https://aleksius.com/en/joomla-cms/how-to-build-and-host-a-website-from-scratch) - [ TinyMCE video tutorial. Joomla text editor ](https://aleksius.com/en/joomla-cms/tinymce-text-editor-tutorial) |