New Year, New Website, New Look!

Reading Time: 2 minutes

A belated but happy new year. Yeah, I know we’re half-way through February already, but I felt obliged to state the obvious. Speaking of such, welcome to my new website, sporting a brand new look.

I realized towards the end of 2016 that a website redo was much needed, but finding time between the end of year madness, starting at and adjusting to a new job, I had to find time in between everything to get this new look launched.

Whilst looking at my old website I knew an overhaul was long overdue – the old website was coded in 2015 and it was outdated. Badly. That used Bootstrap and a few Javascript libraries and to be honest that old look wore out it’s welcome very quickly.

The problem was that I wasn’t exactly sure of what I wanted. Then after browsing other websites of developers, doing some research and finding inspiration, I finally found something I liked. Something that spoke to me and said, “this is it!”. I managed to code the basic structure and look in two nights and over the course of the new few weeks, I hacked away at it, molding it to how I wanted it.

I’ve opted for a much cleaner look with a modern Material look and feel. I wanted to keep it looking almost like a professional CV (or Resume as some of you might call it) so that I can let my experience, projects and skills speak for themselves. I still wanted to keep my blogs and writing going, so instead of scrapping that (it did cross my mind), I converted what I had already coded into a WordPress theme.

There are a few minor things I will be correcting over the weeks to come, but I’m much happier with this iteration of my website. I really hope you like the look and feel.

So You Want To Make A Website

Reading Time: 4 minutes

Over the course of my career as a website developer, I have had many people interested in wanting to learn the basics of making a website. I always advise them to getting to learn two basic entry-level skills necessary to understand and build the foundation of any website – HTML and CSS.

The world of website development is both exciting and fast paced, however in this fast-paced industry, one thing remains true and tested – two skills every aspiring website developer should know – a basic understanding of both HTML and CSS.

This easy guide serves as a basic introduction to getting you started with learning the basics. It serves to point you in the right direction to making your own basic website using both HTML and CSS.

What is HTML?

HTML is a 23 year old (at the time of writing) scripting language developed in 1993 by Tim Berners-Lee. It stands for HyperText Markup Language and is the standard markup language used to create web pages all across the internet.

What is CSS?

Cascading Style Sheets is a 19 year old style sheet language released in 1996. It is widely-used for describing the presentation of a document written in a markup language such as HTML.

Step 1: understanding The fundamentals

Being able to make a basic website doesn’t require fancy tools or software – in fact, everything you need to create a fancy website is already on your computer.

All you need is a text-editor (such as Notepad) and a web browser (such as Microsoft Edge or Google Chrome) – that’s it!

Scripting (or coding, if you wish) your website is done in your text-editor (saved as a .html file) and previewed in your web browser.

Step 2: Learning the Basics

All HTML follows a basic structure – a skeleton if you will. This is pretty much standard across every website that exists; a <head> and a <body> – all enclosed within <html> tags.

<!DOCTYPE html>

 <html>
 <head>
 <title>Page Title</title>
 </head>

 <body>
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
</body>
 </html>

The basic structure above serves as a basis for every website you’ve ever visited. Copy it, manipulate it and try it out for yourself. Just be sure to call your file index.html

It should display something like this in your web browser:

An example of a basic HTML document
An example of a basic HTML document

Fortunately HTML is an extremely easy scripting language to understand and use. It works on the principles of wrapping what you want to display in a starting tag and a closing tag. ie, <body> </body>,  <title>  </title> – just remember this rule of thumb; whatever is opened, must be closed.

STEP 3: Introducing CSS (Cascading style sheets)

Learning CSS is a necessity when it comes to styling and changing the look of your website. CSS has the ability to pretty much change everything you see while still keeping itself separate as the code itself looks quite different from HTML.

Below is a basic CSS example of how we could manipulate the look of the HTML above:

body {
 background-color: #d0e4fe;
}

h1 {
 color: orange;
 text-align: center;
}

p {
 font-family: "Times New Roman";
 font-size: 20px;
}

You will see that with CSS, you can reference a HTML tag and give it a few properties to manipulate such as the font colour or it’s alignment.

CSS has a long list of predefined properties that would require you to look up and play with. But once you get the hang of it, the knowledge of these properties will come naturally.

STEP 4: GETTING COMFORTABLE WITH HTML & CSS

HTML and CSS naturally play together quite nicely. You can include them in one single .html file or separate them keeping the CSS code separate in a .css document and just referencing it. This is referred to as an internal stylesheet and external stylesheet respectively.

Here is an example of a more complete HTML document (using the code of both the examples above) with the CSS included internally:

<!DOCTYPE html>

 <html>
 <head>
 <title>Page Title</title>
 
 <style>
body {
 background-color: #d0e4fe;
}

h1 {
 color: orange;
 text-align: center;
}

p {
 font-family: "Times New Roman";
 font-size: 20px;
}
</style>

 </head>

 <body>
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
</body>
 </html>

The above code should output something like this:

An example of a basic HTML + CSS document
An example of a basic HTML + CSS document

Once again, this is another reminder of just how basic the above example is. You would naturally need to manipulate the content and the CSS to make it just the way you would like it.

Essential Further Reading

I have only covered a ridiculously tiny fragment of website development, but hopefully the above article did at least one of three things; 1) give you a basic understanding of what HTML and CSS is, 2) Intrigue or interest you enough to actually want to learn more or 3) Point you in the right direction for further intermediate HTML and CSS learning.

Below are some valuable learning resources to get you quickly started into learning and finding out more about the wonderful world of creating websites with HTML and CSS:

 

Add Custom CSS To a WordPress Theme

Reading Time: 2 minutes

Using themes in WordPress is fantastic for getting your website up quickly, but what if you want to add custom CSS to a WordPress theme and override the styling?

One way to change the default behaviors of WordPress is using a file named functions.php. It goes in your Theme’s folder. – WordPress.org Codex

There is the quick and dirty way to do it, but you risk having your code overridden when the theme eventually updates. This is not wise. Below I will show you the right way to do it via referencing a custom css file in your theme’s function file using the wp_enqueue_scripts hook.

Step 1: Reference the custom.css

Most WordPress themes, if not every theme has a functions.php file nested in it’s root folder. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/functions.php)

Open the functions.php file, head to the very bottom of the file and paste the following code below:

function custom_css() { // The custom name of your function
wp_enqueue_style( '', get_template_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_css' ); // Activating the function

Save it and proceed to Step 2.

Step 2: the custom.css file

Now that you have your theme looking for a custom.css file, it’s time to actually add one / create a file.

Create a custom.css file with your custom CSS code in it and upload it to your theme’s root folder. You will obviously want to throw in any custom or overriding code into there.

Save it and place it in the root of your current theme. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/custom.css)

Voila! You’ve done it. Now you don’t need to worry about your theme overriding your custom CSS code when you do a theme update.

You can check that your theme is calling the custom.css file by checking the source code of your website (CTRL + U in Google Chrome) and searching for custom.css. You should see the file referenced at least once.