Hey guys, In this video, We are going to build a website clone using HTML and CSS. We will be using CSS Flexbox to build this. This is a modern Homepage clone of a website called UsabilityHub.
Websites use:
Clone of: https://usabilityhub.com/
Font Awesome: https://fontawesome.com/icons
Google Fonts: https://fonts.google.com
CSS Peeper Extension: https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en
Pre-requisites:
Basic HTML and CSS
Flexbox: https://www.youtube.com/watch?v=oJXmXzfjrBY&t=911s
TimeStamp:
0:00 Introduction
1:33 Website Overview
2:46 Code Setup
11:26 Top Banner
17:54 Navbar
30:15 Header Section
35:32 Companies Section
39:53 Features Section
49:35 Big-Feature Section
55:42 Examples Section
1:08:49 CTA Section
1:12:33 Footer Section
1:17:45 Sub-footer
π Get Notes here: https://telegram.me/realanujbhaiya/129
π§π»βπ» Get Code here: https://telegram.me/realanujbhaiya/132
π Bookmark this Playlist: https://www.youtube.com/playlist?list=PLhzIaPMgkbxDxVcH-M-JFM73PY1R_i2mK
π₯³ Join our Telegram Community:
Telegram channel: https://telegram.me/realanujbhaiya
π Follow me on:
Instagram: https://www.instagram.com/Anuj.Kumar.Sharma
Linkedin: https://www.linkedin.com/in/sharma-kumar-anuj/
Twitter: https://twitter.com/anujbhaiya716
Hashtags:
#codingshuttle #webdevelopment
Tags:
coding shuttle
anuj bhaiya
anuj bhaiya web development
code shuttle
css
html css project
coding shuttle by anuj bhaiya
coding shuttle by anuj
css tutorial for beginners
website using html and css
web development anuj bhaiya
html
html css javascript project
html css javascript tutorial
html css
web development full course
css full course
css in one video
css tutorial
responsive website using html and css
html css website
web development
website development
anuj bhaiya web development course
css project
html and css projects
html css website design tutorial
advanced css tutorial
html and css
html css projects for beginners
modern website design html css
portfolio website html css
tailwind css
web development projects
css advanced tutorial
flexbox css
full stack web development project
html tutorial for beginners
html website
website design
website html css
header html css
html and css projects for practice
html and css tutorial
html css full course
html project
unity 2d tutorial
website
website using html css and javascript
anuj bhaiya coding shuttle
bootstrap tutorial for beginners
c language tutorial for beginners
full website design in html and css
hibernate tutorial
how to make website using html and css
html css template design
html css tutorial
html css tutorial in hindi
html/css
make website using html and css
advanced css
angular in one video in hindi
bitbucket tutorial
bootstrap full course
bootstrap website
build a website using html and css
building website with html and css
college wallah
create website with html and css
css flexbox
css grid and flexbox
css website
flex css
front end development tutorial
git tutorial
html css in hindi
html css javascript
html css website design
html in one video
html template design
javascript project
landing page html css
modern website
php tutorial for beginners full
single page website html css
tailwind css tutorial
web development project
website clone
website clone using html and css
website design html css
anuj
anuj bhaiya html
coding shuttle
anuj bhaiya
anuj bhaiya web development
code shuttle
css
html css project
coding shuttle by anuj bhaiya
coding shuttle by anuj
css tutorial for beginners
website using html and css
web development anuj bhaiya
html
html css javascript project
html css javascript tutorial
html css
web development full course
css full course
css in one video
css tutorial
responsive website using html and css
html css website
web development
website development
anuj bhaiya web development course
css project
html and css projects
html css website design tutorial
advanced css tutorial
html and css
html css projects for beginners
modern website design html css
portfolio website html css
tailwind css
web development projects
css advanced tutorial
flexbox css
full stack web development project
html tutorial for beginners
html website
website design
website html css
header html css
html and css projects for practice
html and css tutorial
html css full course
html project
unity 2d tutorial
website
website using html css and javascript
anuj bhaiya coding shuttle
bootstrap tutorial for beginners
c language tutorial for beginners
full website design in html and css
hibernate tutorial
how to make website using html and css
html css template design
html css tutorial
html css tutorial in hindi
html/css
make website using html and css
advanced css
angular in one video in hindi
source
βοΈBhaiya video bohot Jada amazing hai. Bohot sahre chese sikha is video se .Maine pura video dekha or website clone karliya apke sath sath. Mai upka MERN stack Batch ka ek student hu. ap amazing padhate ho bhaiya. Us batch se naya Naya tools ke bare me vi sikh pa raha hu.hamara discord server ka environment bohot a66a hai. Or is video ke bad other websites clone karne me confidence paunga. Thanku bhaiya β€οΈβ€οΈ. Iske responsive version vi banana demonstrate kardena pls.ππ Thank u once again hamare liye itna mehanat karne ke liyeππ
is it responsive ?
Sir how banner-text class is written in the same other div name and how you customize it…
Helpful β€
Responsive version pls
I don't know any Hindi-but I got it
need images download link website is not working
Can somebody help me with Code of this website
Thanks i copied this sucessfully done!!!!
thank you for best learning
helpful
wrong way to make websites
how to download images there is no any option like assets in peeper
??
Very Helpful !!
I watched half of the video then i try myself and I completed this website Thank Anuj Bhai for your guidance.
Great
Maa aaygya bhaiya
Amazingπ
please make it responsive and add some jquery features and a contact form too
images nahi mil rahi π
Bro i cannot find the assets while using the Peeper extension
Helpful Anuj bhaiya β€β€β€
And Css peeper are really helpful so thanks for this also…
When you use !important , suppose for a color of a button and later change it in hover class , it will not make any changes since we have specified !important in front of it.
very helpful and great project
how you marking that red line at the begining means which extension you are using
bhai aaj tk ka sbse best website code design dekha aapki video me..
Thanku bhiya β€ I completed full clone ..!!! π¦π¦ππππππ
THANK YOU SO MUCH BHAIYA!!!
THIS VIDEO WAS REALLY HELPFUL…..
Thank you so much bhaiyya, ek website banke ready ho gya π
CSS Peeper is not working.
Thank you so much Anuj Bhaiya
Helpfulβ€
Helpfull β€β€β€β€
bhai apka face kapil sharma se milta julta hai ap kapil k judwa bhai tu nahi?
Very thanks full video
Bahiya ye image sb kaise download kre ese ke folder me add krke google drive pr de dejiye plz π
just finished the video and complete my first ever website. the whole video is just amazing and valuable!!!! suprbbbbbbb and thank u @anujbhaiya . maza ageya . future main or vhi ese content tunse mangta hain publickkkkk β€β€π―π―π
sir can be put all the sections inside container rather then putting container inside every sections?
please reply!!!
you deserving like and subscribe bro !..
CTA – Call to action . In digital marketing CTAs convert visitors into a lead that might ultimately convert to a sale
primary text me color nahi dekha rahe he
Bhaiya can you make a video for e commerce website
please one correct me if
https://drive.google.com/file/d/1a4qPrS0bj-ynhDDwbRbCZ7JLpcrLj03l/view?usp=drive_link
how to align nav-links in same line with other two buttons please.
Quality content…πππ
Bro love from Pakistan π΅π°
this video is more helpful for me to improve some flex box concept
Helpful