Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreBuild Responsive Facebook Clone With Pure HTML5 & CSS3
Rating: 5.0 out of 55.0(3 ratings)
119 students
Build Responsive Facebook Clone With Pure HTML5 & CSS3
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%
Explore related topics
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
Master HTML5 and CSS3 by building a Facebook-style website using pure CSS, learning core features, flexbox concepts, and responsive design to create visually stunning web pages.
- 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
Implement the right navigation in HTML by mirroring center navigation, duplicating the unordered list, and wrapping image and text in divs for a consistent name block with font awesome icons.
- 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
Explore flex basis, growing and shrinking behavior, and how it behaves like min width. Use flex wrap to keep items responsive and wrap at small sizes.
- Creating Some Flex Classes7:10
Remove default margins and paddings with the universal selector, then build and apply custom flex classes for display, direction (row, column, row-reverse, column-reverse), and grow to create a responsive nav.
- 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
define and apply right-div classes to build the header layout, including the right nav, right menu with list items and anchors, and image-and-name sections with font awesome icons.
- 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
Create and apply CSS classes for justify-content and align-items, including flex-start, to align the right navigation, then build a flex container with a 60-pixel nav height.
- Designing Right Menu Icons3:56
Design the right menu icons by styling anchor tags and a font awesome icon, setting colors, removing underline, sizing to 40 by 40 pixels, and centering with text-align and line-height.
- 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
Create a center menu with a hover gray background, keep the first item blue via an active class, and fine-tune height, line height, border bottom, and border radius in css.
- 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 a content wrapper layout by building an inner content wrapper and three sections—left, center, and right—then focus on styling the center section first.
- 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
Build the create post wrap by centering the input area in a content wrapper flex container and styling the white background with border radius, padding, and box shadow.
- 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
Design a post bottom menu using an unordered list, Font Awesome icons, and spans for icon and text to create live video, photo, and smile options.
- 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
Explore the nth-child selector, a CSS pseudo class, to target specific children and apply styles such as even, odd, or every nth child.
- Creating HTML Layout of Create Popup Box12:33
- Designing the Create Popup Box6:49
Design the create popup box with a fixed-position overlay, full-screen dimensions, a translucent background, and a centered content area using flex layout and a row-oriented button section.
- Designing the Create Post Header6:37
Design the create post header with a button and plus icon, implementing a CSS-driven popup that appears on text field focus and hides on click, using flex and relative/absolute positioning.
- Designing the TextArea5:58
Design the text area in a pure HTML5 and CSS3 Facebook clone by applying margins, placeholder, padding, font size, and disabling resize.
- 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
Design the create post footer's second menu by toggling display, applying a flex container, overlapping elements with absolute positioning, and styling icons, colors, backgrounds, and shadows for a polished look.
- 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
Design the middle section of the Facebook clone using css, adding borders, border radius, padding, and box shadow, then style inner elements and icons with nth-child selectors and color classes.
- 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
discover how to use the adjacent combinator selector (the plus sign) and the general sibling combinator selector to target paragraphs that follow a span, and apply red color to them.
- Lets learn Something new about Label and Input Checkbox16:34
Explore how to connect label and input checkboxes using the for attribute or wrapping, use the :checked pseudo-class and adjacent combinator, and create interactive, animated styling with CSS.
- Adding Label and Checkbox, Applying The Technique9:12
Apply a hidden checkbox and label technique to toggle a pop-up menu in HTML and CSS, connecting labels with the same id and using :checked to display the menu.
- Adding the Label and Checkbox to Hide & Show The Create Popup Box5:48
Wrap the text area with a label and add a checkbox to control the create post popup using CSS :checked and adjacent selectors to show or hide it.
- Creating the Html Structure of the Post27:27
Explore building the html structure of a post with a three-part wrapper—header, content, and footer—covering the post head wrap, title, image, and like, comment, and share sections.
- Now lets design the Post5:55
Design post section of the Facebook clone by applying CSS classes, adding a white background, margins, border radius, and box shadow; style header with title, username, timestamp, and anchor color.
- 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
Design the post nav top section for a facebook-like feed using pure HTML5 and CSS3. Apply padding, flex layout, and selectors like child combinator and first/second child.
- Root Seudo Class and CSS Variable6:44
Learn to create and assign CSS variables inside the root pseudo class, then apply them with var(--name) to style elements, highlighting how root's higher specificity affects color values.
- Adding Border And Color and Removing Text-Decoration7:36
Apply a top border and color to the post navigation, remove anchor text-decoration, and adjust margins; then set the post wrap border to top and align vertically with vertical-align: middle.
- Creating Hover Effect3:20
Create a hover effect for a button using pure HTML5 and CSS3, change the icon, apply a hover background color, and set a border radius on the anchor flex container.
- Designing the Comment Section9:53
Designs the comment section layout using a two div wrapper and a flex container to align avatar, user name, comment text, and actions like, reply, and timestamp.
- Align Items In Our Desire Position2:21
Apply a flex layout to the comment area with flex-direction column. Add flex one to the div to fill space and switch to flex-direction row for the like and reply.
- Now we are going to add the Classes inside the CSS24:07
Learn to structure the comment layout and apply CSS classes inside the stylesheet, using selectors, pseudo-classes, and child combinators to target specific elements within the comment wrapper.
- Design The Section Which We Previously Created12:36
Design the section as a flex container, center items with align-items center and align-self center, and refine with padding, color, and border radius; reveal the comment wrap on hover.
- 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
Turn a div into a text area by enabling contenteditable, removing outline, and stretching it with flex, then implement a placeholder via attribute selectors and CSS pseudo elements.
- Empty Pseudo Class & Pseudo Element8:42
- Fixing The TextArea & Changing Color of The Placeholder & Icons3:57
Learn to fix textarea wrapping with word-break: break-word and set placeholder and icon colors using rgba values, while using pointer-events: none on the textarea's pseudo element.
- 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
Create and use CSS color variables to define main color, background color, and text colors, then apply them with the var() function across the project for consistent styling.
- Designing the Left-Section-top list items5:36
- Designing the Icons13:21
Design and style a set of icons using CSS with gradient backgrounds, padding, border-radius, font-size adjustments, and background-clip text techniques, culminating in colored, rounded icons with shadows.
- 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
Create the HTML structure for the right section of the Facebook clone, duplicating the unordered list and image div, then add sponsor, contacts, and font awesome icons with flex layout.
- 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
Explore how to use vh and vw for responsive heights and widths, and create linear gradients with multiple color stops, directions, and RGB values.
- Understanding the Media Queries11:52
- Sticky Left & Right Section In Our Desire Position3:44
Learn to create sticky left and right sections with position: sticky, top offsets, and 90vh height for a Facebook-like layout using HTML5 and CSS3.
- Creating Dropdown Menu only using CSS13:47
Build a pure css drop-down menu using icon controls, fix z-index for forward elements, and craft reusable css classes for padding, size, font, color, borders, and icons.
- 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