Memorise all HTML codes

Do I have to memorise all the codes of HTML and CSS to become a web developer?

A question that I have seen recently is, do I need to memorise all HTML and CSS tags to become a web developer?

Whilst it is important to know the basic layout structure using HTML, knowing every single element is not entirely possible. Plus seeing as HTML standards are ever-changing, what you know might be redundant in 5 years time.

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

It is vital to know some of the basic tags and HTML codes, but overall knowing everything when you start creating sites is not going to happen. There are approximately 110 HTML code tags, and changes are that you aren’t going to need to use all them in one page. In fact, you aren’t likely to even use 50% of them. Not only that, but there are also so many great resources online that provide useful snippets for you to use in your sites, such as:

The same applies to CSS and styling. The most important rule to remember is . signifies a class, and # signifies an id. So when you are writing CSS code, it is important to remember what you are referencing; the HTML id or the HTML class.

Again, just like HTML, CSS is always changing and more style properties are being added or removed. The hardest thing that I have remembering regarding CSS styling is the hex color codes. There are 256 hex-color codes, so good luck trying to remember every single variation. 

So all-in-all, it is not entirely possible or is it even important to memorise all HTML and CSS codes to become a web developer. The more you learn and developer, the more you will remember.

And then on top of that, there are different front-end frameworks to take into account, such as Bootstrap and Foundation. Whilst using such frameworks aren’t essential, they are popular in modern design and are used on the biggest sites and web platforms. They use HTML, CSS and JavaScript, but it is their own CSS classes that make their platforms unique. Knowing the basics to create a Bootstrap site can be important if you want to create a modern, responsive site. But, again, knowing every simple class can be mind-blowing, so using some of the listed resources above can be essential in helping you create better sites.

IDEs

Lastly on why memorising all HTML and CSS codes to become a web developer is not essential is because all good IDEs (Integrated development environment) have a built-in intel-sense that works like an auto-spell/suggest to help you write better code. Good examples are IDEs are:

  • Visual Studio Code
  • Visual Studio (Professional)
  • Brackets
  • Atom
  • Cloud9
  • Aptana
  • PhpStorm
  • DreamWeaver
how to create a clickable image in HTML

How to make a clickable image link in HTML

A question that I recently came across recently was about how to make a clickable image link in HTML. 

A clickable image can be a fun and unique way of linking a user to another page, instead of using a text-link.

The process is to create an anchor tag, whichever you prefer it to by. Within the open and closing tags, add an image tag.

<a href="https://en.wikipedia.org/wiki/Guns_N%27_Roses">
<img src="gnr.jfif" alt="guns n roses">
</a>

And there we go, how to make a clickable image link in HTML.

how to buy a web domain

How to buy a domain

What do you do when you have your website created? Do you know which platform to host with? Do know how to buy a domain?

Purchasing and assigning a domain to your website is not overly difficult, but if it is your first time, it can be a bit overwhelming. 

What is a web domain? 

And why do I need to know how to buy a domain?

A web domain is essentially the name of your site. Google.com is a domain. Google is the site name. Facebook.com is a domain name, and Facebook is the name of the site. DIY.com is a domain name, and B&Q is the name of the site/business. The domain name that you purchase doesn’t have to be the exact name of your site or business, but it does help. I have also read that your domain name can help your site in Google’s page rankings. Whilst it might help, depending on the keyword that you’re searching for, it won’t be a determining factor.

Owning a domain name will add authority to your site, as opposed to having a free domain name such as myshoeshop.wordpress.com – for example. Some platforms such as WordPress.com offer free hosting with a free WordPress domain name. Whilst this might sound good, actually owning your domain name and just a sub-domain * will make your site look more professional. It is ok to get started, but for the long-term, I’d recommend purchasing an actual domain.

Knowing how to buy a domain is important because it is important to know that you have shopped around the web for the right price – although they never usually differ greatly, as well as that you are aware of how to transfer the domain and point it at your website hosting.

Also, who knows, in the future, you might want to purchase another domain for another site.

