<center>![header-introduction.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506948267/aywcpqeyq8zvuiakck64.png)</center>
<div class="text-justify">In this course, I plan to teach you how to start making your own websites from scratch. We won't use any templates like the ones you can find on services such as Wix, SquareSpace and more. Websites made with these services are more often than not restricted by the technical limitations of programmed coding. Making websites with those services also makes it difficult to understand what's happening behind the scenes, which is something that I value a lot in everything I do. You will never achieve what you want if you don't understand how it works, that's my belief at least. We will start by learning HTML5 and CSS3 to create our first webpage but it won't be enough. Once most of these languages is learned, we will get into more interesting websites by learning PHP and JavaScript which are harder but far from being impossible despite what people may think when seeing a piece of programming. I like to compare learning programming to learning a new language. It's hard if you jump in it without any structure but if you learn step by step always increasing the level by a little bit, you can do it.</div>
<br>
<center><b>That's cool but what are these four languages used for ?</b></center>
<br>
<div class="text-justify">I'm glad you asked because this is exactly what we will learn today ! Those four languages all have a specific task in our making of a website. I will introduce each one by explaining it and then showing what it does exactly with an example. Let's get started !</div>

* ### HTML <div class="pull-right"><em>(HyperText Markup Language)</em></div>
<center>![html_layout.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506637360/gzo0guarx5tg6qzb0vj8.png)</center>
<ul><ul>
<li>
<h4>Hypertext</h4>
<div class="text-justify">Text that gets outputted on the screen and that can be interacted with. The best example is <a href="https://steemit.com/@schoolforsdg4">a text link</a> that once clicked redirects you to another page.</div>
</li>
<li>
<h4>Markup</h4>
<div class="text-justify">Not to be mistaken with Markdown which is a markup library. A library usually is meant to make things easier for the user to use. The posts you write on Steemit are in markup, more precisely they are written with the Markdown language, they then get converted to HTML so that the browser can use them. A markup language is a language used to format a file, to structure the data while not confusing the markup part with the data part.</div>
</li>
<li>
<h4>Front-end language</h4>
<div class="text-justify">It operates on the client side which means it has no interaction with the server.</div>
</li>
<li>
<h4>Not a programming language</h4>
<div class="text-justify">Despite what many believe, HTML is not a programming language. All the programming related articles using a picture of HTML code to illustrate what they say are therefore misrepresenting their work.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">Now it's time to see what HTML can do for our website. I chose not to code the full page but just a post. This post is meant to look like a mix of the ones you can find on Twitter and Facebook. A post contains in its header (the upper part) the author's name, his profile picture and the time passed since he posted. In the middle you can see the part of the post written by the author. Finally, at the end are a bunch of interactive functionalities (liking, sharing and commenting) as well as counters of how many users used them.</div>

<center>![HTML](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506541507/vjbwqqv3jghetpg6km6a.png)</center>
<div class="text-justify">As you can see, it doesn't really look pleasing,
does it ? We can barely understand what's going on there without having an explanation of what it's supposed to be first. Nobody in their right mind would ever want to use such a website. Thankfully, the next language is meant to make everything look good for the user !</div>

* ### CSS <div class="pull-right"><em>(Cascading Style Sheets)</em></div>
<center>![css_layout.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506682616/hywdfsv1e1gre8iy6pbc.png)</center>
<ul><ul>
<li>
<h4>Cascading</h4>
<div class="text-justify">References the way stuff is styled depending on how you wrote your CSS. Without any importance taken into account, a tag will be styled by the last part styling it in case of conflicts. However, such things as ids and classes will give tags more importance, which will interfere with this rule. We will look into that in depth later as it is a big part to understand.</div>
</li>
<li>
<h4>Style</h4>
<div class="text-justify">This language is used only to style the HTML so that it looks good for the user.</div>
</li>
<li>
<h4>Sheets</h4>
<div class="text-justify">CSS files are called sheets, you can link as many sheets to your page as you want but the standard is to have one big sheet taking care of everything.</div>
</li>
<li>
<h4>Styling inside HTML</h4>
<div class="text-justify">You can add style to elements directly inside the HTML even though it is not recommended in most cases. It is common to separate styling from markup in order to have a clear view on each element. It also can get messy really quickly if you have many properties to apply to your element as can be seen in the comparison below.</div>

