Make a COMPLETE Social Media Site Like Facebook or Twitter

A complete walkthrough to creating your very own Social Networking website!
5.0 (2 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
212 students enrolled
$20
Take This Course
  • Lectures 172
  • Contents Video: 16.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2016 English

Course Description

Ever wondered how Facebook works? Ever wanted to create your own social media website? This course will show you, step by step, how to create your own social networking website similar to the likes of Facebook and Twitter. Your finished site will have tons of cool features such as status posts, newsfeeds, user profiles, chat/messaging systems, friend systems and much more

Whether you are a complete beginner or an experienced programmer, this course will be greatly beneficial to you. By the end of this course you will be more than competent with skills such as HTML, CSS, PHP, JQuery, JavaScript and MySQL. To have these skills on your portfolio/resumé will make you highly desirable to potential employers as it proves that you have an understanding of all aspects of web development. 

The price of this course will be increasing on the 5th October!

What are the requirements?

  • A computer (I am using a Mac)
  • A text editor to program in (I use Sublime Text 2)

What am I going to get from this course?

  • Create a full scale social networking website like Facebook or Twitter, including features such as newsfeeds, profiles, friend system, chat system, trending posts and much more!
  • Program proficiently in PHP, HTML and CSS
  • Program using an OO (Object Oriented) approach
  • Know how to easily use MySQL databases with your website
  • Understand how to register domain names and put your new site on the web!

What is the target audience?

  • In this course you will use HTML, CSS, PHP, MySQL, JavaScript and JQuery. Although we will use all of these skills, no prior experience with them is needed. Of course, you may pick things up a little faster if you have used them before, but at the start of the course, things are explained in ways that target people who have never used the skill before. Because this course appeals to beginners as well as as experienced users, it may seem a little slow paced at the start especially if you have prior programming experience. Bare with it though because it does pick up. If you are an experienced programmer, you may not learn much about the skills but you may learn how to structure a social media website. Some of the techniques and methods used are not the most efficient way to do things (e.g. we use procedural MySQLI statements), but in my opinion, they are the easiest to teach in a short amount of time and easiest to pick up having never used the skills before. Feel free to swap bits of code with your preferred methods.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welcome! Info and Setup
02:55

Take a quick look at the sort of thing you will be producing! Your site will have all of the main features you will find on top social media websites such as Facebook or Twitter!

Note: This is just an example. You will be able to customise your site however you like! Colours, pictures, whatever! Be creative!

07:51

In this video we will be downloading and installing the localhost web server! Cool right??

02:38

In this video we will take a look at phpMyAdmin which is a user friendly front end we can use for out database. We will create our database and also a test table. If this is slow paced and you already know some of the things I'm telling you, just bare with me for the first few videos, it does pick up. 

06:49

So we have our database all set up and we've created a test table. What we will do now is connect to it using PHP and insert our first bit of data! Once again, if this is slow paced and you already know some of the things I'm telling you, just bare with me for the first few videos, it does pick up. 

Section 2: Register / Sign Up Form
05:44

In this video we create our register page and add the necessary input fields!

Source code is available as a .zip in lecture 17!

07:51

Now we get the variables sent from the form and store them in variables

Source code is available as a .zip in lecture 17!

03:46

In this video we are going to validate the email by making sure that the two emails entered match and that they are in the correct format for an email. 

Source code is available as a .zip in lecture 17!

04:25

So it's finally time for us to create our first actual database table! We are going to create the users table which will hold all the details of users that have signed up to our website. 

Source code is available as a .zip in lecture 17!


04:19

Before we let the user sign up, we need to make sure that the email address they are trying to use hasn't already been used by another user. 

Source code is available as a .zip in lecture 17!

05:33

Here we are checking the validity of the remaining values such as if the passwords match and if the email has been used already for an account.

Source code is available as a .zip in lecture 17!

05:16

When a user submits the form but there are things that need to be corrected e.g. the passwords do not match, at the moment, it resets the form which means the user will have to enter all of the values again. What we would like to happen, is when the user submits the form, it remembers the values and re-populates the text fields with those values to save the user having to type them out again. 


Source code is available as a .zip in lecture 17!

02:30

Now that we successfully check for valid data, we will store any errors the user might run into such as "Your passwords do not match" or "This email has already been used with an account" so that they can be output to the screen.

Source code is available as a .zip in lecture 10!

06:53

So now that we are storing the error messages into our error array, we want to display these on the screen. 

06:25

In this lecture, we will be automatically generating a unique username for the user. 

Source code is available as a .zip in lecture 10!

04:54

We will be assigning each new user with a default profile picture. The default picture is same silhouette style pictures that new users get when they sign up to Facebook. We have a few of these pictures that are exactly the same, except they have different background colours. We want to randomly assign one of these as their profile picture so that all users don't look the same. The profile pictures I have used are attached as a zip file to this lecture.


Source code is available as a .zip in lecture 17!

03:49

Phew, it's finally time to insert the values into our user table in our database! 


Source code is available as a .zip in lecture 17!

05:22

This is it! Finally we are about done with the register form! The longest part is over, good job everyone! We will just do some finishing touches on it and then move onto the login form.

Source code up to this point is attatched!

Section 3: Login Form
06:58

In this video we will be making our code a little easier to work with.

03:19

In this fairly short video, we get our login form in place!

07:36

We are now going to write the code that is executed when someone tries to login.

Sourcecode in lecture 22!

04:36

Now it's time to write the code to handle an unsuccessful login attempt. We will be storing the email in a session variable so that the user doesn't have to type their email again and we will also display the error message. This is the same process as when we did it for the register form so it's nothing you haven't done before.

Sourcecode is in lecture 22!

03:53

So eventually, we will allow the users to close their accounts. Uses with closed accounts should be able to reopen it simply by logging in. Although we wont be implementing the close account functionality for a while, we will write the code to reopen a closed account now because it's not very long. 

Source code .zip is attached too!

Section 4: Styling the Register/Login Page
03:08

Now it is finally time to style our register page! In this video we'll setup our CSS page and I'll also give you a short introduction to CSS. 

05:51

We're now going to add a cool background image to our page.

The image used in this video is attached. Enjoy!

03:51

We are going to style our panel now. The panel is the white 'box' that the content sits in. You may not realise it, but you see these all the time on lots of websites including Facebook and Twitter.

06:59

We are going to give our panel a blue header box which is where the title will go!

06:25

In this video we are going to download a custom font from the internet and then use it in our CSS code.

06:24

Now we will be making the input boxes look nice and also react to a mouse hover over!

Source code available in Lecture 17!

08:57

We only want the login form or the register form to be showing at one time - we do not want to see both. We are going to use jQuery for the first time this project to show/hide each form.

Source code is available in the next video!

03:56

The last thing to do on the register page is to make it so only one form shows at a time - not both. With a click, the user can show or hide the login form or the register form. This is our first use of JQuery!

Source code is attached!

Happy coding!

Section 5: Building the Foundation of Our Site
05:44

Here we make a start on our header file that will contain all the code that we want to be present on every page. This includes the navigation bar, logo, icons etc.

06:08

Here we add a link to Twitter Bootstrap and review what this means for us. By simply adding the link to our header file, there is a whole bunch of styles that are already being applied to our content without us having to do anything.

05:19

We continue with our header file, this time adding the blue bar that goes across the top of the page. 

04:07

Now we are going to add a simple 'logo' for our site much like the one we added when working on our register page.

11:00

In this video we use the icons from 'Font Awesome' to add links to different pages on our navigation bar.

Section 6: Starting the Index Page
03:12

In this video we start creating the small panel that contains information about the user logged in. Our first panel! Yay!

Source code up to this point is available in lecture 46!

06:40

So last video we created our user details panel but it hasn't been styled yet so it doesn't look like anything really... Let's add some CSS!

Source code up to this point is available in lecture 46!

05:59

So we've created and styled our user details panel; now we will add the data to it!  

Source code up to this point is available in lecture 46!

06:37

It's time to create the newsfeed column that the user will see when they log in!

Source code up to this point is available in lecture 46!

05:55

In this video we're going to continue creating the newsfeed column!

Source code up to this point is available in lecture 46!

07:03

We are now going to create a HTAccess file that will allow us to access a users profile page simply by typing their username at the end of the URL much like you see on sites such as Facebook.

Source code up to this point is available in lecture 46!

04:10

Before we actually create our newsfeed, we need to create the tables that the data will be inserted into. In this video we create these three tables.

Source code up to this point is available in lecture 46!

09:42

It's time to learn some OO (object oriented) programming! We will be making our User class which will contain a bunch of useful functions for us to re-use throughout this website!

Source code up to this point is available in lecture 46!

07:55

It's finally time for us to program the status updates functionality! Again, this uses an OO approach to keep things nice and efficient. Enjoy!

Source code up to this point is available in lecture 46!

07:44

This is part 2 of our status updates section. By the end of this video your users will be able to submit status updates to the database!

Source code up to this point is available in lecture 46!

02:46

My mistake! I forgot to add a logout button when we were creating our navigation bar items! By the end of this super short video, you'll be able to logout.

Source code up to this point is attached!

Section 7: Newsfeed - Getting Posts
05:55

In this video we will make a start to our function that will retrieve posts from the database and output them to our newsfeed.

Source code up to this point is available in lecture 55!

04:42

We're going to continue with our function that will output the posts to a user's newsfeed. Specifically, in this video we will be writing the function that will return true or false depending on whether a user's account is closed or not. This function will be used in numerous places all over our site!

Source code up to this point is available in lecture 55!

10:17

In the last video we made a start on our newsfeed. We are now going to continue with this and create the timeframe system that will tell us how long ago a post was posted e.g. "10 minutes ago" or "4 months 2 days ago".

Source code up to this point is available in lecture 55!

07:58

Now all that is left to do is output the posts to the newsfeed for us to enjoy!

Source code up to this point is available in lecture 55!

04:24

Now that we are getting our posts from the database and outputting them to the newsfeed, we can apply some CSS style to make it look great!

Source code up to this point is available in lecture 55!

07:53

At the moment, when the page is loaded, all posts are being pulled from the database and show to the user. If we have a large number of posts, this is not a very efficient way of doing things. We are going to make it so that when the user scrolls to the bottom of the page, it will automatically load more posts!

Source code up to this point is available in lecture 55!

07:22

In this video we continue with our infinite scrolling system.

Source code up to this point is available in lecture 55!

06:21

In this video we continue with our infinite scrolling system.

Source code up to this point is available in lecture 55!

06:33

This is the final video of our infinite scrolling system (...phew!).

Source code up to this point is attached!

03:36

Alright, that was a lot of information to take in... In this video I'll just explain a little about what we just did and how it all works.

Section 8: Newsfeed - Extra Features
05:17

In around 5 lines of code, we are writing our function that checks to see if two users are friends or not!

03:08

Now we are going to make it so that only posts from people we are friends with appear on our newsfeed!

Source code up to this point is attached!

06:12

We are now going to the create the file that will show comments for a post.

08:15

Now we will add the ability to actually post a comment! Yay!

Source code up to this point is attached!

07:32

So the code is there for us to post a comment, but at the moment there is no form that we can actually post from. In this video we will show the comment section for each post and also post our first comment!

07:13

We can post comments and we can show the comment section. One thing we aren't yet doing, is actually showing the comments for each post. We'll make a start on that now!

05:58

By the end of this video we will be able to see all the comments related to a post!

06:35

We are nearly done with our comment system! All that is left to do is make it look pretty!

05:29

After this we are done with our comment system, great job!

06:29

Now we are going to add a little label to each post that says how many comments it has.

01:56

If a user clicks a link to the person's profile, we don't want the comment section to open. We take care of that now with a single if statement.

06:23

So the time has come for us to implement a like button! The first thing to do is decide whether to show a 'Like' button, or an 'Unlike' button.

04:00

By the end of this video we will be showing a 'Like' button or an 'Unlike' button on each status depending on whether the user has previously liked it or not.

06:14

In this video we will be adding the functionality to our like button!

04:14

Sometimes we may like a post by mistake, so it is important to be able to unlike something after you have liked it. We are going to be making this possible without writing any new code (use what we did for the like button handler).

07:14

Now for the final part of the section, we will be styling our like buttons so that they look good and match the rest of our styling.

Section 9: Profile Page
07:47

It's finally time to create the profile page (woohoo!). We are going to create the left bar which will contain the user's profile picture, some basic info about the user (number of friends, likes and posts) and also the buttons that will be used to add or remove the user as a friend.

06:53

So we have created our left profile page bar but we haven't styled it yet. By the end of this video we will have a profile bar that looks great!

06:36

Now we are going to create the buttons that are used to add, remove and respond to a friend request. These buttons will appear on a users profile. 

06:24

In this video we will finish creating the add friend buttons that appear on a user's profile page. 

04:00

So we have our buttons, but they don't look very good at the moment. In this video we will make them look nice! 

05:14

So we have our button to remove a user as a friend but at the moment, it doesn't do anything. In this video we will create that functionality. 

05:43

Just as we did with the remove friend button, we are going to write the code that handles adding a user as a friend when the 'add friend' button is clicked. 

Source code up to this point is attached!

07:30

So now that we can send friend requests, we need a way of responding to them. In this video we will create the page in which a user will be able to see all of their requests and from there they can either accept or ignore them.

07:51

Okay, we can send friend requests, and we have our page that will display all of the requests that we have received. The last thing we need to do is handle these requests. In this video we will add functionality to the accept and ignore buttons.

03:11

So our friend system finally works! The very last thing to do is give the buttons on our request page some style! 

07:59

In the next few videos we will create a way for user's to post something on somebody else's profile. In this part we will get the popup window working that you submit the post from. 

Creating our Main JavaScript File
05:40
05:24

In this video we will create the ajax form that handles our popup post submission.

Adding the Delete Post Button
07:44
06:58

So now that our delete buttons appear next to posts that belong to the user logged in, we can add some functionality to them. In this video we will create the ajax page that actually deletes the post (don't worry, it's really short!), and we'll also add some CSS style to make the buttons look a little nicer.

08:09

In this video we start creating the newsfeed that will appear on a user's profile page. This will only show posts that were posted by that user or that were posted to that user. We have already written most of the code for this when we made the newsfeed that appears on the homepage. Because of this there isn't a huge amount of code to write. We are mostly copy and pasting and cutting some unnecessary code out.

03:52

So we have most of our code to load the posts on the user's profile page. There are just a few things that need to be added/fixed in order for it to work! 

06:36

In this video, we will be writing the function that calculates the number of mutual friends the user logged in has with another user. We can then display this number anywhere we like, e.g. on the profile page side bar for another user it might say "5 Mutual Friends".

04:11

So we have our function that works out how many mutual friends we have with another user, now we need to actually show this information to the user. We can put it anywhere we want, but in this video, we will put it on the side bar of a user's profile page. 

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Reece Kenney, Software Engineer and App Developer

My name is Reece Kenney. I am a Software Engineer from Rugby, England. As well as running my own technology company, I have many years experience creating software, mobile apps and websites for both myself, and external clients. I have experience programming in many different languages such as C, C++, C#, Java, PHP and Objective-C, however some of my favourite projects involve working in Swift for iOS. 

I graduated from university in Leeds, England with first class honours (4.0 GPA) in Computing and also spent a year studying computer science at Purdue University in Indiana, USA. I am regularly moving back and forward between the UK and the USA and am currently involved in a number of different projects with teams in both countries ranging from iPhone apps to websites.

As well as the programming projects I am involved in, I also own and operate my own Karate Academy. I am a 4th dan black belt in Tang Soo Do (a form of Karate) and have been training for over 15 years. My karate club currently has over 50 students and 3 instructors. 

If you have any questions or would just like to talk, please feel free to get in touch! I'd love to hear from you!

Ready to start learning?
Take This Course