Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript

How To Create A Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript.

Hello guys, and welcome to another Beginner Web Development Project Tutorial. Today we're going to Create A Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript. We'll use modern CSS features like CSS Variables, CSS Grid, CSS Flexbox, and CSS Units like rem, vw, and vh to achieve a Responsive Design.

I will walk you through creating the markup for the navigation bar, sidebar and notifications popup, stories, create post section, feeds or posts, messages, and friend requests. From there, we'll move on to our styling, where we'll add beauty to our page. We'll be using CSS variables, CSS grid, CSS flexbox, and other modern CSS properties and features.

Lastly, we'll move on to our JavaScript, where we'll be adding our sidebar menu toggle functionality, our messages or chat search functionality, our modal open and close functionality, our font size customization functionality, and our primary and background theme or display customization functionality.

This is a Simple Web Development Project to get you started on creating medium-sized projects as a beginner web developer.

If you enjoyed this video, please leave a like and subscribe for even more amazing future projects!

I've made the source code for all projects available for the past few months, but now I need your support to keep bringing you even better content. Please join my Patreon and have access to all my project source code, images, and live demo! You'll also have access to all future projects, Figma files, my upcoming Udemy course, and more!

TIMESTAMPS
00:00 Intro (Project Preview)
00:05:14 Project Setup & Plugins
00:07:20 Navigation Bar Markup
00:09:57 CSS General Styles and CSS Variables
00:17:35 Navigation Styles
00:22:06 Main and Left (Profile and Sidebar Menus and Notification Popup) Markup
00:34:22 Main and Left (Profile and Sidebar Menus and Notification Popup) Styles
00:48:38 Stories and Create Post Markup
00:51:20 Stories and Create Post Styles
01:00:25 Feeds/Posts Markup
01:05:48 Feeds/Posts Styles
01:13:52 Messages and Friend Request Markup
01:19:32 Messages and Freind Request Styles
01:35:23 Theme Customization Modal Markup
01:37:07 Theme Customization Modal Styles
01:50:00 Responsive Design | CSS Media Queries
01:55:22 Sidebar Menu Items Toggle Functionality in JavaScript
02:03:30 Filter messages using JavaScript
02:08:58 Modal Open and Close Functionality using JavaScript
02:15:35 Font Size Customization using JavaScript
02:24:00 Primary Color Theme Customization using JavaScript
02:29:58 Background Theme Color Customization using JavaScript

[axisinfo]

This channel has more valuable content with tons of skills to learn than what some of these Bootcamps and university courses offer. RESPECT!

[sixtusushahemba]

This is really amazing, I've seen some YouTube social media project courses similar to yours, but I think this's amazing. Great Job and thank you for releasing it for free. It shows you not doing it for other reasons only but mainly to teach others how to make it.

[JhonnesMU]

I'm Brazilian, and learning to program recently, I'm finishing some courses to later come to practice and practice all your videos, thank you, you're very good!

[sangameshkyatappanavar]

This person is totally different from every youtuber on YouTube. His videos are remarkable and incredible... I love the way he explains everything from just the basic and fundamentals. I totally love him. Thank you sir for your invaluable videos.

Lots of love n support sir
Thankyou 💗💗💗

[nestorj.echeverryhoyos]

Que gran trabajo, he aprendido más con tus tutoriales que con cursos, hasta ingles estoy aprendiendo contigo, muchas gracias... nice to have come to your channel

[quotexofficialbd]

i am from bangladesh and really this guy deserve mellions of view....keep it up my dear teacher

[mertcanoncul]

looks amazing i can't wait to do this when i get off work in the evening

[j.worship]

I was searching through You-tube and i found this.
It really helped me. Thank you.

[georgedarko]

Well done my guy, Loved everything about this project. 👍👍👍 to you and thank you.

[sixtusushahemba]

This's really amazing. Great job, I've learned a lot from you. Thank you and keep it up.💪🏽

[generalcoder]

i like your design style : it's modern
keep up!

[jilaliferhati]

This is a great walk through video to learn from. really good stuff

[nashmusic]

Hey thank you, you are very skilled and organized with your code, keep them coming!

[khalidsaifullahfuad]

Reallly awsome design. Gonna use it in my project

[donaldmjbart-williams]

Thank you very much for your beautiful tutorial. It is amazing how you can cram so much knowledge and techniques into one tutorial. Big up to you brother. You are the real man

[michaelsglas]

I’ve just discovered your channel today (Oct 12 ‘22) and this is top notch information and I appreciate you sharing this information.

[gatwechmakuch]

Hey bro thanks for this video although I’m just beginning my journey of becoming a web developer but I love ❤️

[stephesoncustodio]

thank you so much for this video, it helped me learn a lot of new things 🤩🤩

[charlesenoyoze]

This is mind blowing. I hardly comment on tutorials but I have respect for yours. Thanks for your patience and effect on the completion of this free great project.

[kingsleynmai]

Thank you country man. A great job you are doing. You are helping a millions.
I appreciate you