Where to purchase a domain…

There are many domain name sites that offer great value, and some even offer to host as well. I have used GoDaddy and Joker, so for me, those are my top 2 choices, but feel free to take a look at which one offers you the best value. 

Each site will have a search box so that you see whether or not your desired domain name exists. Depending on which domain extension that you choose will also play a factor in how much your domain will cost. For example, a .com domain might differ in cost compared with a .online or .net. So be sure to choose the correct one that will match your site. You could purchase multiple domains and have them redirect to the same site.

When you have found your domain name, simply add it to your basket. Complete the registration and payment forms. Add a coupon code if you have one. If you would like, you can purchase the add-ons, but up to you.

There you have it, done!

You will receive an email with your login credentials as well as a confirmation of purchase. Simply log in to the admin menu and select your domains from the dashboard or menu. Here you will see the details regarding the domain such as ownership – which will be your details and nameserver details. The nameserver addresses are what you need to point your site at your hosting provider. If your hosting provider is the same as where you bought your domain from then you do need to worry about changing these values.

Elemetor Tips

Top 7 Easy Elementor Tips That You Need to Know

What’s great about WordPress is that there are many ways to create a great looking site. You can hand-code a site, or you can use a page builder (or use both). Elementor is one example of a page-builder available, and it is a tool that I started using when I started back into WordPress development, and it is a great tool for making professional-looking sites.

For a tool that has been available since 2016, it has surpassed the 5-million marker for sites using Elementor. So, if you’re new to Elementor, here are 8 Easy Elementor tips that you need to know. All of these features are available in the free version.

Animations

Adding a bit of flare and custom-loading to your site really does make the difference sometimes. And with Elementor, adding animations to your page-load or even to an element can be really easy-to-do.

Within the page that you are editing within Elementor, select a widget; for example a button. Select the advanced tab, and Motions Effects. This will allow you to animate the button element. So, in this example when the page loads, the button will slide-into the screen from the left. Neat, huh?

Shape Divider

elementor tips shape divider

I find using the shape divider element adds an extra bit of class and uniqueness to a site. If you have a landing page that is full of blocks of text, a good way to separate each block is to use a shape divider. It makes it obvious to the reader that the next block is different to the previous, and also makes it stand-out more.

Not only that, but they look pretty cool. They are easy to implement, but they might take a few more minutes to tweak to get exactly perfect how you want it.

Responsiveness

elementor tips responsive testing

Mobile responsiveness is key to web development today, especially if you want users to view your site on their phone, tablet as well as big-screens and laptop.

Having a multi-responsive website is also good for ranking higher in Google, because having a site that renders well in various screens sizes is a key attribute for Google liking your site.

To test your Elementor site in various dimensions, simply select the monitor icon at the bottom of the Elementor editing side-menu. You will then be presented with three different dimension previews. Very useful for showcasing what your site will look like on a mobile, tablet or desktop screen.

If we feel that a certain element or widget does not suit a mobile screen, there is an option to hide it. Very easy to-do, simply select a widget, for example a button, and then select the Advanced tab, and Positioning. You will then see three options – all of which by default should be set to show on all screens.

elementor tips Responsive

Positioning

elementor tips positioning

Staying in the Advanced menu is the Positioning menu. This allows you to change whether or not an element or widget is set to full-width, or what position styling will be associated with it:

Absolute, fixed or default. Changing the positioning to fixed or absolute does mean that you can change the offset for horizontal or vertical orientation. Playing around with the positioning could, however, result in the element not being fully mobile responsive.

Defining Layout Structure

elementor tips layout

Perhaps one of the easiest and most-obvious of the Elementor tips is choosing the layout structure for your web pages.

On your page you will see a plus icon (+) , select it and the press the other + icon. You will now be able to chose your layout block structure. This means that you don’t need to spend ages customising the CSS or HTML to get a section looking perfect; all it takes is a few clicks. There are twelve layout structures to choose from.

Theme and Global Settings

elementor tips theme settings

