Build Responsive Facebook Clone With Pure HTML5 & CSS3

Name: Build Responsive Facebook Clone With Pure HTML5 & CSS3
Rating: 5.0 (3 reviews)

Learn HTML5, CSS3 by building a stunning Facebook Clone using pure HTML5 & CSS3 and take your skill to next level

Created byMeezan ud din

Last updated 9/2023

English

English [Auto],

What you'll learn

You will learn Flexbox model master Flexbox's properties and gain skills to enhance your web designs.
You will Learn CSS selectors with the help of CSS selectors you will be able to select and target specific elements on your web page.
You will Learn CSS Tips and Tricks.
You will be able to Master your CSS skills 100%

Course content

4 sections • 95 lectures • 13h 21m total length

Course Introduction1:52
Learn to build a responsive facebook clone using pure html and css, mastering flexbox, variables, and css techniques for a scalable, device-friendly layout.
Introduction1:47
Understanding the Facebook layout3:02
Explore the Facebook layout by examining the head and container sections wrapped in a wrapper and split into upper and lower areas, using HTML and CSS for a responsive design.
Creating wrapper for tow main section of the website.mp41:41
Create the page structure with a wrapper containing a header wrapper for navigation and a content wrapper for the site content, then preview the header layout in the next lecture.
Understanding The Header Layout2:01
Creating Header Layout In Html2:00
Creating Facebook Logo Section In HTML4:04
Creating Center Nav in HTML3:44
Create a center navigation by building a center menu with list items and anchor links containing font awesome icons for home, play button, user, and gamepad.
Right Nav Layout In HTML10:35
Lets Learn About Simple Basic CSS Selectors9:54
Explore how css selectors and simple selectors—class, id, and type—target elements, and how wrappers and divs respond to rules via dot and hash syntax.
Getting Started9:21
Learn to structure a header with wrapper classes, define navigation with left, center, and right divisions, and transition from float-based layout to flexbox for a responsive three-column nav.
Display Flex and Flex-Direction8:43
Learn how flexbox creates a one-dimensional layout, using a nav flex container and flex-direction to arrange items in row or column, including row-reverse and column-reverse.
Flex-Shrink5:40
When we use flexbox to create flexible layouts, sometimes there isn't enough space to fit all the elements in their original sizes. That's where flex shrink comes in. It helps us determine how the elements should shrink to fit within the available space.
Imagine you have a row of boxes inside a container. By default, all the boxes have the ability to shrink when needed. The flex shrink property lets us control how much each box should shrink.
Here's a simple way to understand it:
Let's say you have three boxes: A, B, and C. Each box has a default flex shrink value of 1. This means they can shrink equally when space is limited. If there's not enough room for all three boxes to fit, they will shrink proportionally.
However, you can also change the flex shrink value to control how much a box should shrink compared to the others. For example, if you set the flex shrink value of Box A to 2 and the flex shrink value of Box B to 1, Box A will shrink twice as much as Box B.
By setting the flex shrink value to 0, you can prevent a box from shrinking at all. This can be useful if you want certain boxes to maintain their original size, even if other boxes are shrinking.

Remember, flex shrink only comes into play when there isn't enough space for all the boxes. If there's plenty of room, they will all remain at their original sizes.

