Getting Started with Vue

Getting started with Vue – This is a tasty little guide into some projects that I created using Vue, and what I learned.

Vue (pronounced view) is a progressive frontend framework that utilises JavaScript to build components and user interfaces. Frontend web development appears to be heading in the direction of component and MVC (mode-view-controller) development, with React and Angular being two rival frameworks that one might consider.

With this quick introduction to getting started with Vue, I will show you what this framework can do, and how to get started with just prior knowledge of HTML and JavaScript.

Some prerequisites:

  • Prior knowledge to HTML and JavaScript
  • NodeJs installed
  • A packet manager – I use NPM
  • A good IDE – I use Visual Studio Code

Firstly, you will need to install Vue. To do this, open your IDE; Visual Studio Code in my case, create a new folder directory, and then go to the terminal and install Vue by using the following command:

npm install -g @vue/cli
or just npm install vue

If you don’t have huge experience using the command line interface then it might not be worth using the CLI version.

Next, create your project…

vue create 'appname'

It should then go through some setup commands.

How Vue works is that you have a ‘main’ vue file, called ‘App.vue’. This is essentially the main or index file. From here you can create your app or page structure, similarly how you might in a normal HTML page. You then import ‘components’ to this file. You create components in a components directory in your project. For example, you can create a header and footer components.

  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <app-header />
   <app-footer />

import Users from './components/Users.vue'
import AppHeader from '@/components/AppHeader.vue';
import AppFooter from '@/components/AppFooter.vue';