Whilst I did say that these Elementor tips are all available in the free version, the ability to add global settings is not. However, this option is available if you do purchase the premium version, and it basically allows you to create custom settings for your entire site such as the content width and height. Global settings also allow for an element to be edited once, and then have the same values throughout the site. For example, if you wanted all buttons to be blue, simply set the value in the global settings to ‘blue’ and every button will be blue. No more copying and pasting or individually amending.

The theme settings are just as useful and similar though and are available in the free version. You can set the site/theme font, adjust the content width, change the breakpoint for your site on phone and tablets, amend the page title and choose whether or not show or hide it.

Version Control

elementor tips version control

Occasionally we get a bit too mad with our creative endeavours and we somehow go from a ‘perfect’ looking site to something that looks ruined. And all it took was a few mouse-clicks one late-night. And you can’t remember what you did, or how you did it.

Luckily Elementor has an undo feature – which is a lot the feature on your word processing software. However, you can also make changes you have submitted the update button. In the Elementor menu, there is a version control tab and this allows you to ‘go back-in-time’ to a change where you are happy going back to. A very handy and useful addition.

Free Premium Add-ons

elementor tips essential addons

So, if you don’t feel like purchasing the full version of Elementor, you can, however, add plugins from the WordPress Plugin Library to your site and once activated will add additional widgets to Elementor. Ironically, there are premium additions to these plugins too. But, none the less, I have found the Essential Addons plugin very useful, regardless if you are using the free or premium version.

Get started with Elementor, today and try this useful Elementor tips on your next site.

To learn more about web development and WordPress, check out more posts at JoshLister.com/blog

acf repeater

Using Advanced Custom Fields: Repeater

Advanced Custom Fields are a great way of adding content to a WordPress site that can be easily edited in the Admin section, without the need to touch the markup/PHP pages.

In this guide, I’ll quickly show you how I created a carousel/image slider using Advanced Custom Fields repeater. I wanted to use one for a site that I was building for my band, Luna Noise. Because of the Covid-19 lockdown in 2020, I thought why not start to build our online presence. We are a new project afterall.

The url if you are interested is http://lunanoise.joshlister.com/

Depending on when you visit it, will most likely depend on how finished the site is.

Anyways, so this is how I created the animated image scroller in WordPress.

For this tutorial, I will be using Visual Studio Code as my code editor. You can use whatever is best for you.

Go to your theme directory – wp-content\themes\themename

If you already have a page ready then skip the next few steps

Next, create a new PHP page, for example page-home.php

Within your PHP file, add the markup and styling, as you normally would. Save.

FlexSlider

Next, download the FlexSlider library from http://flexslider.woothemes.com/index.html

Extract the contents of the zip folder into your themes directory and add the jquery-flexslider.min.js file to your JS folder, and then add the flexslider.css file to the CSS folder.

Within your Functions.php file add the following:

function loadjs()
{
	wp_register_script( 'customjs', get_template_directory_uri() . '/js/jquery.flexslider-min','', 1,true);
	wp_enqueue_script('customjs');
}
function load_stylesheets()
{
	wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css', array(),false, 'all' );
	wp_enqueue_style('flexslider');
}

And then add references to the JS and CSS files like so

 <?php loadjs(); ?>

Also, you might also want to add a reference to the latest jQuery library too as I did come across issues loading the carousel and using the latest version helped.

Install Advanced Custom Fields

In your WordPress Admin menu, go to Plugins and search, install and activate the Advanced Custom Fields (ACF) plugin.

Next, add a new Custom Field.

Create an Advanced Custom Fields repeater field with the label Slides. Then just below add two sub-fields; image, header.

 Advanced Custom Fields repeater

Next, go to your home page within the Pages menu in the WordPress Admin. Add the content – images and text.

Repeater slides

Adding Advanced Custom Fields data to your page

Back to your PHP file. Add the following PHP while loop and div tags to whether you wish to display the carousel on the page.

