Make Your Own Website - Introduction

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.

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 !

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.

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 !

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

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.

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.

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.

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.

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.