![comparison.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506955977/l3bcyr8um4m7me1zezrz.png)
</li>
<li>
<h4>Front-end language</h4>
<div class="text-justify">It operates on the client side. Styling can change depending on the user's actions and on the display seize.</div>
</li>
<li>
<h4>Not a programming language</h4>
<div class="text-justify">Just like HTML, CSS is not a programming language. There is less confusion about it though as it really doesn't look like programming at all.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">It's time for the magic to happen ! Everything will look good, are you ready ? There we go (queue in the jingle of Pimp My Ride) !</div>

<center>![CSS](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506542001/nhbpezxjbuhh8xm1pybi.png)</center>
<div class="text-justify">What exactly happened there ? A lot... and yet not really much ! By that I mean that no data changed, we just changed the styling of the page, but remember that it's exactly what CSS is meant for ! The first things you should notice are the colors, three colors are used : orange for the functionalities, a very pale yellow for the background and a dark blue for the text. Another big change is the "submit" button being inside the comment box, you can check the first screenshot, it wasn't in ! The other changes are minor : adding a shadow for the post, justifying the text (which by the way is possible on Steemit but nobody wants to do it apparently), adjusting the comment box to the good width and more.</div>

* ### PHP <div class="pull-right"><em>(PHP : Hypertext Preprocessor)</em></div>
<center>![php_layout.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506956459/fc3cc6pz62fis6rpa1ug.png)</center>
<ul><ul>
<li>
<h4>PHP</h4>
<div class="text-justify">It is a recursive acronym for PHP : Hypertext Preprocessor.</div>
</li>
<li>
<h4>Hypertext Preprocessor</h4>
<div class="text-justify">PHP takes data as input, performs actions with/on it and outputs the result so that it can be used as input data by HTML. This opens the way for dynamic websites.</div>
</li>
<li>
<h4>MySQL <div class="pull-right"><em>(My Structured Query Language)</em></div></h4>
<div class="text-justify">PHP is the most useful combined with MySQL.</div>
</li>
<ul>
<li>
<h5>Structured Query</h5>
<div class="text-justify">Each step is contained inside a query, everything is clearly separated.</div>
</li>
<li>
<h5>Connection to a database</h5>
<div class="text-justify">This language sends and receives data from a database located on the server.</div>
</li>
</ul>
<li>
<h4>Back-end language</h4>
<div class="text-justify">It operates on the server side which is why it can make connections to a database.</div>
</li>
<li>
<h4>Programming language</h4>
<div class="text-justify">It indeed is a programming language, a scripting one, and is made specifically to be used with HTML. We will learn how to use it with the MVC <em>(Model-View-Controller)</em> architectural pattern that will be explained when needed.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">The styling is done but you may have noticed that all the data was default data (0, lorem ipsum, username, profile picture). This is what me and many others do when we are just testing the layout of our website.</div>

<center>![PHP](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506556278/v0d9uguyyyugt3lxi8eg.png)</center>
<div class="text-justify">Now that we can connect to the database, posts feel more like actual posts. User's informations are shown as well as time passed and number of comments. We can also submit a comment now that a connection to the database can be made. However, clicking the submit button will make the page refresh as it's the only way the comment could go through. We could have done the same for likes and shares but, contrary to comments, I don't see that ever happening on a website.</div>

* ### JS <div class="pull-right"><em>(JavaScript)</em></div>
<center>![js_layout.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506693155/bj7yuq0f4hztm6ydueb7.png)</center>
<ul><ul>
<li>
<h4>Java</h4>
<div class="text-justify">JavaScript is inspired by multiple programming languages including Java, it is however not to be mistaken with as the two languages have pretty big differences in their writing as well as their use.</div>
</li>
<li>
<h4>Script</h4>
<div class="text-justify">Just like PHP, JavaScript is a scripting language.</div>
</li>
<li>
<h4>Badly-written</h4>
<div class="text-justify">This language has a big reputation of being badly-written. This is mostly due to the ability of using multiple different ways to achieve the same thing, which would mean things can get messy when you work with someone who doesn't program the same way as you.</div>
</li>
<li>
<h4>jQuery</h4>
<div class="text-justify">jQuery is a JavaScript library created to make it easier to write code on the client side.</div>
<ul>
<li>
<h5>SPA <div class="pull-right"><em>(Single Page Application)</em></div></h5>
<div class="text-justify">jQuery is mostly used to create Single Page Applications. Such applications are websites that do everything on one page, not requiring any page refresh. This is linked to the next point.</div>
</li>
<li>
<h5>AJAX <div class="pull-right"><em>(Asynchronous Javascript And XML)</em></div></h5>
<ul>
<li>
<h6>Asynchronous</h6>
<div class="text-justify">In this context, it means that a request can be sent to the server without having to disturb the user's experience by freezing the page or reloading it.</div>
</li>
<li>
<h6>XML <div class="pull-right"><em>(eXtensible Markup Language)</em></div></h6>
<div class="text-justify">It's a flexible markup language mostly used to transfer data on the Web.</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h4>Front-end language</h4>
<div class="text-justify">JavaScript operates on the client side but using jQuery will make it possible to call PHP scripts that will interact with the server. In truth, it's possible to call PHP scripts without jQuery but it makes it really harder, which is why we will take the easy path.</div>
</li>
<li>
<h4>Programming language</h4>
<div class="text-justify">It is another programming language, which means we have one programming language on the front-end and one on the back-end.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">It's time for the final part ! The post will be complete now. JavaScript is useful to run PHP files but also to make the user experience better. Everything becomes more dynamic, to illustrate it a simple picture wouldn't have worked so I made you a gif.</div>

