Hostinger Discount: https://www.hostg.xyz/SH8cs
Source code, Assets & Live Demo: https://patreon.com/egator
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.
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: https://unicons.iconscout.com/release/v2.1.6/css/unicons.css
Check out The Playlist: https://www.youtube.com/watch?v=hvpATFHbVm0&list=PLfVxbRIcicREvxnfsrWqiyPrjiVdnbLa_
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