export default {
  name: 'App',
  components: {

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

A vue file consists mostly of separate parts:

  • template – where the markup is located
  • script tags – for writing javascript in the vue format
  • style tags – unless you use stylesheet file

Special markup

Your HTML markup will work differently now than when writing with ‘normal’ JavaScript or jQuery. Whereas before you could write a simple on click event, or easily bind items, vue has changed this, slightly. You can still reference elements by using getElementById, however.

Take a look at how you need to write a click event

<div class="col-md-4" @click="switchCharacter">

Now, within the script tag, and inside a method function

            fetch(`${id}`, {
            .then(response => response.json())
            .then(json => this.character = json)
            let random_id = Math.floor(Math.random()*83)+1

For more information. Check out this cool tutorial on Medium – Vue app in 5 minutes

Also, check out The Vue Js site for more information and documentation.

Why do we use SASS?

So SASS is something that I have been aware of for a while now, but it is only recently that I have started to properly use it. This might seem a bit confusing, or perhaps embarrassing, but it is quite common within the tech world to ‘put off’ using new technology. I have been to talks and I have read articles about SASS, but I was quite happy using normal CSS (CSS3). However, to answer the question, why do we use SASS? The answer is very much to do with simplicity.

The problem with CSS is that you can create many different styles based upon classes, ids, elements and data items. And the syntax can at times get messy, especially when trying to reference nested elements and list-item elements.

To setup: Go to and install Chocolately for your machine by using the following command in either Command Prompt or PowerShell

choco install sass

Next, you will need to do a change directory command to your project’s directory – using the cd command.

Whilst There are a list of various commands, the two main that I use are: sass –update styles and sass –watch styles. Please note that styles is the folder where the SCSS files are kept. In your project, this might be named differently.

The reason to why do we use SASS is keeping code clean. This also includes file referencing. Instead of referencing multiple files for different functionality, you can just reference one main file, and within that file link to other SCSS files. For example, you can import a stylesheet to reference difference colours as a variable name, and another that uses mixins or extensions. See the below examples.


sasscss compare
Image taken from

As you can see, comparing SASS to CSS, there isn’t too much different in-regards to syntax, however, because it is a preprocessor language, it allows you to create variables for items such as fonts and colours (color), instead of duplicating the name various times within a file.

One I made earlier
Image taken from

Here is another example of how nesting works in SASS/SCSS. Whilst CSS obviously uses nesting, SASS makes it easier to read by allowing you to create a parent style, and within that parent add child styles, without the need to re-use the parent name. In this example, the parent name is the element nav.


Why do we use SASS?

A mixin is style block that is created so that lets creates declarations that can be used throughout your project. Notice how it looks like a function. This is because it allows a developer to pass values to it, allowing certain, specific changes to be made, such as the colour change to the hover on an anchor tag.

This is it for now. Short, and sweet. But, it has been good to get my teeth in SASS. Another note, is that you don’t have to use Chocaltely as your preprocessor renderor, you can alternatively use Gulp.

This article is very much a beginners guide, and will also hopefully serve as an influence to those wanting to make the leap using SASS.

Creating a weather app using HTML and JS

This will be blog post #1 of a new series where I will showcase a new project that I have created either from a tutorial or a work project.

To create a web app that shows the weather I used HTML, JavaScript and Bootstrap. I used JavaScript to connect a weather API, and AJAX to output the object properties to the front end.

I used a const variable to declare the api url.

I then used AJAX to use the objects from url. For this app, I used the location name, temperature, wind speed, the weather description. For the temperature, I had to convert it from Kelvin to Celsius. I could have used a formula to convert it to Farenheit, but in the UK we commonly use Celcius to measure the temperature.

The wind speed is another value that I had to convert in order to get the miles-per-hour value (MPH).

"use strict"

const url = ",uk&appid=14c293857fefc5bfc79ee7cbe354ee57";

    url: url, 
    success: function (result){

        let kelvinToCelsius = Math.round(result.main.temp -273.15);
        let windSpeed = Math.round(result.wind.speed /.44704);



And this is it, the final output. I could of course add some additional colour, and graphics.

Additionally, with the url I could have made it dynamic instead of using static values in the URL. I could also get additional values from the API object to pass to the front end.

Learning Laravel for PHP

Improving my knowledge and skillset is something that I love to do and I felt that learning learning Laravel for PHP was something that I needed to learn.

But what is Laravel? And should you start learning Laravel for PHP?

If you are someone like myself that has come from an ASP.Net(dot net) background then using an MVC (model view controller) coding pattern is something that you will most likely have been using…Laravel is essentially the same. It uses an MVC style coding pattern that ensures cleaner written coding.

How the MVC architectural pattern works is by having a model layer; which is essentially where classes and properties are held, the view layer; this is essentially the front-end view, and is where the data from the model and controller is displayed, and the controller view; this is essentially the middle layer and it contains the coding logic which uses the model layer to populate the data and to also get and return data to the view layer. If you were to write a method or function, it would be in the controller layer.

Thanks to Udemy I was able to get to grips with Laravel by creating a simple CRUD (create, read, upload, delete) application. The purpose was so a user could add a new user with credentials such as name, email address and phone number, save it to a database table, and then have the ability to edit and delete users.

Let’s see what I did.

This is the menu. As you can see it is a simple user menu with an edit and delete link

edit user laravel

The Edit user menu – looks the same as the Add User screen except wording.

The process: create a form that submits values from the input fields to the method named ‘update’ in the user controller. Within the method, it uses the model named UdemyUser to find the user using the user id value. Once it has found the id, it will then update that user using the model and the values requested from the view. The edit method above the update method requires just the one parameter – the id, wheres updated also requires the request details. In this method, it requires the id value to populate the form with the user credentials that are called using the model and the database select statement.

Things to improve

I did not use a try/catch statements within my code, and thus any errors that would be found not be handled correctly.

I did not use an alert box when deleting a user. Ideally you should include a dialog message to alert a user if they are going to do something that could have detrimental impact on a system.

For more guides, check-out my blog.

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.


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.


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 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="">
<img src="gnr.jfif" alt="guns n roses">

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

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. is a domain. Google is the site name. is a domain name, and Facebook is the name of the site. 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 – for example. Some platforms such as 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.

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.


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.


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


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

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

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.


Next, download the FlexSlider library from

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);
function load_stylesheets()
	wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css', array(),false, 'all' );

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>
    <?php endwhile; ?>
<?php endif; ?>

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

$(window).load (function() {
    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.

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-

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.