JavaScript Projects for Beginners | Building an Instagram Clone
In this series I am going to build a web application to create an Instagram Clone. It is going to be a full-stack app so I’ll use HTML, CSS, and JavaScript on the Frontend and nodeJS and Express on the back end. On the database side, I can use either SQL or non-SQL options. A project like this is ambitious but super important for beginners. First of all, this is going to be a multi-page application, so now you have to think about multiple pages. Secondly, in this one, I will implement authorisation and authentication as well, which means logging users in, and signing them up.
This is a big step from previous projects, there are some best practices when it comes to storing users’ data and passwords set cookies and sessions, etc. It is fundamental for any web developer to get to know these things in detail.
Since the project is going to be quite long I decided to split it into smaller chunks, so expect shorter videos but more frequently. For today, I’ll start building the login and signup pages. They are going to be on the same page so I need some kind of logic to conditionally show one of them. For now, the markup and the styling will be enough but don’t miss the next episode where I’ll add JavaScript to mainly control the animations, to show/not show, to validate the input fields, and obviously to send the request to the API, which is not yet built, but it will be soon enough. This and much more you’ll see following this project along, so make sure to subscribe not to miss a single episode and also to help this channel and myself to make more content like this one.
Thank you all for watching and I hope to see you at the next one,
BeGeos
Social:
Twitter: / begeosdev
GitHub: https://github.com/BeGeos
Timestamps:
00:00 Building an Instagram Clone
1:58 Login/Signup pages Markup with HTML
9:20 Page styling with CSS
25:40 Displaying form error messages
30:44 Redirect message in the form
35:42 Final Remarks
