Joomla 4 (5) tutorial for beginners with no coding

In previous tutorial we talked about what you need to do before building a website, installed XAMPP local server and Joomla 4. We also learned how to back up you Joomla site and back up an entire XAMPP server.

In this article, we will install and configure Helix ultimate template, create a site header and footer, create gallery in SP Easy Image Gallery and work with Joomla modules.

Video tutorial recorded February 19, 2023. List of software from the video: Joomla 4.2.7, XAMPP Windows x64 8.1.12 0 VS16, Helix Ultimate 2.0.11, SP Easy Image Gallery 2.0.2. My computer is running Windows 11 Pro 22H2 х64 (22621.1265, Windows Feature Experience Pack 1000.22638.1000.0), browser – Firefox 110.0.

• How to start XAMPP and login to Joomla admin panel – 00:00:53.

• Joomla 4 template installing – 00:01:53.

• Joomla 4 extensions installing – 00:02:49.

• Joomla menu creating – 00:04:41.

• Helix ultimate setting up and header creating – 00:05:3

• Footer creating (working with Joomla modules) – 00:13:14.

• Preview module positions – 00:14:27.

• SP Easy Image Gallery – 00:18:01.

• Generating thumbnails error on XAMPP – 00:18:56.

Additional Information:

• Search for PHP function in «php.ini» – «extension=gd». This might help with error: «An error has occurred. 0 Call to undefined function imagecreatefromjpeg()».

• Preview module positions – «?tp=1».

In the next tutorial we will create a main page in SP Page Builder 4 Lite and create a menu item for it.

In previous tutorial we worked with Helix Ultimate template settings, created SP Easy Image Gallery module with images and added several modules to site footer.

In this article, we will create site main page in SP Page Builder 4 Lite and create a menu item for this page.

Video tutorial recorded March 01, 2023. List of software from the video: Joomla 4.2.7, SP Page Builder 4.0.7 Lite, Helix Ultimate 2.0.11.

• Creating a menu item – 00:01:16.

• Joomla SP Page Builder tutorial (creating a homepage) – 00:02:18.

• Checking the page on a mobile device – 00:20:21.

In the next tutorial we'll create an «About Us» page, «Gallery» page and «Portfolio» page.

In previous guide 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.

• «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.

In the next tutorial we'll create contact page with a contact form and a Google map. We will also set up mail forwarding.

In previous tutorial we created an «About Us», «Gallery» and «Portfolio» page.

In this article, we we'll create «Contact» page with Google map and contact form. We also configure Joomla email settings (SMTP).

Video tutorial recorded March 15, 2023. List of software from the video: Joomla 4.2.7.

• «Contact» page – 00:00:45.

• Joomla email settings (SMTP) – 00:04:24.

• Google map – 00:08:37.

Additional Information:

View template positions «?tp=1».

Gmail SMTP settings:

• From Email – «your mail»

• From Name – «any value»

• Mailer – SMTP

• SMTP Host – smtp.gmail.com

• SMTP Port – 465
  

• SMTP Security – SSL/TLS

• SMTP Authentication – Yes

• SMTP Username – «your mail»

• SMTP Password – «a special App Password, not a Google account password»

In the next manual we'll create a blog with comments, sharing buttons and YouTube videos.

In previous tutorial we created «Contact» page with Google map and contact form. We also configured Joomla email settings (SMTP).

In this article, we we'll create blog with comments, sharing buttons and YouTube videos.

Video tutorial recorded March 24, 2023. List of software from the video: Joomla 4.2.7, CComment Core 6.1.10, Social 2s 4.3.45, AllVideos 6.1.0.

• Articles categories – 00:00:30.

• Article creation – 00:01:12.

• «Category Blog» menu item type – 00:02:50.

• «Category Blog» layout – 00:05:26.

• YouTube video in Joomla 4 article – 00:06:20.

• Comments – 00:09:06.

• Social network sharing buttons – 00:10:48.

• «Articles - Latest» module in footer – 00:15:2

• Adding links to the main page – 00:16:40.

Additional Information:

.article-list .s2s_supra_contenedor.lang_directon_right.s2sdefault.align_right.s2s_balloon_bottom {display: none;}

In the next guide we'll transfer site to hosting, update Joomal and its extensions. Unfortunately, free courses on Udemy have a limit (up to 2 hours of video for the entire course). That's why I can't post the video on Udemy. But I can provide a link to the video on my website. Follow the link "How to upload a website to hosting".