To use flex shrink, you simply add the CSS property flex-shrink to the elements within the flex container and give them a value. The higher the value, the more they will shrink when needed.
I hope this explanation helps you understand the concept of flex shrink in CSS. It allows you to control how elements shrink within a flexbox layout when there's limited space. Feel free to experiment with different flex shrink values to see how they affect the layout of your elements.
Flex Basis , Flex-Wrap, Flex7:56
Creating Some Flex Classes7:10
Adding Left-Div classes4:28
Adding Center Div Classes3:50
Add and organize center div element classes, including center nav, center menu, unordered list, list items, anchor tags, and font awesome icons, using comments to keep a HTML5 CSS3 layout.
Adding Right-Div Classes4:47
Desiging Left Div Section10:02
Design the left div of the facebook project by styling the logo and search input with css, using flex alignment, a white header, light gray body, and 50px border radius.
Designing Right Div Section4:32
Desigining Center Div Section4:28
Design the center div navigation by removing bullets with list style none, aligning items as inline-block, sizing Font Awesome icons to 24px, setting width to 29px, and centering icons.
Justify Content and Align-Items10:33
Master how justify-content and align-items position flex items in a flex container, centering elements along the main and cross axes using values like center, space-around, space-evenly, flex-start, and flex-end.
22 Createing Classes of Justfiy & Align-Items3:32
Designing Right Menu Icons3:56
Designing Name Wrap9:02
Design and center a circular avatar image with border radius using flex alignment for the name wrap, control image size and overflow, and apply responsive font families and bold typography.
Hover & Transistion To The Right Menu9:07
learn how the hover state uses the css :hover pseudo-class to change a div's background, and apply transition shorthand for a smooth ease-in-out effect with padding and border radius.
Removing Background Color From Selected Menu9:57
Creating Span for Notification7:03
summarize the section 18:55
Design a Facebook-like header using CSS selectors and flexbox, covering universal, class, type, and child selectors, plus flex direction and flex grow, shrink, and basis.

Understanding Content Wrapper Html Struture2:50
Explain the content wrapper layout for a Facebook clone, detailing left, center, and right sections, with a center post wrap, create post menu, and a flex column structure.
Create Layout For Content Wrapper3:30
Create Post Wrap3:43
Creating Html Layout For cpost-input-wrap6:29
Design the create post input wrap with an image on the left and a div styled as an input field, then reveal a CSS-only popup text area on click.
Adding Classes and Designing Image8:15
Creating post wrap4:54
Box Shadow Property13:49
Adding Background and Broder-radius5:21
Learn to style an input field with a background color and border radius, add padding, and use a flex container to align elements and stretch the input to full width.
Designing Create Post Bottom3:58
Designing cpost-bottom menu11:02
Adding Color and Giving Center Position4:46
Center the second span inside the anchor by making the anchor a flex container and centering items; apply color and padding with the nth-child selector in HTML5 and CSS3.
Nth-Child Selector Pseudo Class Selector8:41
Creating HTML Layout of Create Popup Box12:33
Designing the Create Popup Box6:49
Designing the Create Post Header6:37
Designing the TextArea5:58
Creating Create Post Footer Layout in HTML18:38
Create the post footer layout in html by structuring a three-part wrapper (top, middle, bottom) inside the popup box, with a top nav and a font awesome icon.
Adding The Create Post Footer Classes5:50
Align the Element of the Create Post Footer4:05
Align the two create post footer items side by side by turning the container into a flex container and using justify-content: space-between and align-items: center, while removing list dots with list-style: none.
Designing the Create Post Footer Menu Div10:09
Designing the Create Post Footer Second Menu22:56
Creating HTML Stucture of The Middle Section7:52
Build the middle section HTML structure for the Facebook clone and fix the first item's left margin with a nth-child rule. Create a two-div inner container with a span that says add to your post, add Font Awesome icons, and align the icons side by side with flex and space-between.
Designing The Middle Section11:57
Creating The Post Button19:10
Create a post button in the bottom nav using flexbox, defining a create post wrapper, header and body, and controlling layout with flex direction and alignment.
Comibinators Selectors7:59
Lets learn Something new about Label and Input Checkbox16:34
Adding Label and Checkbox, Applying The Technique9:12
Adding the Label and Checkbox to Hide & Show The Create Popup Box5:48

Creating the Html Structure of the Post27:27
Now lets design the Post5:55
Fixing the Span and Adding the Icons6:32
Fix the post layout by adding padding, removing an anchor and decoration, and aligning elements with flex; then add icons for like, heart, and surprise.
Creating the Like,Comment & Share4:35
Designing Post Nav Top Section15:18
Root Seudo Class and CSS Variable6:44
Adding Border And Color and Removing Text-Decoration7:36
Creating Hover Effect3:20
Designing the Comment Section9:53
Align Items In Our Desire Position2:21
Now we are going to add the Classes inside the CSS24:07
Design The Section Which We Previously Created12:36
Addining Padding and the Width Property8:44
Creating The Section For The User Input8:49
Create the user input section for a post by building a create comment wrapper with image and content areas, using div-based text area and an icon group for input.
Understanding The User Input And Contenteditable10:18
Desiging The Input Section11:31
Design the input section by padding the comment wrap, applying a background color, and a 20px border radius, then align the text area and wrapper side by side with flex.
Now We Work On Textarea Removing Outline and Adding Placholder etc..11:17
Empty Pseudo Class & Pseudo Element8:42
Fixing The TextArea & Changing Color of The Placeholder & Icons3:57
Now We Are Going to Design The Icons10:17

