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.

Source

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.

to0c68u

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
etc
}
name()
  • “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" 
}
shutdownalldomainpcs

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() {
1()
2()
}

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:

test

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.

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.

Thanks,
Jamie

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):

npad

Notepad

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

npadpp.PNG

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

prp

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:

wysiwyg.PNG

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:

<style>
body {
    background-color: purply-blue;
}

h1 {
    color: grape-flavoured;
    margin-left: 420px;
} 
</style>

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:

<style>
h1 {
 text-decoration: overline;
}

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

h3 {
 color: green;
 text-decoration: underline;
}
</style>

Then, we can go ahead and call the code:

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

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.

br

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>
</p>

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:

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

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: