How to Build Twitter Clone using HTML and CSS - Beginners Tutorial

Do you want to improve your #html & #css skills? Then Watch this video and follow along with me where we build #twitter using just HTML & CSS. We will be using #flexbox and google font icons in this project.

Hope You Guys Enjoyed the Video. Like Share Comment and Subscribe to my channel for more videos like these.

GET Source Code :

Timestamps :
00:00 Intro & Demo
01:40 Project Setup
02:48 Importing Google Font Icons
03:46 Importing Font Awesome
05:02 Building Sidebar
08:40 Styling Sidebar
17:32 Building Feed
18:27 Building Tweet Box
20:23 Styling Feed and Tweet Box
27:35 Building Posts
31:58 Styling Posts
37:54 Building Widgets
41:10 Styling Widgets
44:44 Final Demo & End

Watch Our Previous Videos :
➔ Responsive Netflix Clone using HTML and CSS - Beginners Tutorial

➔ Instagram Reels Clone using HTML & CSS - Beginners Tutorial

➔ TikTok Clone With HTML and CSS - Beginners Tutorial

➔ Responsive Facebook Clone using HTML & CSS - Beginners Tutorial

➔ Gmail Clone using just HTML & CSS - For Complete Beginners

➔ LinkedIn Clone using just HTML & CSS - For Complete Beginners

➔ Google Clone with just HTML & CSS - For Complete Beginners

➔ Responsive YouTube Clone using HTML & CSS - Beginners Tutorial | Part 1

➔ Responsive YouTube Clone using HTML & CSS - Beginners Tutorial | Part 2

You can find me on:

Credits:
Inspired from Clever Programmer

Background Music Used:

Disclaimer : This video is meant only for improving your html and css skills and purely for education purpose not for any other intentions.

[elnino]

GREAT VIDEO MY BOY,
I have a fair exam on this, you have helped me a lot, thank you

[chirayusakarkar]

Bro awesome video explaining each and every thing and how things are working behind the scene it's not easy task.
Thanks a lot!
Love From Nagpur India.

[mr.teleport]

15:58, i just clicked on the stop server option, when i again clicked the live and the whole layout was like previous, the border was gone and the twitter button was not sized . what should I do ?

[ALOKIKYADAV]

👏👏👏. Nice video bro.
YouTube is full of theoretical tutorials, we need content like this.
Real projects 😉

[nielxo]

how did you make the widget smaller bro please in 44:36

[DycayBeats]

6:04 why did you name ".sidebarOption active" when the rest of the menu is just ".sidebarOption"? Does it make any difference later on?
7:22 how did you make the 3 lines into 1 line by just 1 click?

[CODE_WITH_FRED]

thank you so much this help me for my project

[mojvlog]

Thank you so much, this was an amazing experience and informative.👍👍👍👏👏👏👏😊

[Development-gq]

Hello brother, the site for downloading the program you are using

[keexotics]

now how do you make this responsive, say i want to recreate this but completely different style but people can post, add videos, log in etc.

[engelnkosi]

Sir Thank you so much your vedio as very helpful. Much appreciated

[omorfaruk]

want more html css social media websites like this

[saniafarooq]

Sir in the css file before { this symbol what you write plz answer me

[StoryLandForKids-ava]

can some guide I am not the twitter icon after (fab.twitter) pls

[armaon]

Thank you so much. it was very useful.

[ashin]

my sidebar options are come horizontaly why?

[babakabdzadeh]

Thanks a lot for the beautiful explanation, Min 15, CSS=> how body: flex made the tweet btn smaller?

[farhansaikh]

Good Project. I took the bundle you have shared. But the issue is it's not responsive. It's fine for desktop devices. Please make a video or suggest me something to make it responsive for mobile devices

[alpha_calculus]

Looking forward to a css grid tutorial

[abhikumar-btev]

Bro how to make it responsive plz guide??