JavaScript Projects for Beginners | Build an Instagram Clone - User Profile

Опубликовано: 14 Апрель 2025
на канале: BeGeos Dev

259

In this new episode where I build an Instagram full-stack web application clone, I will focus on the user profile page mainly using HTML and CSS. This is just another part of the bigger picture in order to create a fully functional web application clone, using typical web development tools and languages.

In the previous episodes I built the login and signup page, complete with all the animation, error handling, and transition thanks to JavaScript. This time is the moment for the user profile, which is going to be very similar to the real Instagram profile desktop view, after all is simple and minimal but I really like it.

In this one I am going to use CSS Flexbox to position some of the elements on the page, and CSS Grid to layout the tiles, or the pictures, I honestly think that for these types of features Grid is a far better option than Flexbox.

The structure and markup are very simple:
we have a header at the top with the logo and some action buttons
Second, there is the profile header where you can see the username, a brief description and the account's stats, like followers and posts, etc. And also a very nice thumbnail picture which is going to be associated with the user upon registration, but this will come later in the series when I'll implement authentication.

For now this is the result and, even though there isn't a backend yet, so the logic is not working. I am very proud of what is coming out of this project and it looks very very good. However, there is so much more yet to come, som many features and I am super excited to work on those too. If you are too, then subscribe not to miss a single episode. In addition, if you want to help this channel leave a like and share and let me know in the comments some adjustaments I could be doing on this project. I am always open to new suggestions.

Thank again for watching, and reading
I'll see you at the next one

BeGeos

Unsplash Pictures: https://unsplash.com/
1. Author: Matteo Silvestri
Link: https://unsplash.com/photos/6-C0VRsagUw
2. Author: Kunal Shinde
Link: https://unsplash.com/photos/-f0YLss50Bs
3. Author: Jay Mantri
Link: https://unsplash.com/photos/TFyi0QOx08c
4. Author: Niko Photos
Link: https://unsplash.com/photos/tGTVxeOr_Rs
5. Author: Vincent Van Zalinge
Link: https://unsplash.com/photos/vUNQaTtZeOo
6. Author: Fabian Quintero
Link: https://unsplash.com/photos/UWQP2mh5YJI

Social:
Twitter: / begeosdev
GitHub: https://github.com/BeGeos

Timestamps:
00:00 Instagram Clone User Profile
00:37 Images Folder - Unsplash
1:28 Markup with HMTL
8:28 Adding style with CSS
20:45 Making it Responsive
22:22 Coming Next...