Post by riley on Nov 16, 2014 17:59:26 GMT
EASY~
The template you will be making will look like this:
Remember to save your template regularly!
Step One: We will begin by centering making a box that is 450px wide by 500px tall, and give it two properties - a border, and a background color.
Start by clicking on the [BBCode] button at the bottom. You need to be in this editor when making templates, and only use the [Preview] as a reference to check that your code it working as it should. Once in the BBCode editor, click on the center button at the top of the box. This should give you {div align="center"} {/div} in [square] brackets. (Note: I will always used {these brackets} to explain the steps, but you must always change them to [square] brackets to make your code work!)
You can hit enter a few times to put some space between the opening and closing center tag, and work in the middle of them. You can ignore the {div align="center"} from now on.
When making a template will we be using the {div style=""}{/div} tag, so start by adding this. Between the "quotations" we need to add the properties of the box; width, height, border, and background.
Each component/property should be separated by a semicolon ';' and the information for each property should be separated by a colon ':'.
Using this box as an example we should have: "width:450px;height:500px;border:10px solid #680606;background:#ffffff;"
This means your code so far should look like this:
If you click on the Preview button you should now see this:
Step Two:
Next, we will add some more properties to our box. Firstly, padding. Padding creates space between the edge of the box and everything inside of it. By adding padding, we are adding extra width to our box. In this case, we're going to add a padding of 10px, which will now make the width 470px, and the height 520px in total. (Note: It is important to know how your padding affects your box because some sites have less space for posting in, eg. A 500px box would fit comfortably into the space, but a 520px box might not. In this case, you may need to take the addition width away from the width: element, turning width:500px into width:480px, so that the overall width is now 500px when you include 10px padding (or whatever amount of padding your choose). In this particular template we are making, we do not need to change the width: value!).
To add the padding, put padding:10px; after where you have the background color.
Next we will be adding some font properties to our box: font family, font size, and a font color. In this example, we will use Georgia, 40px, and #680606 as our properties. They will look like this: font-family:georgia;font-size:40px;color:#680606;. We do not use font-color for the color element!
Outside of the brackets, add a few words and check the Preview panel to check it has worked.
We should now have this:
Step Three:
The next thing we will be adding is an image with a border, using the same color that we used for the outside border and the color of the text. Underneath 'Title here' (or whatever words you wrote on yours!) we need to add an image. You can either hand write the code, or use the Insert Image button from the options above. If you use the button you can put the image URL directly into it, and ignore where it says 'Alt Text' for now.
When you have inserted the image it will look like this {img src="http://URL.com" alt=" "}. Instead of 'alt' we want 'style' so you can change it to look like this {img src="http://URL.com" style=" "} Now, it works the same as the {div style=" "] works, only this time it's an {img style=" "}.
Inside the style we will give it a width and a height, in this case 400px x 200px, and a border with the properties 5px solid #680606.
When you use an image in a template it can sometimes be helpful to use a placeholder image. Rather then trying to make on there is a site that creates easy to use placeholders. All you do it add the widthxheight values on the end. The URL for the placeholder image I have used is this: http://placehold.it/400x200. You can use this URL for any template image you like.
Our image code should look like this:
And our overall template should look like this so far!
Step Four:
This next step will be a little harder. We are going to add a table for Words/Outfit/Tagged as a lot of posting templates have space for information like this. Tables can look a little complicated at first but once you understand each part of them they're not so bad. A very basic table would look like this:
{tr}{/tr} creates a row.
{td}{/td} creates a cell.
You can have multiple cells in a row. For our template, we will need to add three cells into our row, so our table should look like this:
It might be easier to separate each part out onto a different line so you can see where you are up to easier.
In the same way that we have {div style=" "} and {img style=" "}, we can also add styles to tables to add properties. We well be adding width, height, cell spacing, background color, and new font properties to our table.
To start with, chance {table} to {table style=" "} as a starting point. We are going to add a width of 420px, and a height of 25px. Then, we will add cellspacing. Cell spacing is similar to adding a margin to a div as it adds space around the cells, where as cell padding would add padding inside of a cell. To add the cell spacing we need to add this: "border-collapse:separate;border-spacing:3px;".
Once this is done, we also need to add new font properties to out table. Because our table is inside of our {div style=" "} the font properties we added there (40px, georgia, #680606) are automatically still used in our table unless we tell our table to use a different set of font properties. (Note: Because our template is being made in side of {div align="center"} tags, everything is automatically being centered, because we haven't told any of our properties to do anything different. If we didn't use {div align="center"} tags everything (title, image, table) would all be on the right side of our div.) We will give our table a font size of 12px and the color #eeeeee. Refer back to Step Two if you need help with how to do this.
As well as adding style properties to the table, we can add properties to individual cells, too, by changing {td} to {td style=" "}. We will be adding a background color to each cell. With the cell spacing, the three cells will be separated into three separate colored boxes. To start, change all three {td} to {td style=" "}, and make sure to fill in the properties in all of them.
First, we will give each box a width of 130px. Without setting a width the cells would be able to expand/shrink. Eg, if we write more words in box one than box two, box two will reduce in size to make room for box one. By putting a width into the cells they remain the same size. After this, we will add the background which will be the same color as the rest, #680606. We add this by adding "background:#680606;" to our cell style. If we had added the background color to the table style, then it would have colored the whole table, including the space between the cells. By coloring the cells individually the space between cells remains white.
Finally, we can fill in the information in the three boxes: Words, Outfit, and Tagged. Some might prefer a Notes section instead of an Outfit section, but adding Outfit allows us to practice adding a URL into our template. To add a URL we need either type the code directly into the cell, or we can use the Insert Link button at the top. The code for a URL looks like this:
Our outfit area will now link to the THQ homepage. When you save your template, try it out.
Another new feature of Proboards V5 is the ability to tag another member to a post. You do this by inserting @username. For example, I could tag myself by putting @ riley - riley. This will link directly to a persons profile, and will send them a notification that they have been tagged in a post. It must be their username, not their display name. You can also use the 'Insert User Link' button at the top.
With all of this done, our template should look like this:
Step Five:
For this step we will be adding our posting area where out actual post will go. It will go in the space that is left at the bottom of our box, and we will give it an overflow feature so that we can write as much text as we want in this area without it stretching or overlapping the bottom of the box.
To start with, we are going to start a new {div style=" "}{/div} straight after the closing tag of our table. Don't start it on a new line or it will create a large space between the top of our posting box and the table. We will add a margin to give it some space at the top.
To start with, we are going to give our posting box a width of 400px, and a height of 150px. Next, we will add a margin of 10px so there are 10px between the table and the top of our posting box: "margin:10px;".
This time, we are going to do something a bit different with our borders. You can style borders individually by specifying which border you want certain properties to affect. We are only going to give our posting area a top border and a bottom border. They will both be solid #680606, but our top border will be 5px and our bottom border will be 10px. It should look like this "border-top:5px solid #680606;border-bottom:10px solid #680606;".
After this, we are going to add 5px padding to our posting box. This will add 10px to the height and width of our posting box, making it a total of 410px by 160px. It will mean that there our text in this box will not be too close to the borders, which will make it easier to read. It will also put some space between our text and the scroll bar on the right side that will show up when our text is longer than 150px will allow. To make it do this, we need to insert "overflow:auto;" into our style. If the text is not long the scroll bar won't show up, but it will when the posting box needs more space.
We also need to change our font properties again because they will automatically show up as 40px, Georgia, #680606, and centered. To change the alignment of our text will need to include a 'text-align:' property. In this template, we are going to justify our text: "text-align:justified;". And finally, change the font size to 12px. We could change the color of our text here, but I'm going to leave it as #680606 to match the rest.
With this done, we can add a filler text to our posting area to check whether it works, and it scrolls correctly. Most of the time the 'Lorum ipsum' text is used as filler text in template making, but you can put anything here that you like - a post, write something random, song lyrics... Anything! If you want to use 'Lorum ipsum' you can use this:
Our template should now look like this:
Final Step:
Nearly there! If you've made it this far then you deserve some credit for successfully following this tutorial and creating this template, so let's add a credit at the bottom of our template.
Like before, we need to put in a new {div style=" "}{/div} directly next to the closing {/div} of our posting box. The only properties we're going to apply to this is a font size of 12px, and a margin of 5px at the top. As with the border, we can add a margin to only one side by using "margin-top:5px;". Let's write 'This template tutorial was completed by @username!' and you can add your username into it.
Our final template should look like this:
And we're done!
Feel free to either post your completed template in this thread, or PM me a copy of your finished code. You can play around with it and try out different things for yourself - colors, fonts, sizes, borders, etc etc etc! Have fun with it and then have a go at the intermediate tutorial. I really hope this helped!
The template you will be making will look like this:
Remember to save your template regularly!
Step One: We will begin by centering making a box that is 450px wide by 500px tall, and give it two properties - a border, and a background color.
Start by clicking on the [BBCode] button at the bottom. You need to be in this editor when making templates, and only use the [Preview] as a reference to check that your code it working as it should. Once in the BBCode editor, click on the center button at the top of the box. This should give you {div align="center"} {/div} in [square] brackets. (Note: I will always used {these brackets} to explain the steps, but you must always change them to [square] brackets to make your code work!)
You can hit enter a few times to put some space between the opening and closing center tag, and work in the middle of them. You can ignore the {div align="center"} from now on.
When making a template will we be using the {div style=""}{/div} tag, so start by adding this. Between the "quotations" we need to add the properties of the box; width, height, border, and background.
Each component/property should be separated by a semicolon ';' and the information for each property should be separated by a colon ':'.
Using this box as an example we should have: "width:450px;height:500px;border:10px solid #680606;background:#ffffff;"
This means your code so far should look like this:
[div align="center"]
[div style="width:450px;height:500px;border:10px solid #680606;background:#ffffff;"]
[/div]
[/div]If you click on the Preview button you should now see this:
Step Two:
Next, we will add some more properties to our box. Firstly, padding. Padding creates space between the edge of the box and everything inside of it. By adding padding, we are adding extra width to our box. In this case, we're going to add a padding of 10px, which will now make the width 470px, and the height 520px in total. (Note: It is important to know how your padding affects your box because some sites have less space for posting in, eg. A 500px box would fit comfortably into the space, but a 520px box might not. In this case, you may need to take the addition width away from the width: element, turning width:500px into width:480px, so that the overall width is now 500px when you include 10px padding (or whatever amount of padding your choose). In this particular template we are making, we do not need to change the width: value!).
To add the padding, put padding:10px; after where you have the background color.
Next we will be adding some font properties to our box: font family, font size, and a font color. In this example, we will use Georgia, 40px, and #680606 as our properties. They will look like this: font-family:georgia;font-size:40px;color:#680606;. We do not use font-color for the color element!
Outside of the brackets, add a few words and check the Preview panel to check it has worked.
[div style="width:450px;height:500px;border:10px solid #680606;background:#ffffff;padding:10px;font-family:georgia;font-size:40px;color:#680606;"]TITLE HERE[/div]We should now have this:
TITLE HERE
Step Three:
The next thing we will be adding is an image with a border, using the same color that we used for the outside border and the color of the text. Underneath 'Title here' (or whatever words you wrote on yours!) we need to add an image. You can either hand write the code, or use the Insert Image button from the options above. If you use the button you can put the image URL directly into it, and ignore where it says 'Alt Text' for now.
When you have inserted the image it will look like this {img src="http://URL.com" alt=" "}. Instead of 'alt' we want 'style' so you can change it to look like this {img src="http://URL.com" style=" "} Now, it works the same as the {div style=" "] works, only this time it's an {img style=" "}.
Inside the style we will give it a width and a height, in this case 400px x 200px, and a border with the properties 5px solid #680606.
When you use an image in a template it can sometimes be helpful to use a placeholder image. Rather then trying to make on there is a site that creates easy to use placeholders. All you do it add the widthxheight values on the end. The URL for the placeholder image I have used is this: http://placehold.it/400x200. You can use this URL for any template image you like.
Our image code should look like this:
[img src="http://placehold.it/400x200" style="width:400px;height:200px;border:5px solid #680606;"]And our overall template should look like this so far!
TITLE HERE
Step Four:
This next step will be a little harder. We are going to add a table for Words/Outfit/Tagged as a lot of posting templates have space for information like this. Tables can look a little complicated at first but once you understand each part of them they're not so bad. A very basic table would look like this:
[table][tbody][tr][td] [/td][/tr][/tbody][/table]{tr}{/tr} creates a row.
{td}{/td} creates a cell.
You can have multiple cells in a row. For our template, we will need to add three cells into our row, so our table should look like this:
[table][tbody][tr][td]Cell One[/td][td]Cell Two[/td][td]Cell Three[/td][/tr][/tbody][/table]It might be easier to separate each part out onto a different line so you can see where you are up to easier.
In the same way that we have {div style=" "} and {img style=" "}, we can also add styles to tables to add properties. We well be adding width, height, cell spacing, background color, and new font properties to our table.
To start with, chance {table} to {table style=" "} as a starting point. We are going to add a width of 420px, and a height of 25px. Then, we will add cellspacing. Cell spacing is similar to adding a margin to a div as it adds space around the cells, where as cell padding would add padding inside of a cell. To add the cell spacing we need to add this: "border-collapse:separate;border-spacing:3px;".
Once this is done, we also need to add new font properties to out table. Because our table is inside of our {div style=" "} the font properties we added there (40px, georgia, #680606) are automatically still used in our table unless we tell our table to use a different set of font properties. (Note: Because our template is being made in side of {div align="center"} tags, everything is automatically being centered, because we haven't told any of our properties to do anything different. If we didn't use {div align="center"} tags everything (title, image, table) would all be on the right side of our div.) We will give our table a font size of 12px and the color #eeeeee. Refer back to Step Two if you need help with how to do this.
As well as adding style properties to the table, we can add properties to individual cells, too, by changing {td} to {td style=" "}. We will be adding a background color to each cell. With the cell spacing, the three cells will be separated into three separate colored boxes. To start, change all three {td} to {td style=" "}, and make sure to fill in the properties in all of them.
First, we will give each box a width of 130px. Without setting a width the cells would be able to expand/shrink. Eg, if we write more words in box one than box two, box two will reduce in size to make room for box one. By putting a width into the cells they remain the same size. After this, we will add the background which will be the same color as the rest, #680606. We add this by adding "background:#680606;" to our cell style. If we had added the background color to the table style, then it would have colored the whole table, including the space between the cells. By coloring the cells individually the space between cells remains white.
Finally, we can fill in the information in the three boxes: Words, Outfit, and Tagged. Some might prefer a Notes section instead of an Outfit section, but adding Outfit allows us to practice adding a URL into our template. To add a URL we need either type the code directly into the cell, or we can use the Insert Link button at the top. The code for a URL looks like this:
[a href="URLGOESHERE"]Link/Name[/a]Try adding the url for THQ into the link! http://templatehq.proboards.com/Our outfit area will now link to the THQ homepage. When you save your template, try it out.
Another new feature of Proboards V5 is the ability to tag another member to a post. You do this by inserting @username. For example, I could tag myself by putting @ riley - riley. This will link directly to a persons profile, and will send them a notification that they have been tagged in a post. It must be their username, not their display name. You can also use the 'Insert User Link' button at the top.
With all of this done, our template should look like this:
Step Five:
For this step we will be adding our posting area where out actual post will go. It will go in the space that is left at the bottom of our box, and we will give it an overflow feature so that we can write as much text as we want in this area without it stretching or overlapping the bottom of the box.
To start with, we are going to start a new {div style=" "}{/div} straight after the closing tag of our table. Don't start it on a new line or it will create a large space between the top of our posting box and the table. We will add a margin to give it some space at the top.
To start with, we are going to give our posting box a width of 400px, and a height of 150px. Next, we will add a margin of 10px so there are 10px between the table and the top of our posting box: "margin:10px;".
This time, we are going to do something a bit different with our borders. You can style borders individually by specifying which border you want certain properties to affect. We are only going to give our posting area a top border and a bottom border. They will both be solid #680606, but our top border will be 5px and our bottom border will be 10px. It should look like this "border-top:5px solid #680606;border-bottom:10px solid #680606;".
After this, we are going to add 5px padding to our posting box. This will add 10px to the height and width of our posting box, making it a total of 410px by 160px. It will mean that there our text in this box will not be too close to the borders, which will make it easier to read. It will also put some space between our text and the scroll bar on the right side that will show up when our text is longer than 150px will allow. To make it do this, we need to insert "overflow:auto;" into our style. If the text is not long the scroll bar won't show up, but it will when the posting box needs more space.
We also need to change our font properties again because they will automatically show up as 40px, Georgia, #680606, and centered. To change the alignment of our text will need to include a 'text-align:' property. In this template, we are going to justify our text: "text-align:justified;". And finally, change the font size to 12px. We could change the color of our text here, but I'm going to leave it as #680606 to match the rest.
With this done, we can add a filler text to our posting area to check whether it works, and it scrolls correctly. Most of the time the 'Lorum ipsum' text is used as filler text in template making, but you can put anything here that you like - a post, write something random, song lyrics... Anything! If you want to use 'Lorum ipsum' you can use this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Our template should now look like this:
TITLE HERE
| Words: ### | Outfit: link | Tagged: @username |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Final Step:
Nearly there! If you've made it this far then you deserve some credit for successfully following this tutorial and creating this template, so let's add a credit at the bottom of our template.
Like before, we need to put in a new {div style=" "}{/div} directly next to the closing {/div} of our posting box. The only properties we're going to apply to this is a font size of 12px, and a margin of 5px at the top. As with the border, we can add a margin to only one side by using "margin-top:5px;". Let's write 'This template tutorial was completed by @username!' and you can add your username into it.
Our final template should look like this:
TITLE HERE
| Words: ### | Outfit: link | Tagged: @username |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
This template tutorial was completed by @username!
[div align="center"]
[div style="width:450px;height:500px;border:10px solid #680606;background:#ffffff;padding:10px;font-family:georgia;font-size:40px;color:#680606;"]TITLE HERE
[img src="http://placehold.it/400x200" style="width:400px;height:200px;border:5px solid #680606;"][table style="width:420px;height:25px;border-collapse:separate;border-spacing:3px;color:#eeeeee;font-size:12px;"][tbody][tr][td style="width:130px;background:#680606;"]Words: ###[/td][td style="width:130px;background:#680606;"]Outfit: [a href="http://templatehq.proboards.com/"]link[/a][/td][td style="width:130px;background:#680606;"]Tagged: @username[/td][/tr][/tbody][/table][div style="width:400px;height:150px;margin-top:10px;border-top:5px solid #680606;border-bottom:10px solid #680606;padding:5px;overflow:auto;text-align:justify;font-size:12px;"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.[/div][div style="font-size:10px;margin-top:5px;"]This template tutorial was completed by @username![/div]
[/div][/div]And we're done!
Feel free to either post your completed template in this thread, or PM me a copy of your finished code. You can play around with it and try out different things for yourself - colors, fonts, sizes, borders, etc etc etc! Have fun with it and then have a go at the intermediate tutorial. I really hope this helped!