<center>![ENFIN.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506625188/zfpiisxftrnz1o5syqau.gif)</center>
<div class="text-justify">As you can see, likes, shares and comments are now instantly sent and added to their respective counters by calling PHP scripts with jQuery. The like and share functionalities changing color when hovered are not made with JavaScript but with CSS, as well as the submit button changing seize. However, the like and share functionalities keeping their orange color once clicked is thanks to JavaScript.</div>
<br>

___
<center><h3>Want to learn more ?</h3></center>

<center>Subject</center> | <center>Title</center> | <center>Author</center> | <center>Type</center>
- | - | - | -
HTML | [History of HTML](https://www.youtube.com/watch?v=NzzGt7EmXVw) | DevTips | Video
HTML | [Philosophy of HTML5](https://www.youtube.com/watch?v=2R8_Yt8UjBo) | DevTips | Video
Hypertext | [Hypertext](https://www.youtube.com/watch?v=FzbHYl17x6U) | The Computer Chronicles | Video
Markup languages | [SGML, HTML, XML: What's the Difference?](https://www.youtube.com/watch?v=RH0o-QjnwDg) | Computerphile | Video
Markup languages | [HTML: Poison or Panacea?](https://www.youtube.com/watch?v=Q4dYwEyjZcY) | Computerphile | Video
Front end and back end | [Front End vs Back End Development: Where to Start?](https://www.coursereport.com/blog/front-end-development-vs-back-end-development-where-to-start) | Lauren Stewart | Text
Front end and back end | [Front end vs Back end│Blonde Dictionary explanation](https://www.youtube.com/watch?v=NlpK0-TLrjw) | Coding Blonde | Video
Programming language | [What is Programming Language](http://www.webopedia.com/TERM/P/programming_language.html) | Vangie Beal | Text
CSS | [What is CSS?](https://www.youtube.com/watch?v=s7ONvIgOWdM) | DevTips | Video
CSS | [Cascades](https://www.youtube.com/watch?v=tZhmjgLQgXU) | DevTips | Video
Database | [Introduction to Databases](https://www.youtube.com/watch?v=eXiCza050ug) | GCFLearnFree.org | Video
Database | [What is a database?](https://www.youtube.com/watch?v=45w9UraAsmQ) | Vertabelo | Video
JavaScript | [Why Does JavaScript Suck?│A Terrible Language with a Bright Future](https://whydoesitsuck.com/why-does-javascript-suck/) | R.B. | Text
jQuery | [What is jQuery?](https://www.youtube.com/watch?v=T2mFyPxL-fU) | Khan Academy | Video
jQuery | [What is jQuery?](https://www.youtube.com/watch?v=46Jz0QJyhN0) | Brad Hussey | Video
AJAX | [AJAX tutorial for beginners](https://www.youtube.com/watch?v=tNKD0kfel6o) | mmtuts | Video
AJAX | [What is Ajax?](https://www.youtube.com/watch?v=3l13qGLTgNw) | WebConcepts | Video
<center><b>If you think I made any mistake, be sure to tell me so I can edit my post in time.</b></center>
___
<center>[![footer.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506979533/g3rb9ezil3xewzaytalu.png)](https://www.steemit.com/@ragepeanut)</center>
<center>If you liked this post and you want to see more, don't forget to **upvote**, **follow** and **resteem** !</center>