Creating HTML Structure for The Left-Section13:54
Adding The Classes of the Left-Section4:50
Apply flex one and justify-content: space-between to the left section, copy and paste left section and icon classes, and add 15px padding to the left side inner.
Creating CSS Color Variable8:01
Designing the Left-Section-top list items5:36
Designing the Icons13:21
Creating the Left-Section-Bottom7:30
Build the left section bottom by adding divs inside the list, applying padding and a top border, and inserting an h4 shortcut heading with icons.
Designing the Left-Section-Bottom6:04
Creating The HTML Structure of The Right-Section5:44
Designing the Rigth-Section11:55
Design and style the right section of a responsive Facebook clone using HTML and CSS, including inner wraps, padding, borders, hover effects, and flex layouts for clean alignment.
CSS Unites vh, vw & Linear-gradient10:17
Understanding the Media Queries11:52
Sticky Left & Right Section In Our Desire Position3:44
Creating Dropdown Menu only using CSS13:47
Creating Html Layout For DropDown Menu25:41
Makeing Our Site Responsive9:52
Make the site responsive by adding a viewport meta tag and media queries across breakpoints from 320px to 1024px, organizing layout with header, inner content, and left, center, right sections.
Making Header Section Responsive9:48
Design a mobile-first header using flex layout, order properties, and responsive widths to rearrange left logo, center menu, and right utilities for a clean stacked mobile layout.
Making Center Section Responsive11:18
Rework the center section for mobile using a column flex layout, 90% width, and controlled order, plus responsive adjustments to the right panel and menu via media queries.
Now Making Site Responsive For Ipad & tablates5:31

Requirements

No programming experience needed. You will learn everything you need to know.

Description

Imagine having the knowledge to design and create a website like facebook from scratch. It's not just about replicating it, it's all about having the knowledge and skill sets to bring such a website to life.Well, I'm here to teach you HTML, CSS, and web design, by building the Facebook website step-by-step.

Welcome to "Mastering HTML5 & CSS3 By Creating Facebook with Pure CSS," the ultimate course that will give you the ability to build a Facebook-like social networking website using only HTML5 and CSS3. Whether you're a beginner or have no prior experience, this course is designed to take you from zero to mastery in web design.

Throughout this course, you will dive deep into HTML5 and CSS3, learning the essential tips and tricks required to construct a fascinating website. By following step-by-step video lectures, you will gain hands-on experience and practical skills, enabling you to build a social networking website similar to Facebook.

But the benefits don't end there. This course goes beyond teaching you how to replicate Facebook's design. It empowers you to enhance your overall web development skills, equipping you with valuable knowledge that can be applied to any website project. You'll learn the principles of responsive design, ensuring your website runs and functions flawlessly across various devices, including computers, tablets, and smartphones.

By the end of this course, you'll have the confidence and expertise to create a remarkable social networking website or any other website using HTML5 and CSS3. So, whether you're aspiring to become a professional web designer or simply want to expand your skill-set, this course is the perfect choice to unlock your full potential in web development.

Who this course is for:

Beginner who wants to learn Website Development

Build Responsive Facebook Clone With Pure HTML5 & CSS3

What you'll learn

Explore related topics

Course content

Facebook Layout & Flex-Box model29 lectures • 2hr 54min

Creating Layout & Combinator & Pseudo Selectors28 lectures • 4hr 9min

Creating the Post & Root Class and CSS Variable20 lectures • 3hr 20min

Creating Side Sections & Responsive Design18 lectures • 2hr 59min

Requirements

Description

Who this course is for: