If you want to make your posts pretties or make a big Steem dapp but you are a beginner, this post can be a nice kickstart point, I will show you what you need to know, what to search to know that, a put a little bit of knowledge aout those topics on your mind so you can go ahead with the basics and learn the rest for yourself. Sadly, I can't put an entire course on a single post, but it is a nice start!

As I have said before, I will update this tutorial series with supplementary content. It is important to deviate from the main API classes and get in touch with more basic stuff because my goal is to make a series that everyone can follow and learn, so even people with no programming experience can make their own dapp with the Steem blockchain.

This is a very high and ambitious goal, but as I like to say, it is necessary to aim higher to get a good result, if I can push someone to make a good app or even a simple Steem interface, I will be happy.

NOTE: This class is supplementary content, whenever I feel that in the last classes I have pushed a little bit beyond what someone that has no programming knowledge might know, I will try to read the classes again and find what can I add to the supplementary content to make the beginner's life easier

What is needed for this classes

• Curiosity: You need to go on for yourself to Google (I actually recommend duckduckgo.com for privacy instead of Google) and search what you did not understand and what you feel like you might need help in the future. Whatever sounds overwhelming to you is what you need to search about
• Basic HTML: This is not hard, for instance, I write my posts using basic HTML tags, see the screenshot below to see how the post looks on the backend, HTML is the language that tells what each block of text, images, etc, is on the page, BUT IS HAS NO INFORMATION ABOUT LOOKS OR BEHAVIOUR
• Basic CSS: Though we might only need in much later in the course, take a look online on CSS, this is the style of the page, this takes care of position, color and looks
• Intermediary JavaScript: This I can't recommend you to have only basic knowledge. You can get started by just learning how to create variables, functions, evolve and learn about object oriented programming in javascript, and later study about data sctructures and algorithms in javascript, simple path, in 2 to 4 weeks you can get from zero to intermediate

HTML example

HTML knowledge is easy, simple and you can put in practice by posting on Steem, what about learning and using this language to improve the looks of your post?

Here are a few tags that are useful and how to use them to make your posts here better, feel free to learn more about HTML and more tags, this will make your life easier.

<h1>Your Text Goes Here</h1>

Your Text Goes Here

The h1 tag means it is a big headline, like shown above and you can use this, as the name suggest, to make headlines. Though, with CSS you can do the exact same thing, if you know what final result you want you can use h1 tags to make life more simple, and it is very useful here on Steemit

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

• Item 1
• Item 2

This is an Unordered List (thus UL), it is filled with List Items (thus LI)
To make an unordered list, just put the

<ul>
</ul>

tags around the list itens, and fill the list with

<li>The item goes between the tags</li>
<li>One item per line, please, and each with it's own li tags</li>

<b>Bold text here</b>

Bold text here

I like to use bold text on the name of the list item, followed by the item description. Scroll up in this post and try to find where have I used this technique and try to comment with something similar, an unordered list with bold text for the list item and normal text still inside the list item but describing it

If you <a href="https://steemit.com">click here</a> you will go to steemit.com

If you click here you will go to steemit.com

To finish, this last one can be VERY helpful for your steemit posts, this is the Anchor (thus a) tag,
let me break it down for you
<a></a> is the tag itself, but alone it won't do anything
so you need to add href="websitehere" in the openning (first) a tag and before the > so that the browser know to what website it will go.
It is VERY useful to insert link in the middle of the text in a fancy and beautiful way, without ugle and big URL in the text.
You can put between the <a> and the </a> the text that you want to be highlighted and when clicked will go to the website in the href

In the comments, try to do this and put a link to your Steemit profile without showing the URL, using the anchor tag to hide the URL and a nice clickable text

CSS example

I am afraid I can't show you a CSS example with a Steemit post, as far as I know it's markdown language only supports HTML, but don't worry! I will leave in the end of the post a link to a project that has classes and assignments on HTML, CSS, JavaScript and much more!

For now, you need to understand how the CSS syntax works.

On HTML you can add classes or IDs to the elements, for example

<h1 style="color: blue;">This text should be blue</h1>

I will breakdown for you.
You have noticed that the<h1> tag is different, this is because I have used <a href="https://www.w3schools.com/html/html_css.asp">inline CSS</a>, this means that the HTML code also contains the CSS code for the style.
the style= indicates what is the CSS code that will be applied exclusively and only to this h1 tag.

NOTE:this is very bad practice, you should only use this when you know what and why you are doing this, the correct way to use CSS is to create a separate file with the code, in this case, here is how the 2 files, first the HTML, second the CSS, will look like

<h1>This text should be blue because the CSS file below</h1>
<link rel="stylesheet" type="text/css" href="cssfilename.css">

the last line is important, it is importing to the HTML file the CSS code in the cssfilename.css file

h1 {
color: blue;
}

the first like selects every h1 tag and the code between the brackets give it a color of blue

extra:
you have many ways of selecting a content in CSS, other 2 ways, with different files for HTML and CSS, are:

1) give a class to the HTML element

<h1 class="bluetext"></h1>
<link rel="stylesheet" type="text/css" href="cssfilename.css">

.bluetext {
color = blue;
}

In this example everything with the class bluetext will become blue. To select a class name you need to put a period point . before the name

2) give an ID to the element

<h1 id="bluetext"></h1>
<link rel="stylesheet" type="text/css" href="cssfilename.css">

#bluetext{
color=blue;
}

Now, this is a bit complicated to explain, but, depending on what you are doing using an ID can select multiple or just one element, though using the same ID on multiple elements is VERY BAD PRACTICE and can lead to unexpected behaviours depending on what you are doing and in what browser, so, use IDs to name only one element and select this one element and use classes to name and select multiple elements

JavaScript

Now, this is a bit hard to explain in a few words and this post is a bit long, so I will leave you the basics and right after will leave you a very good website to learn and practice HTML, CSS and Javascript.

This might look intimidating if this is your very first contact with programming, but is quite simple and I will explain, thi is the most complete example for a kickstart I could think of

var thisIsVariable="this is a variable";
var variableOne = 1;
var variableTwo= 2;
var = sumOfTheVariables;
function sumOneAndTwo(one, two){
sumOfTheVariables = one+two;
return sumOfTheVariables;
}

console.log(sumOneAndTwo(variableOne, variableTwo));

Now, let us eat the knowledge slowly, this is very interesting.
First, all commands must finish with ;
The var= means we are setting a variable in memory, you can put a string (text) between quotes we will set this to the string of text you gave it, in the case of the var thisIsVariable= the value it has is this is a variable
You can give it an integer value if you just put the number without quotes after the variable name (if you use quotes it becomes a string and you can't do math with it)
You may have noticed that the var = sumOfTheVariablesdoes not have a value, this is because you do not need to immediately give a value to the variables you make, this is useful and you will see why.

The function multiplyOneAndTwo is declaring a function, this is a series of operations that the computer will execute when you call the function, it receives 2 variables and, in order, name them one and `two. Stick with me and you will see how cool is this, but first let us see what is inside this function.

On the first line inside the function you will see something amazing, code is amazing, but look, we are using a variable without var=, this makes the computer look inside it for the variable with this name, if you use var= you are telling the computer to create a new variable, and this is not we want because we already have a variable to use, here we are using the variable created sumOfTheVariables to give it the vale of the sum of the 2 variables
The return tells the computer to answer who called the function, in this case, it answer with the result of the sum.

Ok, this is great, so in the next line we will put it all to work
The console.log tells the browser to output to the console, in the last class we have used the browser console and got the output form it, take a read at that again.

And what it outputs to the console is between the ( ), and what is between it is sumOneAndTwo(variableOne, variableTwo), so this line calls the sumOneAndTwo function, copy the variableOne and name it as one, take the variableTwo and name it as two, runs through the function and sum them, stores the sum on the variable sumOfTheVariables and returns (answer) the call with the sum inside this variable! Wow! Now you see, sometimes a coda can sound like it is complicated, it took me many lines to explain, but if you read the explanation carefully and read the code again you will understand what it does with a bat of an eye! COOL!!

Where do we go from here?

Of course I won't let you alone now searching for knowledge.
I highly recommend you to take a look in the following websites, they have free classes and they put you to practice right after showing you new content.

https://www.freecodecamp.org/

And

https://www.sololearn.com/

Those are my favorite to learn new things and practice, you will like them too, they are very beginner friendly!
If you know another source or have some recommendation put it down on the comments below, we all thank you for sharing your knowledge.

Hey, I am Witness, did you know?

To vote for me, go to https://steemit.com/~witnesses

(note, it is /~witnesses, not /witness)
Scroll all the way down to "If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote."

type igormuba and click vote