Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript
HTML-код
- Опубликовано: 1 июн 2024
- How To Create A Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript.
Hostinger Discount: www.hostg.xyz/SH8cs
Responsive React Portfolio Website with Theme Customization (FULL COURSE): www.udemy.com/course/react-js...
Source code, Assets & Live Demo: / egator
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!
Iconscout CDN: unicons.iconscout.com/release...
Check out The Playlist: • Create a Responsive Mo...
Subscribe: / @egatortutorials
Assets: drive.google.com/file/d/1538e...
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
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
This channel has more valuable content with tons of skills to learn than what some of these Bootcamps and university courses offer. RESPECT!
This is really amazing, I've seen some RUclips 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.
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!
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
I was searching through You-tube and i found this.
It really helped me. Thank you.
This person is totally different from every youtuber on RUclips. 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 💗💗💗
i am from bangladesh and really this guy deserve mellions of view....keep it up my dear teacher
Hey! From Bangladesh too. Its good to see a fellow bangladeshi on this comment section. Just out of curiosity, are you a developer?
I am also from chittagong Bangladesh..
Good to see you here..can i know which district are you from ??
@@masumheart6286 pls give ur number or fb link
@@masumheart6286 dhaka bro!
bro it million not mellions
looks amazing i can't wait to do this when i get off work in the evening
Well done my guy, Loved everything about this project. 👍👍👍 to you and thank you.
This's really amazing. Great job, I've learned a lot from you. Thank you and keep it up.💪🏽
This is a great walk through video to learn from. really good stuff
Reallly awsome design. Gonna use it in my project
Hey thank you, you are very skilled and organized with your code, keep them coming!
i like your design style : it's modern
keep up!
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
Hey bro thanks for this video although I’m just beginning my journey of becoming a web developer but I love ❤️
You are very creative, i love this
I love your work bro keep it up🔥🔥🔥
thank you so much for this video, it helped me learn a lot of new things 🤩🤩
Thaanku so much for providing the assets 🔥🔥❤️❤️❤️
This is wonderful. Keep it up ❤️
Sir thanks! Very Helpful video
i like your tutorials you are doing amazing work
Thanks a lot sir, your simple explanation help me a lot.
Congratulation man, beautifull job
your tutorial very helpfull man thanks god bless you :D
Thank you for this tutorial.
Thanks from India. you're great
Love bro. This is very inspiring!
From Bangladesh bro love your videos ❤️ keep it up
great video thank you very much it was very helpful to practice
great content, keep it up 👍
Great bro, i am glad ❤❤
Thank you bro..
I just shared to my peers
Now i got some issues to concentrate(thanks to family for ruining constantly)
Would love to try & learn that bro..
If ome day,got career life as wished,dreamed & remember this,i would love to come back here & say
Hope wisj you all will be well in life,career,family 😃🌟✨🌏🏠🙌
15.03.2023 10:06 pm ist
Omg U r osm .... Great Webpage ✅✅
Excelente, muchas gracias por compartir sus conocimientos.
Man u deserve the world
Bro, you are just too good. Godbless.
That fact that he did all this without javasvript framework is awsome
exactly
I did it all with react js fully functional I even added some features
This video is very useful for me because of this my collage project is completed thank you so much sir 😊
can i get back end please
beautiful design
muchas gracias bro por tu compartir tu conocimiento
Looking for more videos like this. Please create more projects using HTML and CSS. Thanks a lot for these tutorials!!
Have u completed it
Omg this design is very dope
I love this video please make more I am from nigeria
I’ve just discovered your channel today (Oct 12 ‘22) and this is top notch information and I appreciate you sharing this information.
Bro have u completed the project
Man, you’re a smart guy. I would give you a hundred likes if I could.
This needs to be shared as much as possible. A Million views for this guru!
After making this website can I upload and message anyone and upload photos without writing codes....???
@@nishaanvekar4938 None. A backend and database will be needed.
@@ademolaolutosin4716 ohh... Thanks
@@nishaanvekar4938 hey if you have made this website can you plz share your github repo
@@faisalabrar2426 No,I didn't make the website...
This looks great
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.
heyy i have some questions regarding this project can you plz answer them, first is : does this project has backend?
@@jatinagarwal6208 sure there is backend for this project but was not covered on this tutorial. I am not the author of this tutorial, however if you are interested in backend feel free to ask.
Dude, AMAZING!
This is so so best ever I have been searching for.
Thanks in advance keep it up man.
But please can you do this with react if possible?
Thank you country man. A great job you are doing. You are helping a millions.
I appreciate you
😉
Its so awesome bro
Great work
wow fantastic bro😍🤩🤩🤩🥰🥰💙💙💙
Hello Equator.
I just found you online while searching for a template of exactly this type. Your skills in HTML and CSS are impeccably amazing. Absolutely brilliant. I am writing the PHP code behind your front end using Laravel 9, just got one request if I may. Could you add three modal-type popup windows for sending Post, Comments, and Messages? I will be very happy to subscribe to your channel. Thank you
Broo amazing!
You've always been given out real contents guru thanks alot.
Pls I can't download the source code of your designs with other videos
Realmente me ha sido de enorme ayuda tu video, gracias por compartir tu conocimiento
This is one of the best RUclips tutorial i have ever come crossed. I am a self thought Web developer and your video have just enhance my study thanks..
heyy i have some questions regarding this project can you plz answer them, first is : does this project has backend?
@@jatinagarwal6208 not it's only front end. you have to do your backend yourseld
Brother! I love you.
Brother. You are a gift from Heaven.
how do you figure out the varibles for your css without experimenting? For example color-white: hsl(252, 30%, 100%), borer-radius: 2rem; sticky-top-left: 5.4rem. u know? are the variable similar for most commercial websites or something?
bro u are the greatess
Thanks bro for such a amazing content
Yo the best Man ❤️❤️
i spend a complete whole day by only watching this tutorial. so finall i completed this project 😍😍
hey
my problem is after apping media query my message box not appeaar nd all mesh up.
can u give me solution
@@rahulwaghela3929 can't without seeing your source code.
Bro I am also having problem in code can u plz give us source code
Great job
Can you please share the backend? this is the best channel yet so far. I'm hoping you drop a backend video soon.
Thank you..
Really appreciate your work and skills....
I noticed that you are changing the code without even recording that...this creates confusion and then it gets difficult to rectify the error.
That looks really cool :p
just respect for you
Thanks!
Just a perfect video that learn a lot of things !
Hello
Such a amazing
Could you please make videos of various projects with coding that will benefit everyone?
For example, calculator, camera, screen recorder, video sharing website with login form backend
Well done
i am your new lifetime subscriber. you deserve more then this. love a lot😍😍
Wow you are such an inspiration , if one can add some back-end this is worth being utilised. .. .
I'll be adding the backend in the very near future
I'm studying logic and algorithms by know, but this quality in developing is my goal. Thanks for te inspirational video.
I'm glad you enjoyed the video. Even better projects coming up!
After making this website can I upload and message anyone and upload photos without writing codes....???
@@nishaanvekar4938 no you need a backend to do that
@@CelebrityPlayhouse now what's that?
thank so much, i will add features backend using php.
Great! I'd like to see how it turns out.
darn, this is amazing, what a pro project we have 🤩
spell damn correct!!!!!!!!!
Love you bro beautiful project that's what I want from a year
After making this website can I upload and message anyone and upload photos without writing codes....???
@@nishaanvekar4938 no
@@sainathreddy2632 thanks
Hello EGATOR, thank you so much for this. I have a few requests to put across
1. Would you kindly add ecommerce and adverting features/ functionality to this series
2. Kindly do a backend for this series
I really recognize and appreciate all the effort you put into developing these videos, they really help us way big!
Thanks once again, best regards!
Yeah i need that too
Thank You sir
Hey i have followed ur tutorial on this video, and i hv reached "the left sidebar" section but the profile pic on the left sidebar cant be shown, can u please tell me where is the possible problem that i hv Made? Thanks in advance 🙏
Great work man, can I make the site dynamic and an actual functioning website ?
Perfect🥰😘
beautiful
All excellent, your video has been of great help in my school project. However, a problem arose with the change to night mode. I get this error for using root in the changeBG function. Do you know how to fix it?
Uncaught ReferenceError: root is not defined
Great tutorial..thanks for the priceless tutorial, this is actually better than most premium courses..thanks once again.
On a side note, I was coding along using scss instead of CSS, so I used scss variables. However, I ran into some problems trying to control the theme colours and backgrounds with JavaScript. How can I use JavaScript to control my scss variables. Any guidance/resources will be appreciated.
There shouldn't be any issue because the page has no idea of any CSS processor that is being used because what is linked to the page is the minified version of your compiled CSS. So try and check if you are selecting the right attributes (you can inspect the compiled css file) .
Thank you
Super bro, Is this dynamic website and how can let use if we make (how to let to users if we make dynamic website)
Plzz give me live demo link. I want to buy this but first I see live demo.
Thank you 😊
smartest guy ever
hello , great tutorial helped me a lot with my project , tho i am facing issue with photo's , photo is not adjusting according to the frame size and i am only able to see one corner of the image , any solution with that ?
Hii your teaching way is awesome, can i get source code please
perfect ty