<?php if( have_rows('slides') ): ?>
  <div class="flexslider">
    <ul class="slides">
    <?php while( have_rows('slides') ): the_row(); 
        $image = get_sub_field('image');
        $imageurl = $image['sizes']['slider'];
        $title = get_sub_field('header');

        ?>
         <li> <img src="<?php echo $imageurl; ?>" > 
         <p class="flex-caption"> <?php echo $title; ?>; </p>
        </li>
    <?php endwhile; ?>
    </ul>
  </div>
<?php endif; ?>

And within your JS file or within script tags add the following:

$(window).load (function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

And lastly test it and it should be working as you expect.

If you wish to change things, then do so. Reference the FlexSlider page for additional help.

woman-standing-while-carrying-laptop-1181354

Transfer a website to a new host

Recently I had to change my web hosting provider for an array of reasons such as speed and efficiency reasons. You might also have similar issues with your site; if you do, then follow this guide on how to transfer a website to a new host.

Transfer a website to a new host – Where to move your site

When you look to transfer a website to a new hosting provider you’ll be looking at where to move it. Depending on your budget, business or personal needs will determine which hosting provider to choose.

Here are 5 potential hosting providers that you should consider:

  • SiteGround – Virtual Hosting with data centres based all around the world such as London, Frankfurt and Sydney.
  • GoDaddy – provides both shared and managed hosting for WordPress. They are also perhaps the biggest name in web hosting and domain names.
  • BlueHost – Reliable shared hosting that is recommended by WordPress.
  • FlyWheel – Great managed hosting for freelancers and businesses. Also ideal if you use the Local desktop server too for easy server uploading.
  • WPEngine – one of, if not the best-managed WordPress hosting providers available.

Backup your site

Tools needed:

An FTP client application. I recommend FileZilla.

The Duplicator plugin.

Install and activate the Duplicator plugin from WordPress Plugins Store. A new menu will appear in the WordPress Admin sidebar called Duplicator. Click it and select Packages. Create New. Give it a name – something sensible such as today’s date for example. Check that you want to create a clone of the database and the website. Scan and then build. It should take a couple of minutes to create a clone file. When the process is complete a zip folder and a PHP file will be ready for you to download.

Download both the zip folder and the PHP file to your local machine.

Change Nameservers

Where ever your domain is currently pointing will need to be changed.

Within your new hosting provider, find the nameserver within the admin menu. If you are unsure where to find this, contact the support team for more information.

Next, log into the site where you bought the domain. This could be GoDaddy, NameCheap or Joker. Edit the Nameserver and confirm. It could a few hours for it to complete the changeover.

Upload site

Next, create a database for your site. Then create a database user. Remember to take note of the database name, the username and the password.

You will also need to take note of the FTP credentials too. Most web hosting providers contain a menu which contains the host server. You will most likely need to create an FTP username and password and grant access to which your desired directories.

Using your FTP application, enter the host name/server, the username, password and if possible the port number. Press the connect button, and you should have a file directory visible in the window. You will need to click the folder that has your site’s name and then click httpdocs. Remove any dummy files and then upload the compressed file from duplicator, as well as the PHP file.

Once the upload is complete, go to your chosen web browser (Chrome, Firefox, Safari, Edge) and within the address bar type your site’s url, forward slash (/) and installer.php. For example- examplesite.com/installer.php

You will then been presented with a menu screen that will scan your files for any errors. You will then need to enter your database name, user and password. Click test – if all is ok, then you can proceed. Once all of the stages are completed. Login via the link – this will then ask if you want to remove the installation files; select ‘yes’.

And there you go!

Your site is now live on a new and hopefully faster web hosting platform. You now know how to transfer a website to a new host.

wordpress laptop

What I learnt from the Cambridge WordPress Meetup – June 2020

8th June 2020 – Online via Zoom

The Coronavirus pandemic has caused a lot of disruption and chaos to businesses and people’s way of life in 2020. Seeing friends, family and work colleagues in person has been replaced with Zoom and WhatsApp calls. Normally, WordPress meetups take-place in a set room, but as with meetings of late, this one took place via Zoom.

I have to admit, this was my first Cambridge meetup, mainly because travelling to Cambridge is a bit of a trek for me, especially during a weeknight.

This months presentation was discussed images for WordPress, and it was presented by Chris Cox.

The main points from the presentation that I found were:

  • The image format WebP. This is a modern image format, developed by Google. It uses a far superior lossy and lossless file compression technique compared to both PNG and JPEG, meaning smaller file sizes and potentially faster web page load speeds. Learn more here https://developers.google.com/speed/webp
  • There are many image hosting sites that offer free downloadable images such as Unsplash, Pexels, Rijks Museum, LottieFiles, Canva, UnDraw, The Noun Project -Some of these are new to me, some aren’t
  • For those unaware, there are a few good image editing applications – great for resizing, compressing and creating logos etc with – Canva, PhotoShop and PhotoShop Element, Gimp, Paint and Paint.Net
  • There are plugins that can aid image compression and file size. One that was discussed a lot was Short Pixel – https://shortpixel.com/
  • A plugin called Media Library Assistant –https://wordpress.org/plugins/media-library-assistant/ This create categories, taxonomies, shortcodes and other custom fields for your images
  • Another plugin created by the same team that created Short Pixel, Enable Media Replace – https://en-gb.wordpress.org/plugins/enable-media-replace/ Useful for finding and replacing images, without the need for renaming and deleting
Wordpress or Blogger

WordPress or Blogger – What Should I use?

Today, thanks to the internet, anyone can create a blog and share their thoughts, research and interests to the world. There are many very good blogging platforms that exist, but today I will be discussing two of the big boys, and by the end of this article you should have decided whether to choose WordPress or Blogger as your go-to blogging platform.

Let’s start with WordPress

WordPress

As mentioned in previous articles, WordPress is the most popular CMS. Getting started is easy with WordPress.com. Just create your account and site name. For new-starters, you can use the free WordPress.com hosting. The means that your site’s URL will look something like this: myblog.wordpress.com

If you want to host your blog on another server, or to use another domain then you can pay for a domain name and hosting from services such as GoDaddy or BlueHost. You can also purchase a premium domain name from WordPress.com too. I would recommend purchasing a domain if you are serious about your site, mainly because it makes your site appear more credible and professional. Depending on which domain type you choose, i.e..Com, Org, Rocks, Live etc… Will determine how much you will pay.

Once you have selected you domain, you will then be given a choice of payment options – click the free one if you prefer.

WordPress pricing

Using WordPress is rather easy, however, the Gutenberg layout builder on the Post and Pages screens might take some time getting used to.

The main menu screens that you will probably be most concerned with are: Posts, Media, Pages and Plugins. There is, of course, the Settings menu too as with all good systems. Within the Settings menu, you can change the date-time format, add your site’s logo, change the URL slug format etc.

The Posts menu is where you create your blog posts. To create a new post, highlight the menu and select Add New from the menu. Media is where all of your images and videos are stored. Pages is where you create your pages – home page, blog page, contact page, etc… Plugins is where you can see the list of plugins that you have installed and also where you can download plugins for your site. A plugin is essentially an extension for your site. A widget or an additional bit of code that helps your site.

On your new create post page aka blog post, you can use the block editor to start writing. The Add Title section will be the title of your blog and everything below it will be your text. Notice the plus icon. That is where you can add blocks. You might want to a heading tag (H1, H2, H3), a paragraph tag (p) or an image or a video block. Either way, be sure to check that out. On the right-hand side, be sure to upload a cover image too. This will act as the blog post’s main image or thumbnail image.

WordPress Gutenberg

When you are happy with your post you just hit the Publish button. Alternatively you can save and come back to it later, or preview the post before hitting the publish button.

Blogger

Blogger is owned by Google and therefore if you have a Google account (Android users should do) then you can sign-up/register and log-in using your Google account.

To get started with Blogger click the New Blog link. Create a name and description, and boom! You’re on your way. The Posts menu is where your blog posts are stored. To create a new one, press the big plus icon on the bottom-right of your screen. A blog post screen will look a lot different from WordPress. If anything it resembles a Word document. The layout is perhaps a lot cleaner and easier to understand. When you are happy with your blog post, hit the save icon (floppy disk) or the arrow icon to publish

Both WordPress and Blogger allow you to add a theme to your site, both of which have a large selection to choose from. You can then also change the layout of the site too. In Blogger this is in the Layout menu. In WordPress – Appearance > Customise.

The Good and the Bad

Blogger is definitely the easiest to create blogs with, however, that isn’t to say that WordPress is difficult, there is is just a bit more learning when it comes to the block editor. Both WordPress and Blogger have really good design layouts. When adding a design or redesigning your site, you might find that Blogger is easier than WordPress too. And also, analytical information is much easier to obtain in Blogger too. Whereas with WordPress you might need to install a plugin to obtain page view information, but with Blogger that isn’t the case. But, with both, you can link your site your Google Analytics account. As Blogger is a Google product it much easier to do this too.

For me, WordPress is the better platform as it allows developers to do more with a site. Blogger is great for just having a blog website, but if you require a site with a bit more information such as an about us page, contact form and possibly even a shop, then I would WordPress. But if simple is your thing then Blogger might be your system, but that’s not to say WordPress is difficult to use. Not at all. So, when choosing WordPress or Blogger the choice is up to you regarding the plans for your site.

Windows keyboard

Can WordPress run on Windows?

WordPress is the most popular content management system on the world-wide-web today, and it is built upon the open-source language, PHP. Typically, WordPress is users update their blog, or their site using the online editor. This is totally fine. But, what if you want to make some serious amendments to the site? Could you run WordPress locally? And can WordPress run on Windows? The answer to these questions is yes, you can run WordPress on Windows. Let’s see how…

What you need

Firstly, you will need to download a local PHP server. I would recommend either the following:

  • FlyWheel Local
  • WampServer

I will talk about the differences between the aforementioned local servers (plus others) in another post, but if you want something simple, the FlyWheel’s development package might be suitable for you, as it does not require you to download a version of WordPress from WordPress.org; and the setup wizard is fairly simple. But, for those that like things a bit more technical, choosing WampServer to run WordPress on Windows is also a very good, and popular decision.

Unlike Local by FlyWheel, you will need to manually download a version of WordPress onto your local machine.

To make your sites active, you will need to start the web service.

And, basically, that is that:

  • Install a local server
  • setup the local server
  • download the latest version of WordPress

Here is a guide on how to install Wamp and WordPress

And for those wishing to use FlyWheel…

Getting your files

Okay, so lastly, you will probably want to get your files that you’ve been working on your live site to your local environment. A good way to do this is to download the plugin, Duplicator. This plugin easily creates a copy of your files and your database with very little hassle. You will also need an FTP application too, I would recommend. FileZilla.

8 productivity apps

8 Productivity Apps to help you get stuff done

March 2020 – a strange, unique and somewhat scary time for every human today. With the outbreak of COVID-19, most of the world’s leaders have declared ‘lockdowns’ in their respected nations. Here in the UK, most workers have been told to work from home if they can. Some, unfortunately, cannot do so. And not only that, but visiting friends and going to bars and cinemas are a complete no-no. But, what are we going to do now with all of our spare time at home?

Well, now is the time to get more stuff done. Now is the time to work on those projects that you need or have wanted to get done.

Distractions and procrastination are the main things that are holding us back from completing our goals, or targets. Apparently, according to a recent statistical survey, only approximately 15% of UK citizens say that they never procrastinate. And the search volumes on Google for people wanting to ‘rid’ themselves of procrastinating is also alarmingly high.

But what solutions are there? Is there a magic wand that will help us improve our focus?

Almost…I have compiled a list of 8 productivity apps that you should try. Whether it is writing that book that you have been putting off doing so for years or just simply concentrating on getting more stuff done without looking at social media every 10 minutes. Because for every 5 minutes that we waste on surfing the web for irrelevant things, it takes us and another 15 minutes to get back into the mode of working hard again.

Microsoft To Do

To get the 8 best productivity apps list start is something from Microsoft. Originally known as Wunderlist until it was acquired by Microsoft. It is a simple list application that essentially replaces oneself from creating hundreds of post-it notes. You can create multiple lists, for example, you could create ‘project to-do list’, and then create a ‘shopping list’, and then perhaps a ‘music schedule list’. To complete a task, simply tick the box. You can create an objective date, so if you wanted to complete a task for the upcoming Friday you can do so. You can also share your list with work colleagues too.

This app is available on Windows 10 PCs, Android and IOS mobile devices.

MeisterTask

MeisterTask is what is known as kanban task system. Translated as signboard/billboard from Japanese; a kanban system is part of the lean methodology. It is essentially a board with a list of tasks that are separated into different columns or swimlanes. For example, you might have a ‘to-do’ column, and then ‘doing’ column, and then lastly a ‘done’ column. Depending on the status of the created task will determine which column it will fall into.

It is ideal for scheduling tasks and project work and it can also help teams track the progress of a project and also set deadlines.

What I like about MeisterTask is that you can do so much within the free plan. If you would require in-depth reporting, then I would consider looking at the premium plans available.

This is available from https://www.meistertask.com/app and can be used on your web browser, from your smartphone and also in Microsoft Teams.

Pomodoro

There are many Pomodoro timer/tracker apps. But, what is a Pomodoro timer? I hear you ask. Pomodoro is the Italian word for tomato. It originates from a university student using a tomato timer to work for a set period of time – 25 minutes. After 25 minutes, one can then have a 5-minute break. It is a great way to focus on tasks by tricking your mind that you have to beat the clock. A little bit like the show Countdown, except that you have 25 minutes, not 30 seconds to complete an objective.

I recommend using this app from the Android store – https://play.google.com/store/apps/details?id=com.hamatim.podomoro&hl=en_GB

Pomodoro timer

AppBlock

Available on Android; this app is ideal for those that get easily distracted by the flashing lights and alert noises that our phones emit during the day. We as humans crave attention and being liked. Such emotions cause an increase in endorphins which is why we are ‘addicted’ to our phones. AppBlock easily allows you to block certain apps from being used within user-created time-slots. For example, if you wanted to block yourself from using WhatsApp, Instagram, Twitter and Facebook Messenger between the hours of 9-12 am, then AppBlock is perfect for you. It creates a screen overlay that prevents you from using the app – unless of course you are very sneaky and you disable it.

Block Site

A similar concept to AppBlock, but I use Block Site’s Chrome browser extension to set the times and sites that I want blocking. It is great for blocking news sites, social media and shopping sites – for whenever your mind starts to wonder about those bizarre questions that randomly pop into your head during the day.

Both Block Site and AppBlock are great productivity apps because they stop you using apps and websites that prevent you from doing what you need to do. Sometimes just sheer will and dedication won’t work.

Habit Bull

An app that allows you to create tasks, but with a difference. Habit Bull lets you assign tasks to a calendar as well as alerting you about your tasks. It is ideal for those wanting to start tracking their progress such as guitar playing, quitting smoking or tracking time spent on social media or event tracking money spent.

There are widgets and also the ability to export your data to the cloud or to a spreadsheet. Plus it also has motivational images.

Trello

One of the most popular productivity apps; Trello might not have as many features as MeisterTask and you are limited to the number of boards you are allowed to create in the freemium version, but it is simple to use and is perfect task creating and tracking. You can edit your boards to include the perfect colour or image and you can also share your boards with colleagues.

See this article from Zapier on how to get the most from Trello. It’s really simple and effective. https://zapier.com/blog/how-to-use-trello/

Trello

TicTok

No, I don’t mean the video-sharing platform TikTok. TicTok is an app that allows you to create projects and then input the time that you spent working a particular task as well as the potential earnings. You will be alerted during the day to log times, see detailed stats on your projects and much more.

TicTok is ideal for those that are self-employed as it allows you to track your time and performance as well as your earning potential.