In the last video we created
clone of facebook And you guys loved it so much
So I've decided To create a clone of Microsoft
in this video We'll build a responsive website In which we'll cover all the
concept we've learned in this Tailwind course In this video we'll cover
Hover States, Focus State & Other States We'll learn how we can use these states
in Tailwind with the help of Utility Classes And along with that we'll apply
the concept of Break-Points To make our website responsive We'll learn when & how we
can use all the break-points in Tailwind So let's move to the computer screen
and start cloning the Microsoft Let's get started with the video [STARTING THEME] After the Tailwind video #14 If I tell you that I forgot how to setup the Tailwind
And I don't remember anything I only remember a little bit how we can
create a new Tailwind project And I forgot the rest,
What if I tell you this? You'll think that I'm lying But if I actually forget how to setup the Tailwind,
then what will I do? I'll visit the documentation of Tailwind and
for now I'll just copy this template As you can see I've created
a folder with the name "Project 2" And I'll click right
and I'll click "Open with Code" Now let's suppose if
I forgot how to do all these things So I'll just simply visit
the documentation of Tailwind I'll visit Tailwindcss.com --> Get Started --> Using Post CSS After setting up a NODE.JS project
I'll run this command and then this command And then I'll add all these things in
my "postcss.config.js" & "tailwind.config.js" And I'm done
and I'll include this "main.css" So if you ever forget something
then documentation is your only friend At that time, your childhood
friend won't help you But Tailwind CSS's documentation
definitely will help you So we always have to remember,
Tailwind CSS's documentation will help us a lot So we'll quickly open this folder in VScode We've already have open this by the way
I don't know if I'm suffering from short-term memory loss So you can see I've opened this,
without wasting any single minute I'll run "npm i" , because I want to install
and what I want to install? These things from "package.json" I already have set up everything My "node_modules" is ready
And I'm done here I'll just quickly
run "npm run" start in "index.html" And after this I'll expect that..... It may not open automatically
I've to do "ctrl + click" No worries
I'm not mad at this I'll just do "ctrl + click" But the thing I'm about to do is quite fun
because I'm go to clone the Microsoft So I'll open the website of Microsoft As you can see I've opened the
website of Microsoft and... "No Thanks"
My Chrome is working perfectly Now you can see here are many designs
"New Surface Go"...... So what we are going to do is...
Let me end the suspense We're going to try cloning this website And I want to explain, when you'll have
the exact design and Tailwind So how you can clone any particular design With that said, Let's get started
We'll start with the Title So I'll do "View page source" by clicking right
And after that I'll copy all these things So I'll visit here
I already have copied the Title And I'll inspect it by clicking right And I'll work with "Mobile First" approach
which means I'll firstly design this for my phone So I'll do the same thing here
"Right Click --> Inspect" And I'll open this in phone
Let's reload it and see how it looks in phone This is not looking good in "iPhone 12 Pro" What's going on man! What's going on Microsoft,
OK! Now it is responsive This website is now responsive And now this is how it looks. if you click here
then a sidebar will open They should have used an animation No worries
we'll add an animation Now if I click here, then a search button is appearing here
Here is "Cart" and something related to account Which is redirecting to a different page So I've understood this, I firstly have to
create this, this & this And we'll clone this page So let's start quickly What I want to do at first?
I firstly want to create a Navbar So let me remove all these things from here Let's suppose I don't have anything at this moment So I'll write "div.navbar" here And I'll add "flex-class" in it Because I want to make it a flex-box And I'll do "justify between"
You'll soon know why am I doing this And if it doesn’t work
so I'll change this And "items-center" Now you'll ask what am I doing
by writing so many classes? What I want to do? So what I'm doing is...
I want to make a Hamburger And Hamburger means
I want to create these 3 lines So creating this is very easy in Tailwind,
let me tell you what to do You just have to write "div.hamburger" Is ".hamburger" is a class in Tailwind?
Obviously not But I just want to make a div here So I'll now make lines in it I'll write "div.line" here Is ".line" a class in Tailwind?
Obviously not But I just want to keep a place holder I don't want to write "class=hamburger"
that's why I wrote it like this Now pay attention what I'm about to do here Now I'll give height & width to these lines And I'll configure this here So I've to add height for a line
suppose if I give "h-0.5" And I also have to add width
so I'll give "w-1" Oops! I'll do is like this And I'll press "ctrl+d" 2 times and
now let's see how it looks So I should have change the color of line to black
Or else what's the meaning of adding lines So I'll add "bg-black" here Lines will not be visible,
if the lines are not of black color And I'll bring it to a correct size
look, it is not in a correct size right now I've done "reset"
it's not in a correct size So this means I've to add padding
only then it'll be meaning full So I'll add "p-4" here I'm adding padding to this whole hamburger
and it's individual elements And I'll also adding padding to
it's individual elements While adding padding to its individual elements
I'm now in trouble again I've made a mistake somewhere
I've not set the height & width correctly I need to increase the width Let's try "w-6" And let's see how it works I've to do one more thing
I’ve to add margin from the top Because if I give margin from the top
only then I'll get the spaces So along with "w-6"
I also have to add.. Let's try "my-1" and if this seems a little low
so I'll change it I've given height a little too much It seems like I've given height a little too much
So I've to shorten its height So for that
let me show what will I do Firstly I'll remove the "p-4" from here Because this "p-4" is messing up a lot.
Why would I add padding to my individual lines? Now my lines are perfect Now my lines are perfect
I've added "w-6" & "my-1" & "bg-black"
And this is quite perfect now Now I want to do one more thing here
when I put my arrow on it So I would like to add "cursor-pointer here" "cursor-pointer" and along with this
one more thing I would like to do here is... I want to hide it
whenever I cross a specific point I will do that later Now this whole thing is in Navbar and
we only have created only a single item of Navbar Now I'll create the second item of Navbar And the second item
of Navbar is Microsoft's logo So firstly I'll write "div.logo" here And here I'll add the Microsoft's logo here For now I'm just writing "Microsoft" here So I want this thing in center
and for that I'll add "text-center" here And this thing will be in center
As you can see.... this is not in center OK! Look so this is appearing like this
I've done "Justify Between" And I'll also add third item here
which is going to be "Cart" The third item is going to be
this "Cart" section So I'll do one more thing
I'll add "div.cart" where I added "div.logo" And here I'll write "Account" and
I want this on extreme right Look this is perfect now Here I'll add the Microsoft's logo Here I'll add the Cart's logo and
here Account's logo I'll add these 2 things here very easily So this is "Microsoft"
And this is "Account" So I'll change this "Account"
with "Cart & Account" This means I'll add the icon of "Cart"
Anyone can add this, as easy as much And I've created this I'll do one more thing Firstly I'll surround
the "hamburger" with a "div" Because I want this to be one element Because if there were 3 elements in total And I've added "Justify Between" Only then I'll get this look As my flex-box contains 3 elements And I've added "Justify Between" which is why
One element here, second here & third here can be seen Now I want, like this one which is being treated
like one element along with Microsoft Or this element, of "Hamburger"
I want a search-icon along with this So I want the search-icon
in my first element "Hamburger" This is my first element,
Starts from here, ends here So I'll write "div.search" "div.search" which I'm writing
means nothing to Tailwind CSS There isn't any class
name "search" "logo" or "cart" I'm just adding dummy, so that
I can get a good Idea about my code To find which thing is where I've written "div.search" here And I'll write "search icon" here So this means,
here search icon will appear Now it appears up & down
Which is a problem, so what I'll do is... I'll make it a flex too I'll make this a flex too,
so they'll appear side-to-side But if I make it a flex, it'll be a mess
so I'll make it an "inline-flex" Something like this So I'll make it an "inline-flex"
and then I'll save it But my problem is still not solved So what happened here is...
when I made it an "inline-flex" And.... And my icon is screwed
Let me check what's the reason for that This is because I've made it an "inline-flex" If I keep it as a flex-box.... And If I change my
"flex-direction" to "row" Still it is not working So let me check what's the problem here
and my hamburger & search-icon split apart I have to add search-icon in "Ham" The "inline-flex" I've added, is absolutely wrong Do you know why? This is because,
I should have added "flex" here Let me remove the "flex" from here first,
and then I'll tell the problem, and its solution This element of mine, this one
in which I've written... ..."class=flex"
This would be treated as 1 element This contains 2 things
"hamburger" & "search-icon" Now this must be fine
I'm sure And the one which is creating
problem to me from up & down I'll add "justify-center" here And "align-center" "align-center" "align-center"? Not "align-center"
but "item-center" That's why I was wondering
why the suggestion aren't appearing Now this is absolutely perfect
I just have to add search-icon here "Microsoft" here, "Cart" here & "Account" here I'm not adding the Logo right now,
but I definitely will I'm not adding the Logo right now
I'm just making it... Now I want to observe
when I'm increasing it's size What are the changes here? A sudden change has occurred,
A big change And that change is..
this search-icon, This hamburger There's no hamburger, it has disappeared The search-icon has moved to extreme right And along with that, if you pay attention
the Microsoft's logo appears at extreme starting And at the same time,
some more things also start to appear Which are our icons So we have to do something that,
as soon as someone increase its size It can be seen like this So this is going to
be a kind of challenge for us How will we deal with it We've to think about it,
we have multiple solution for this problem If I command it to hide
hamburger as soon as "md" break-point hits So I'll write "md:hidden" I just have to write "md:hidden" And as soon as "md" break-point will hit
it'll vanish from here Is it vanished?
Yes, absolutely! Now I've to move
this search icon here On the side of the cart And I've to move "Microsoft" here
at the starting So what I can do here....? This is a flex-box, this one.
I want that, when it's size will increase.... So "Microsoft" must appear at first So I'll search "flex-box order in Tailwind" You don't have to remember anything I just want to tell you this So here is the order If I choose the "order 1"
so it'll appear first And if I choose "order 2" so it'll appear next
this is how we can use these classes So I want it's order to be
"order-1" at "md" break-point Let's see if there's any change in it As soon as "md" break-point hits
I want Microsoft's order to be "order-1" It's order to be "order-1" So Microsoft has moved here And now if we talk about "order-2"
What I want at "order-2" ? I want Microsoft at "order-1" and
then I want the search icon at "order-2" And at 3rd, I want this icon After search icon I want
"Cart & Account" icon to appear So at 2nd I'll place "search-icon" So I'll write "md:order-2" My "Backspace" isn't working Actually what happened was, I spilled some water
on my keyboard and it is not working properly And the next morning
I got to know that it is working So moral of the story is:
Miracle do happens Now as you can see as I'm increasing it's size
Microsoft appears first, search-icon at second This appears like this
And this hasn't effected at all So we've to look for that
why it hasn't effected at all? "Use `order - [ order ]` to render flex and grid items
in a different order that they appear in the DOM" So this work on increasing function So I just have to change this "order-1,2,3"
to "order-3,2,1" So I'll keep this as 3
and this one as 1 And I hope this will solve the problem So when the "md" break-point hits
search-icon appears first And then "The Microsoft" Microsoft appears at first
and then the "Cart & Account" In my opinion "Cart & Account" must appear at #3
so I'll change it to #3 So the flex-box's order must be like this So the Microsoft..... We've to move the
search-icon at immediate end And cart too So I've to swap the Microsoft & search-icon What am I doing man You're also wondering
I'm swapping it again & again So this search-icon
appears here & Microsoft here I've swap the Microsoft & search-icon
so this is how it appears now And I'm adding this "order"
on an absolute wrong element This is the element in which I've to add This is my flex. And I've to add "md:order-2" here And this will solve the problem
at first it was "search-icon, Microsoft & cart account" And now this is in
"Microsoft, search-icon & cart account" order Now I can do one thing, I want to
move this search-icon in extreme right So can I do something for that?
Let me check Can I use "align-self" in this Can I use it? No I cannot use "Align-self" in this Do you know how will I solve this problem? I'll hide this search-icon So I'll write "md:hidden" But I'll make a copy of it And I'll hide it and block its display.
Just pay attention what will I do I'll paste it here & I'll write "hidden md:block"
This will hide it by-default Now pay attention,
how will it affect that This will affect this in such a way that
these will appear like this "Search-icon" & "Cart Account" appears like this And when I shorten it,
so this is how it appears But this search-icon is appearing vertically So I've to do one more thing here I've to...... Let's do "Format document"
nothing happens but this makes it beautiful So I'll make a "div" here And in that "div" I'll add this "Cart Account"
something like this Now look here "search-icon" is written here
"Cart Account" here, and I'll make it a flex-box I'll command it to be a flex And this will be a flex
"search-icon & Cart Account" appears like this Now look I've made it as I wanted When it is on "sm" break-point
so search-icon is appearing at first Hamburger & search-icon is appearing on
the corner & Microsoft in between And "Cart Account" here Obviously I'll replace this
"Cart Account" with an image So don't be tensed about "I've written Cart & Account,
but there's an image on Microsoft’s official website" "What am I doing?" So the thing you're looking at This Microsoft's website We're going to clone this absolute "Search-icon, Microsoft, Cart Account"
"Search-icon, Microsoft, Cart Account" Let's broaden it Look Microsoft appears here And here "Cart Account" appears And before this "search" appears So we've incorporated everything here Now one more problem we've to solve is... This "Microsoft 365",
"Office", "Windows", "Xbox", "Support" "Where is this?"
No worries, we'll also add this So where are we going to add this? We'll add this when "md" break-point hits So for this we've to create a box What we've to do?
We've to make a box So we'll create this box along with Microsoft I'll write "div.nav" here Or else I'll write... "micrsoft..."
"div.features" I've written "div.features" Now I'll write "div.featureitem" I'll write "fitem" What do we have in feature items In feature item we have.... Let me open it in a new tab
because I don't want to close what I've opened So I'll write "Microsoft.com" here Here it is And I want to copy this all
"ctrl+C" I'll press "ctrl + C" to copy Which you all know... If you don't know this,
then how will yo manage Everything is useless then Now what I'll do is... I'll use the "Multi Cursor Functionality"
I've pressed "Alt + Shift" and now I'll press "Ctrl + V" Oh! you're unable to see which
key am I pressing So for that I'll turn on Screen Cast Mode
from Command Palette This is perfect now So now what I'll do is... Oops what have I done? I'll press "end" And I'll write "div" here There's no need for me to save this So I'll copy it And I'll paste this here I'll paste this here And obviously it is not going to look good
So I'll click on "Don't save" So this will break-point my site
you'll wonder what have I done, It was looking nice But I'll fix this Just wait & watch Firstly I'll make
this outer box a flex-box And I'll do one more thing
I'll write something like this here I've saved it And "MicrosoftMicrosoft" has appeared here
as you can see "Microsoft 365"
Is "Microsoft" written here? "Microsoft 365" is a single term
It is not a different term So I've to make it one Let's do this, what's the problem?
No problem Because I've everything in my command Now Microsoft appears here,
Let's see what function is it performing I want to make it a flex-box
too, because I want this as horizontal So I'll make it a flex too Now look, Flex OP,
Now I'll do one more thing here I'll add "mx-4" here
and after adding this, this is how it appears now And here I'll add "space-x-1"
What is "space-x-1"? SpaceX is a company
But in tailwind "space-x-1" is quite amazing Which provide space in x-axis to every item There no need for me to add
"mx2" "mx-3" "mx-4" in every element So If I add "space-x-2" So I'll get a particular
margin in all it's children at x-axis So if I hover here, you can see
It provides margin-right as well as margin-left OK! This was great So Microsoft's logo is about to be add here And I've already created rest of the things And after this,
I'll write "Search" here And then "Cart & Sign" "All Microsoft" will appear before "Search" So in here, where I've written "md:block"
I'll write "All Microsoft" here I'll create an "All Microsoft" box here as a div Now I'll shorten it There's a problem here The problem is,
They are sticking together These icon are creating a rush here
And I don't want them to do so So let's do one thing I should have made it with "Mobile First" approach
But I forgot, please excuse me. I'm a human too I've made this for a bigger screen first Now I'll return,
And create this with "Mobile First" approach You must create the
website with "Mobile First" approach Now pay attention here In this particular site of ours
we've made a flex-box to make it horizontal I'll command it to make "flex-box" when
"md" break-point is being hit Or else leave it as it is Now I'll make its position absolute Pay attention what I'm about to do
I'll make it's position absolute So its position....
Sorry, Is there any class in Tailwind with
name "Position-absolute" Sorry I should have added
"Position-absolute" here and not here In this one I believe that "position-absolute" must be a class
But that didn't appear in suggestions Or its name is "absolute"
let me check That didn't pop-up in suggestions Look, there's no need for you to memorize it
Even I don't memorize anything I don't memorize classes It's so simple, I'm claiming it
I don't memorize classes So I've made this absolute
Now what I'll do is.. I'll add "top-0" & "bottom-0" There's a "INSET"
Let me tell you what this is Adding "Inset-0" has added zero to all sides So I've done "inset-0" , "top-0" , "bottom-0" , "right-0"
What's the problem now man So it's position is absolute And all four sides are 0 Now if I increase it So it is moving from right & from left
Which is perfect So what I have done is... This is now on absolute position in this container Now what I've to do is... Where is it absolutely positioned?
In this "div class = logo" folder So it curled its positioning in its respective Now what I'll do is...
I'll command it to, Push it backward horizontally.
And for that I'll write "-translate-x-72" Let's see what happened This is not completely hidden,
so I've to increase its value So if I change this value to 25rem...
I've to do one thing I've to increase it too from 72
I'll change 72 with 80 It is not completely hidden even after this I think I've to change it to 96 Yes, this is hidden now Now If move it here so you can see
it'll look like this So if I ever want it by clicking on hamburger
so I can do this Now I'll do one more thing Firstly I'll change it's background to white So if I change its background...
Oops what have I done? I'll change background of this one I just want to check if I.... ....do it like this So are there any change sin this box?
Yes there are So it has taken enough margin I've already added "mx-4" in it
And many more The "mx-4" which I've added in it
I'll only add at this at "md" break-point Let's not force it And I'll also at this son "md" break-point only
all of these Let's see what happened If I increase it So it is just appearing half It is occupying a lot of width
what's the reason for that? I've done absolute-mx-4 in
"class = features" "md" break-point is not even hit yet So I don't know why it is occupying so much space But never mind
It is occupying so much space... But if I add "bg-red" in it I just want to know what's going on here If I add "bg-red" here I've added "bg-red" Nothing happened, what's this?
Oh I've specify "bg-red-500" or "bg-red-600" OK "bg-red-700" I've added "bg-red-700"
so it has appear quite bold Now I just want to know,
Why its width is too much? Why its width is too much?
If I remove this... If I remove "--tw-transform" So why its width is occupying so much space? If I set it's width to "fit-content" so it'll fix.
OK let me do this I didn't set its width
So I'll now set its width to "fit-content" So I'll write "w-fit" here It will set width to "fit-content" Now if I bring this back
with the help of JavaScript So I'll do that like this Like this I'll margin from top & bottom
And I'll change "bg-red" to "bg-white" I'll change the BG to white And I'll do one more thing
I'll also remove this "translate" class So when I'll bring it, I'll keep it like this Just like this one, when I'm shortening it It is appearing like this when I'm shortening it And it turns in to a cross So I'll do something like this I wonder how will it look if I add margin in it
from the top If I...Give this element....
margin... from the top "0 34px"
And if I increase it like this... To I can do it like this
I can change its background to gray So I can change it's BG to gray Let's try "gray-50" or "gray-400"
Let' see how it looks If I bring this back So this is how it looks But I want this color It is very light gray So I have to check
how much lighter is it Maybe I've made it a little darker
Maybe 200 is enough for me I'll check this later
I'm not in a hurry So here are some more option for the phones
Like "Microsoft 365" "Office" "window" "surface" "Xbox" "Support" "software"
Now if I want to go for specific details So what I'll do is.. Look, if I increase it's size It's creating problem,
I've to fix it When I'll increase it's size
so firstly I'll remove "w-fit" form here So I'll change it's width... ...to auto from "md" break-point I'll change it's width to auto And I'll also remove "bg-gray" I'll write "md:bg-..." How can I reset BG
"md:bg-auto" "bg-auto" This has set the Background size to auto Can I change it's BG to white? OK! Let me change it to white And along with that I also
have to add "inset-0" & "md-flex" Let me check what's the problem here If I reload it? OK! I've to delete the "translate" class So what I'll do is... I'll add "md:translate-x-0" Here it is "md:translate-x-0" So I don't want to translate it on any break-point But somethings have been vani... OK nothings have been vanished
"Microsoft 365" "Office" "Windows" "Surface" But where are the rest of them?
I've to check "Feature : absolute"
OK! So we have to remove absolute positioning So what I'll do is..
I'll add "md:static" position static And yes we got the website back So this is how it looks in phones And on computer, like this In phones, like this
In computers, like this Now as you can see If I close this so I've to make
a box & this thing at the bottom too And I also have to make this "Surface Go Laptop"
Which seems to be so easy Because I'll make a simple flex-box
this can be made with flex-box And this is the same thing "For Business"
this is similar to this So in my opinion everything will be done
there's no big deal in it This too & this too
everything... There's no problem in it
And even this is very easy to make it responsive Because we just have to set
it's width with "vw" And we're done
And this can also be create easily I can either use grid or flex-box for this So this is so easy Now what we'll do is... We'll first complete the tricky part
and after that we'll design the next part OK! Let's work on this And now see,
how cool our website is looking And obviously I've to do this with JavaScript So we'll do this with JavaScript And after this.... Our site will be very cool Now I'll design the
next part after taking a break If I design this part now,
so this will result in a small break And on the other hand If we leave this Navbar space alone
so it'll be better Now if I analyze this part So I can analyze it as
a flex-box Here is the first element And here is the second element And these 2 elements which are combines
this laptop image & this one When I'm shortening it So they are turning place upside-down, which means
2nd element at the top & 1st one on the bottom So this is very easy To this background image What will I do with this? Or I simply add "img" tag here Initially "div" tag at first and then "img" tag To I'll quickly create a box of gray color So our Navbar is ready and
I'll minimize it like this As our Navbar is ready,
so what I'll do is.. I'll create "div.slider" by scrolling down So I've downloaded all the icons I need And from where I downloaded them?
I've downloaded them from here Not here, but from here
from this website I got these icons, so there's
no big deal in it you can do it too And I've this image And I'll use this image here
where I've written "Surface Laptop 4" Pay attention how am I structuring it Pay attention So my Navbar is ready And I'll just quickly Toggle ScreenCast Mode
from the Command Palette, which is already done Now I want to make this for phones first
so I'll make this slider a flex-box I'll make it a flex And after that what I'll do is.... I'll do column reverse for the flex-direction And what's the reason for that? The reason for that is, when I'm minimizing it
The laptop is appearing first and then this text So I've added "flex-col-reverse" Now I want, as I make it large Let us say, I want on "md' When is it changing?
Look, I've enlarges it As soon as I hit the "md" break-point
what I want? I want this to convert in to a
horizontal flex-box on "md" break-point So what I'll do is.... I'll add "md:flex-row" So as soon as "md" break-point is being hit
It'll convert into a flex-row And I'll add margin or padding
as I require Now one more thing If I write "bg-gray" here
Let's suppose I like this shade of gray And I've copied this shade And I can easily get this In-fact I haven't set the width & height
so this won't be visible I'll add 2 things in slider
1st one is: Right & 2nd one is: Left So I'll write "Left" first and then "Right" So my "Left" will be on left side
and "Right" on right side And the "Right" will contain an image So I'll also add an "img" tag in it And I'll add "assets/ms.webp" in it
I think it is "assets/ms.webp" if I'm not wrong Yes it is "assets/ms.webp"
I'll use this image I'll use image in "Right" So if I enlarges it...
Why it hasn't appear? Umm... I've done this..... And I've added "class = right"
it should have appear man This image...
Have I forgot to save? No, I've saved it Is there any need to reload it?
Why can't I see this? OK! My server was down,
Maybe My VScode was down for some reason We'll run "npm run start" We've the world in our hands Now this is how this image appears
And if I enlarges it, so this is how it looks I want to set the width & height
of my first box So firstly I'll add some content in that box
And I'll add width & height to that content So what's that content is going to be?
Let me tell you So this "Left" box is going to
be my first box In this I'll write "h-1" And I'll write "text-4xl" I've written "h1.text-4xl" here And I'll write "Surface Laptop 4" here Which will appear like this here Yes I know this image would be on extreme right
I'm aware with that And when I'm using phone,
so this is how it appears So I'll do one thing
I'll make this for phone first And I'll copy this text In-fact I'll do one thing, I'll click right
Why right click is not functioning on this? I have no idea,
Is my computer hung? Wow, Yes maybe My computer is not working properly I don't know if the video is recording,
I pray for good luck. Yes it is Right Click --> Copy...
Copy outer element? No. "Copy Element" Or I'll select "edit as HTML"
Why is it hanging so much man? I don't know why I'll reload it.
I don't know what's going on So "Do it with...."
Or else can I copy it from here? Even this is hanging
I don't have any idea what's going on What happened to my computer man? Let me show you,
You'll also be shocked knowing what's going on Are these specification bad?
No, isn't is? No they aren't,
OK! It's working now What's going on man, I'm clicking somewhere
it is functioning somewhere OK! It's fine now
Let me close this side bar Now I'll save it.
And this is how it looks like This is how it looks like Yes I know the background is not that good
and this is not even the real background of Microsoft Microsoft isn't using this background
But I've used this Then what BG is Microsoft using?
This is the exact color, where can I get this? Where can I get the BG of this exact color
I've to look for it So I've to pick this color from here If I get the color code then
I'll be able to add this dynamically Tailwind will add it So here we have "ul".... I just want that color,
I don't care about anything else Is color in here? No! I need the BG color So this color....
In-fact if I search in this div. Now if I get the BG color of it... I've written "Background" here May be I can find something here Here is the background color E6...
No, not this one Not this one I just want an answer of my simple question
what's type of Gray are they using here? There's one more thing.
Let me tell you Suppose if I get this color picker If I've selected this color here Maybe I've to remove this from here
I'll inspect it And if I remove this And, now let's suppose
I want to find out which color is this? So I'll select any color property here
Or I can type the color And if I've written something So I can get the color picker from here I'll get the color picker from here And this will provide me the value of this color
It has given "E8E8E8" And I can write "E8E8E8" here So I'll write it here And you can see it has generated This is how it appears
and this is the same color as here Let me tell you where.
Here. I'll reload it.
Sorry, I'll go back. I've clicked on a link This color And if I want to cross-check it So I can do it like this
This color is "E6E6E6" OK, let's select "E6E6E6" So this is how you can get the exact color I've saved it.
And after that... Let's see what happened here.
Not bad, this is how it looks Now what I've to do is.... I can fix these things later
Firstly, I've to focus here So What I've done is..
I've added "text-4xl" which is working properly according to me Now I'll add some margin on x-axis
I'll add "mx-5" And if I founder "mx-5" is a little low It doesn't matter, I'll increase it Now what I'll do is,
I'll add width to it Now if I add.... If I give it a width of 75%
which is equal to ¾ So this is not occupying space as expected And I also have to add margin on it's x-axis It's must have to add margin So I want to match this from here So I'll go back..... As this is written "Microsoft 365" .... ....& "Surface Laptop 4" I'll align it to the center from top & bottom So where is it? It is left box
OK! Let's make it a flex-box And after that.... We'll add "flex-column" it in And after that I'll add "justify-center" , "align-center"... ..."item-center" in it I'll add them And now look this is vertically centered
just like this Now I'll write... "Shop Now"
But I've messed up something No, not this one
yes this one So this left-box I'll only add "justify-center"
and I'll remove the "align-item : center" Which means I don't need the "item-center This is now looking good So now if I show you
So this is how it look right now Now I can do one more thing.
Do you know what? Why shouldn't I take the
exact color of background from here? Where is the background color Let's do one thing "color-red" And I'll get the exact same color Now I've got the exact color Now I'll select this exact color The advantage of adding this color is... This image & this BG
is not seems to be different Like it's blended here in this image If you look here carefully, the you'll know this is an image
But it has blended so well here Obviously I'll also add "mx-4" here Sorry "mx-5" Because I've added here
so I'll also add here And I also have to add "mx-5" in one more place
Sorry, "mx-2" "mx-2" or something I've to add this here.
Just like they have given But always remember one thing
"Mobile First" So in "Mobile First" this thing is in in center
and everything is in center So for the phones... I'll add "item-center" But, when it'll hit "md" break-point
I'll write... "items-baseline" What does "baseline" do?
Let me check Now look if I do this,
so this is how it looks And I'll also do the same thing for
the paragraph I'll add "text-center" & "md:text-base" Which will remove the "text-center"
What happened? Actually I was arranging my displays No worries. Now if you look here, there's some space here
But if you look here, there isn't any space We've to fix this I'll set it's height And what will I set the height? So look, If I add height to this particular box Let us say "45vh" So there's still problem. So I'll add padding instead of height Let us say 35px from top & bottom And this from x & y axis Now if I do it like this...
So it'll work Image is here and
"Surface Laptop 4" is here So what I've to do is..
This left box I've to add padding to this left box I've to add "py" to my left box Let us say "py-8" So what will happen?
After adding "py-8" this is how it looks "Surface Laptop 4" is bold And it's not that big So I've to change this "text-center" to
"text-base" as soon as "md" break-point hits I've added "text-base" at "md"
so why it isn't functioning Why are you not functioning? text-base.... There is already "text-center" class in it And at "md" "text-base" is applying "text-align:center" And what's the "text-base" , Oh "text-base" is used for size
I've to remove the "text-align" So I'll add "text-left"
and this will fix it "Text-left" is aligned
and this is how it looks now I'll do one more thing
I'll change this "py-8" to "py-12" It'll look better And if I look here
So has been changed to quite extent Let's do one thing quickly
Very quickly And what's that? That thing is, I'll use the Microsoft's logo
where Microsoft is written And I'll use all the icon which
I've downloaded I would like to use "MSlogo.png"
where "Microsoft" is written So I'll open this Navbar
and I'll show you Where Microsoft is written,
I'll add an IMG there And I'll write "assets/mslogo.png" Let's see what.... Shortening it will be better... Yes it'll... I'll add "class:p-4"
So there will be some padding And should I increase this padding? Maybe I should OK, let me increase it....
But there will be problem if I increase it Let's try "px-4" If I give it a padding from inside.... Or I can decrease its size
there's no problem in it So we can decrease its size Now if I change the width to 3 Now if I add class "width-3 So it's a little too small now Now if I give it "11rem" so I'm done
In-fact in less than 11 OK! So by doing this everything is going well Now I'll add "w-12" here I have to give it 11rem, so
12 won't be enough "46" What we got in "46"
Nothing? You can press "ctrl + space"
if you're not getting the suggestions I have to give it around 11rem
and I've got 12rem. Which is perfectly fine Now look, you can create 2 types of clone
1st :- A perfect clone just like your exam If someone is testing you,
"Can you make a clone or not?" Then every wrong step will be count Now as you're able
to know that I've clicked here But if someone look at this, they'll easily be satisfied
that this is the original website of Microsoft Only then, when I'll complete it Do you? I found this more better,
than the actual website of Microsoft Let me tell you the reason for that You tell me, Is this looking good? Is this looking good? Different color on top & bottom
I personally don't find it looking good But that's the choice of Microsoft
Let's create a button "Shop Now >" like this I'll add the rest of the logos I'll first create "Shop Now >" button So this button will appear after paragraph So I'll write "Button" here "Shop Now " And a "SPACE" after "Shop Now" Now only classes are left And that will "text-white" "bg-black" "text-white" "bg-black"
"text-white" "bg-black" And padding will be 4 I've to decrease some from here
OK! Font weight "font-bold" And I've to give padding more at x-axis
so I'll change the "py" to 4 OK! Now we are done Yes I know, I also have to add margin in Y-axis I also have to add "my-6" And after that.... This looks quite good The "text-4xl" of "Surface Laptop 4"
I've to set this for "md" break-point And I'll change this to "text-2xl" And I'll also add "font-bold" here This is looking a little less than bold So.... Is there any goof class of font? "font-neutral" What to do?
Let's check this one "font-neutral" Oh! this is "from-neutral"
I'm looking for "font-neutral" "font-black" "font-weight" "font-medium, normal, light" font-weight is 400 in normal
OK! Let's try normal A little more than normal
"Medium" Let's try medium Yes! that's fine, It'll work "Shop Now" will also work
Everything is going fine Now I'll increase its size
and yes it'll break a little bit Now if If I increase its size
so you can see there 3 are in line And for these 3 to be in line
I'll add a class on this button I've given "my-6"
I have to give "mx-5" And now these 3 are in one line Now what I've to do is.... I've to add margin in this whole box
Which I already have added I've given margin here with "mx-2" OK! So let me try changing this to "mx-16" And after changing it to "mx-16"
It has appeared here But I just don't want to add "mx-16" here I'll do one thing
I'll add this whole thing in a "max-width" container So if I write "div.container" so
It'll be in a max-width container And I'm just trying to... ...To create it like this I'm not sure if I may succeed or not So I’ve added this in a max-width container And long with adding it in a max-width container
I'll also add "mx-auto" here And this is now in center Yes I know these things are in center
Because of max-width container But in my opinion this is perfect So this is how it looks And this is how it will look in phones But if I'm doing it like this
so this is working for me You can see it yourself So these things are not getting in line
which is a problem and we'll resolve this too And along with that if
you want this image to be bigger So I think I've set up a width on this image
So you can also do that So you do it like this "md: 90" Or you can also add "md:auto" "md:w-auto"
is there any class with this name? I wish if it is.....
Yes! it is How it cannot be, when we've wished for it? So make it bigger And if I inspect this,
So this is how this image looks like And if I want this to be of bigger size
So I'll change it What I'll do is... Where is the image?
Is it lost? What's this man? "IMG/MSlogo" And there was another IMG Where is the image I edited? "MSlogo" Let me pres "Ctrl + Z" OK! Let's talk about this div I'm talking about this div So if I change this to "w-96" I just want to check....
Actually I'm working on the outer layer of this image So..... Right Click --> Inspect
This code is related to which box? I'm working on Microsoft logo
I'm totally confused, Let's not touch this. We've to work on this one We've to work on this,
I got confused a little bit I've to work on "ms.webp" No need to be confused And I've to work on it's width & height So I'll write "width =....." Or I'll write "class = w-46" What about this? "w-46" I think there isn't any class with name "w-46"
It should be "4-48" It must be "w-48"
Yes! Or I think this has gone so short on "w-48" If I increase it's size........ By the way, when I'm increase it's width
so why the element above is also increasing? Why the above element is increasing? I think I shouldn't have added "w-48"
in the above element Why am I adding "w-48" in this? So I shouldn't add "w-48" in that one I only should have added this here "ms.something" In here only.
Now I can increase it's size So I will need around 64rem I need 64rem on "md" break-point So I need 64rem on "md" break-point
How much rem does 96 provide? It provide 24rem
But I need 64rem, So we'll do one thing We can do it like this Now if I reload it, then nothing would happen
By the way I've reset it, No worries And if even if I do this,
then it'll look like this So to quite extent.........
Let's reload it We've matched it to quite extent
as you can see We've matched it. Yes I know I've to make Microsoft logo a little short,
and I've to add space & underline here But I'm a little bored designing this So I'll now design the next part
And when I'll fell good, then I'll be back And start refining my Navbar and this And I'll also refine this, when I'll design it a little bit So I'll inspect it And I'll return to "Mobile First"
And I'll design this And look "Choose you Microsoft 365"
"Explore devices" "Buy X-Box Games" "Get Windows 11"
I'm going to write these 4 things here So I'll move to here and.... After this..... I'll also close this slider,
So my first component is partially ready And the second one too And I'm going to create the 3rd component Now I've to look, Will I add
this whole in a "max-width container" Yes I'll add this, Because it is
already in a "max-width container" So I'll add obviously Let's write its mark-up It's name will be "div.promo" because
Microsoft is doing promotion from here After writing this, what I'll do is.... I'll add item one-by-one so,
I'll write "div.item" And obviously it'll contain an IMG And src="assets/ic1.png" And.... There is a text after this icon So I'll write a span here And in span I'll write..... "Choose your Microsoft 365" So I've written this So this is how it is looking
"Choose your Microsoft 365" I'll inspect it, and I'll make it a flex And I'll give "font-bold" to it "font-bold" Let's see how it looks And obviously I'll add a "flex-box" to it "flex-box" will make it horizontal "align-item-center" "justify-center" Now.... No, Let's remove "justify-center" Let me tell you the reason for that I've added "justify-center" in promo
which I've to remove Instead of that I'm adding "mx-4" So that it'll get some margin on x-axis And I'll also change space-x to 2 So these elements will maintain
some spaces in between Like this
"Choose your Microsoft 365" And after this I'll add
"Explore surface devices" So I'll add it like this So what I'll do is....
where is "Explore surface devices" "Explore surface devices" So firstly I'll make 4 copies of this item 1.....2......3....... I've made 3 copies Now I'll copy "Explore surface devices" And I'll paste it here And here I'll change it to "ic-2"
and what will I paste? I'll paste.... "Buy Xbox games" "Buy Xbox games" "ctrl+v" To paste
"Buy Xbox games" And "Get Windows 11" And "ic1" "ic2" "ic3" And "ic4" 1....2....3....4....
4th one is a "png" and rest of these are "webp" So we also have to look for this.
1st one is also a "png" Let's see how it looks.
So this is looking absolutely fine Yes, one thing more
I'll also add "space-y" along with "space-x" I'm adding them separately because.... Because I may have
to add different spacing here So let's suppose
I'll give this "space-y-6" So this is only appearing in one element
OK! I've added "space-y-6" at the wrong place "space-x-2" is in right place I'll add "space-y-6" here And this is how it looks
absolutely perfect And I'll change this
"font-bold" to "font-medium" Let's try "font-medium" "font-medium" is much better So I'll change all of them to "font-medium" Now let's see,
what if if we increase its size? There's nothing,
when we're increasing its size Because I haven't done something Now if I increase its size here So it is now in center, so if we are increasing
its size even a little bit Which means as it hits the "md" break-point
I want this to be horizontal So I'll add "md : flex-col" Which means flex-column I've added this in a wrong place OK! So I've to do one thing
I've to make this a flex-box too I've to call flex on "md" break-point And I'll remove this from here
because it is an item Why am I adding this on an item? I've saved it And nothing happened,
while increasing its size, WOW! Not "flex-col" but "flex-row"
Sorry This is now a "flex-row" If I decrease its size.... Why is it appearing like this even now? I've no idea about this. "md".... OK! I'll do one thing
I'll change this to "lg" break-point Maybe this is creating a problem OK! A problem arrived here.
I'm unable to decrease its size So I just have to change
this from "flex-row" to "flex-col" I've to change this
to "flex-col" by default And it is "flex-row: on "lg" break-point And this is how it is looking And I definitely have
done something wrong in it "flex-item-center" "space-x"
Everything seems to be absolutely fine Umm... why it has moved upward
I've to check And why it seems
to be slightly downwards Why it has margin on the top,
I haven't added any margin on the top Why this? Why this........? And I can see the margin on its top
but not here What is the reason for that?
I've to look for it This is an item, this is a flex too
"item-center" "mx-4" "space-x-2" So this is happening because, these items
have different sizes So what I've to do is.... "Choose your Microsoft 365" "src = this....",
What I've to do in this particular element is... I've to add margin from the top Let us say if I add 3px so
I can move it downward to this extent In-fact I've to move this whole item So I'll also add some
margin on the y-axis too And I think that is enough for me So what I'll do is.... I'll add a class in it And I'll add "my-3" in it Which will result in
moving it slightly downwards No, I won't give "my-3" to this I'll give that to its item I've given "mx-4"....
And if I add "my-3" like this So maybe this will move slightly downward "my-4"
Maybe there isn't any class of "my-3" "my-4" And these all are in line except for this So I'll add "margin-top-4"
and not "margin-y-4" In-fact I'll add "mt-6" Which will result in moving it downward.
And now you can see these all are in line So if I decrease its size,
so look, it can be seen like this And if I shorten it a little bit more
so it can be seen like this I've shorten it....
And this is how it is looks This is how it looks right now
And this is how it looks right now What happening?
Great! So we've this....
But I don't find these things perfect I have to fix the
"View of laptop in phones" So what I’ll do is.... I'll scroll down.
And close "Get Windows 11" And this occurred in our slider part So what I've done is..
I've given a by-default width-48 on "md" But I'll try width of 64rem If I try 64rem,
then that would be enough for me OK! 64rem.
What if I give even less than 64? Let us say if I change this to 60rem So that be enough...Look This is here, and this here
Hard to identify which one is original Which one is ours & which one is their's
Hard to know Logo needs to be scaled down a bit
And how will I do that? I'll change it's width..... ... to 77% And if I scale it down So it is enough And if I change this to 60%...
60% is fine I think this is fine So I'll change its width to 60% And MSlogo... I'll change its width to 50% Width...... 50% Was it 50 or 60? Even 50% is fine... I think even 50% is fine,
if you look Absolutely fine So even 50% is fine Can you see? Now if I search "Search icon svg" So...... Search icon svg "...code" Someone has made "search-icon" on "codepen" So I'm going to use it.
And I've found this search-icon So what I'll do is... I'll add "search.svg"
in assets and I'll paste this here And I'll write "search.svg" in
place of "search" Let's check if it is working or not So the search icon is not working, isn't it?
No it's not working Search-Icon is not working What happened? Stroke..... Everything is written perfectly What's the problem now? Am I missing something? "svg icon search"...... Am I doing something wrong? Svg..... "class = svg.icon" OK! I've understood what's the problem.
I haven't added width to this If I add width......Let us say...
of 4px Yes this has appeared, a small one.
So I'll increase its width I'll do one thing.... Instead of writing "width=..."
I'll write "w-...." ...96" will be too much
I know that But I just wanted to check if
it is working or not "w-16"....."w-4" By the way...
I'm just guessing blindly But my guess is working.
So I've to do one more thing here I'll add "mx-8"....
Maybe it'll be too much It is too much....
"mx-6" should be fine I'll add "mx-6" here Because in my opinion if there will be
some space in icons, that would be perfect So my icon is reversed,
but Microsoft's Icon is like this I can flip it horizontally, but.... That's fine.
I don't want to flip it right now I can do one more thing. Instead of adding "mx"
I can only add margin to the right So that will result in, exact same like here So if I scale up, so this is how it looks
And I'll replace this search-icon from.. ...this IMG But I want these size to be as they are So I'll replace the
search icon with this image Where is the search-icon?
Here it is And what I'll do here is...
"Image" "search-Icon" "w-4" "mr-6" So "class="search hidden md:block w-4 mr-6" So this has appeared here And by doing this, a problem occurred And that problem is.... "All Microsoft....."
This has shifted downward So we've to fix this. And if I inspect it
and check what's going on here So if we look here, then the search icon is here And if we look here,
so the "Cart Account" is here And after this....... "All Microsoft" has appeared "All Microsoft" is hidden...
"md:block" Its display is blocked So we'll change its
display to "in-line" from "block" So where is the "md" We'll change this to "in-line" Nothing changed..... The reason for that is...
"All Microsoft" has appeared here OK! Lets try to understand what's going on
This is a flex-box This is flex-box Which contains the search element
which is already rendered An element of "Cart Account" And an element of "All Microsoft" These 3 elements are there in it So in my opinion
what I'm doing right now is.... "search.svg" I've to move this here
after "All Microsoft" I think this should be fine
"All Microsoft" "Search" & "Cart Account" "All Microsoft" "Search"
When I'll increase its size.. "All Microsoft" "Search" & "Cart Account"
And I'll obviously shorten the "Search" And I'll add a class here And that class will be "w-6" Is it "w-6" or "w-4" ? It is "w-4"
And I'll also change the "mr" to 4 And look here.... "All Microsoft"
"Search" & "Cart Account" "All Microsoft" "Search" & "Cart Account" And I don't know why "All Microsoft"
is occupying so little space I'll change this to
"md:block" from "md:in-line" May be now this will be fine
But it isn't.... Why? This is not fixed even
after changing to "md:block" The reason for that is,
it's width is 1rem So I've to remove
the width form "All Microsoft" Yes! This is fine now
"All Microsoft" "Search" & "Cart Account" So I've to remove
the width from "All Microsoft" And now this is how it looks So If I increase its size... I can identify one problem,
this item is not in center I know I'm juggling..... That's how I do web
development to be honest What I usually do is..
When I'm doing this work So I sometimes got bored So I keep moving around &
design different things So we've designed this much By the way for you kind information
If I start building this Microsoft clone form top-to-bottom The video will go to millennium
So let's do one thing Let's only design this part And after that we'll conclude this video
because the video has already gone too long So we'll conclude this video here
after designing this portion But we haven't designed this portion
So obviously we're going to work here We'll work So I'll do one thing
I'll visit "codepen" And look for,
If someone has created a cart icon "codepen.io/cartsvg" Have someone written the code for cart svg? Add to cart animation is here.
Maybe I can get their's svg code Their's svg code.... Icon cart...... Icon user.... span svg use..... Here they are
You can have a look at these "Icon users" "Icon balance"
All paths are given here So cart is available & this is also...
But I only need cart "Cart svg code" If I search for it,
then maybe I can find something I've got the svg cart icon Can I download the svg from here? And yes I can.... I'll do one thing,
Along with the icon... I'll also search for "Account" Maybe if I found an icon related to "Account"
I'll pick the closest one But please understand
I'm not using the exact same icons And the reason for that I don't need that
Yes I'm cloning the website, But again.. If you want to make the exact replica...
I'll pick this one I know there are still differences in here But I'm downloading
which seems to be the closest to me And obviously you can arrange the icons
Or make yourself from the PhotoShop But that field is completely different
"Graphic Designing" But I've downloaded these 2 icons Do we need more icons?
"All Microsoft" is written as it is And we've downloaded
the Icon for Cart & Account Do we need to do something else?
No we don't. So I'll add these 2 to my assets folder Now if you look here,
So account icon & cart Icon is here So where my.... So I'll copy the size of icon from here
No, not MSlogo I'll copy the "search.svg" And the reason for that is.... And the reason for that is.....
Let me show you "All Microsoft" "Search" & "Cart Account" First "Cart" and the "Account" "Icon...." "Carticon.svg" sorry "accounticon.svg" And this occurs twice This is fine now Let's see how it looks,
And then we'll do the adjustments Cart & Account has over-lapped OK! No worries
I can fix this by adding "class=flex" And I've fixed this But a problem has occurred
This "Account" Icon is stretched a little bit Let's check what's the problem Width is 4...I'll do one thing
I'll add "h-4" along with "w-4" width-4 and height-4 What's the problem now? I also have to check this width-4 height-4
I'll also add width-4 height-4 to this one width-4 height-4 I've added width-4 height-4 to these 2 And this Icon & this Icon.... OK! There's no problem
They are in level It's not such a big deal "Microsoft" Now one more thing
The Microsoft is not in center And the reason for that is... "justify-center" and the padding
which we added, are not being fit correctly So now if I make it a flex And add "item-center" I've made it a flex
and I've added "item-center" And I also have to add "justify-center" I've to add "flex" & "justify-center"
I've to add these where? In MSlogo "flex" & "justify-center" Where the MSlogo is...
Let's only write "MSlogo" "Logo" "MSlogo" and here I've to add
"Flex" & "Justify-center" And many people
get confused in "align-item" And the reason for that is.... These two things are different in
"horizontal" & "vertical" flex And look we've cloned it quite well
except the fact... ...These 2 icons can be seen at the top And these icons can be
seen but only on bigger screens And whatever the reason for that is...
But if I fix it, then I'll add the margin at the top Where are these 2 icons?
Here they are I'll command it... As soon as
"md" break-point hits the padding from the top will 2 So they have shifted downward
But pt-2 was more than required so I'll add "pt-1" Now these two are in level,
And they are already working properly in phones So look how cool is our website looking
Except the fact.... I can see a problem in feature absolute And this is a flex-box on "md" But if I add...... I've added "justify content"
& "align-item-center" If I add "align-item-center"
so it'll be vertically centered too So what I'll do is....
This feature's flex-box I've added display flex in it..
Where have I added? Here, I'll do one more
This sidebar is appearing horizontally I'll toggle the word wrap So here is the "Features"
where is the flex-box Along with "md:flex"
I'll write "md:justify center" "justify-center" Or "Item-center"
I've to do it vertically And now if I reload it so this is how it looks And if I close this
so this is how our clone looking "Microsoft 365", "Office",
"Windows", "Surface","Xbox", "Support" And this is not in center
let me fix this Right click --> Inspect The promo.... "flex-col" "justify-...." Now you'll ask
why am I writing CSS? This is because, I know CSS very well And I will write corresponding
Tailwind class after that "Auto complete" of chrome is quite good So I'll quickly do one thing I'll add "justify-center" in promo That's why I added these dummy classes I can search any item with "promo"
that's why I added dummy classes There are somethings,
you do not learn from someone But you'll learn them while
practicing yourself So I've written "flex-row" now I'll add "justify-center"
"ctrl+z" because I mistakenly pressed "ctrl + D" Look now this is center When I increase its size
so this is how it looks And now if I shorten it
so this is how it looks Now obviously I'll creating this appearing
with the help of JavaScript But because this is a course of
Tailwind and not JavaScript That's why I'll avoid those things here Now if I close this and Look here & here So I can see some differences The biggest difference is I can identify is,
The spacing should be more here Because there is more
spacing on the main website We can fix this very easily I'll change
"space-x-2" with "space-x-6" And if that wouldn't be enough
So I'll increase it And I don't why, But I find my
website more cool than their's I don't why
Please do tell you thoughts about this But I find my website more cool
I don't know why So look, we've cloned
this website to quite extent I told you, I've haven't cloned that exactly
and I've also told you the reason for that Now I can write
"Search" before this "Search-Icon" If I write "Search" here
So this is how it'll appear Sorry I've to write before the icon I've written between "Cart Icon" I've write this here after "All Microsoft" So I'll write "Search"
here and I'll add a class here "mx-2" And I'll make the Search's "S" capital I'll make this capital.
So I can do this same like here And obviously if I do something like this
So I'll also add this "search.svg" in this container So there are many ways to do one thing "mr-4" is given here So maybe if I can change this to "mr-6"
So it'll seem like this search and this icon are together So we've cloned Microsoft's
website to quite extent Now one more thing, if this "Surface Laptop 4"
shift a little bit inside, so that'll be better If this "Surface Laptop 4" move
a little bit inside So if we add in the
same div where we added "mx-5" Let us say if we change this to "mx-6" So this will shift inside If I click here....
I want it a little bit more inside And if I change it to "mx-12" Or if I change this to "ml-12" I want margin of 12 on left side So right now this is not working And I'm checking the reason for that I've added "py-4" , "ml-12" And to check if something is working or not
I add an extreme just like I added here If I add "ml-48" here..... How will it be? Even then it will be a little too much inside
So I'll do one thing, if I try "ml-32" with trial-n-error So this is looking perfect at this point of time Now if you want to make this font small
so you can also do that And look, these are not even in level
But look at mine...... Can you see the difference Now I noticed one thing
This text is appearing on the bottom of the icons And I've added them in single line
so let's fix this So as soon as "md"
break-point will hit in this flex-box What will happen after that? I want this to be "flex-col" So this is how it'll look
"Explore Surface Devices" And if I set it's width Suppose if I make it "w-6" So "Explore surface devices" Let's increase it a little more So this is how it is appearing "Explore Surface Devices" Now if I shorten its font Suppose if I write "text-sm" here So this is how it looks and
"my-3" let us say ....4" So now this is how it looks "Explore Surface Devices" Maybe I need to
increase width a little because "w-12" is not enough "w-1...." "w-16" I've changed that to "w-16" I'll do the same thing for.... ...My font-mediums Here too And one more thing I've added here
is "md:flex-col" I'll copy this & add here Here....Here.....& here It is already present here or somewhere I've added this at wrong place "md:flex-col" I've copied this I've to add this here after "space-x-2" Oops! What have I done? Now if I show you,
so this is how it looks right now I probably need to increase it's width I shouldn't have kept it as 16
It's quite low We'll fix that with trial-n-error Now if I change it to "8rem" Now if I change its width to
"8rem" from "16" If I change this to "8rem"
So this is how it looks And I'll also add "text-center" After that this is how it looks.
I think out job is done Check-Mate! Can you see how
cool have I build this just like original So this is how you can create this
with the help of Tailwind as you wish Now one more thing
The widths I used here... I want that... This "text-center"
will work on "md" break-point Whatever the changes I do,
I want them on "md" break-point Now what else have I changed here? I just want to check this. I'll save it &
check if it is looking same in phones or not? I'll only add this width at "md" It was working properly for me So I want this to work on "md"
So look this is how it is functioning This is how it is looking I've shorten it, so it is look like this And now, it look like this Navbar is also working properly It is working quite well in phones too And nice job. I'll do one thing.
"py-1" which I added in cart Cart.....Cart....Cart.....
Here it is I've added "pt-1" on "md" So I want to add this on all break-points Even if you look in phones, so it need the "pt-1" So this is also done.... Now we've created a
quite good clone of Microsoft And obviously we haven't
made the slider here We haven't cloned it exactly And if you want to clone it
exactly so you're going to need... A psd or it's design If you have the design or you know the specific
margins so you can create exact clone But roughly I've cloned The Microsoft Now what I'll do is.... I'll add space on y-axis of
"Surface Laptop 4" Where is it?
Here it is So I can add "space-y-2" on y-axis Now if I increase it.....
Let us say "space-y-5" So look this is how it looks
and spacing have also been added here So look "Surface Laptop 4"
"Surface Laptop 4" And creating slider in
Tailwind is very easy too And the reason for that is...
Just simply make a box and add some dots Just run SetTimeOut of JavaScript And keep translate them
& play with there positioning Just keep translating them Like this....... So you can do this very easily
You just have to know JavaScript And obviously this will be done Now one more thing,
If you want underline on hover So what I'll do is... I'll do this firstly for one element Where is it? Where are the items of Navbar So what I'll do is.... So in this fitem I'll add
"hover: underline" Let's suppose I want to use
"hover: underline-offset-2" So this is done
and I'll add "hover: underline" "hover: underline-offset-2" So now if I add "hover:underline"..... Let us say.... I'll do something like this. I just want to
know what will happen if I change it to 8 How is it looking? Sp this is looking absolutely fine in 8 And obviously I've to add "cursor-pointer" I'll copy this And I'll replace this with "fitems" Let me show you how it looks now This is looking absolutely fine Yes I know there are still some difference But again Now if I go to its specific CSS So as you can see I can see everything,
Which thing have they used & how? Obviously they have used a complete
different method We are using Tailwind But we've almost cloned it
"Xbox", "Support", "All Microsoft", "Search" Now if you do cursor-pointer
so you also can see this type of items And you can also add
underline for other elements too To this was our Microsoft Clone in Tailwind
I'll now conclude this video here This video will be too long if
I start creating this from top-to-bottom And if you want this to match exactly Now let me show you one more thing If I.... Visit "favicon.ico" So I can also save this icon And I'll save this in "project-2" And after saving it,
when I'll reload it "ctrl + shift + r" As I reloaded it
So this Icon has also appeared in my website Can you see, The website is an exact clone? Which one is the original Microsoft
and which one is the clone It'll be a bit difficult for you to tell Yes I have to make its font
size a little short So I'll do all these things If I want to do them as well
So I can do that But again... if I change "p-4" with "py-4" So It'll shift here There are still many things
that can be done I'm not doing those thing right now But if I do this.... So I'll firstly reload it
And after that... This Microsoft logo.... If I search the Logo I'll change this "p-4" with "pr-4" So this has shifted here to quite extent If I've added "pr-4".....
I also have added "justify-center" So I'll change it to "justify-start" "pr-4" has done nothing to it.
I don't want to add padding here I'll leave it as it is
And I've justified it at the start So this has appeared here I just want to say that this how you
can create elements and clone website And if you want to make its size shorter
So you can also do that You can use "text-sm" like Utility Classes I hope you've enjoyed. We've cloned Microsoft
with HTML & without writing CSS In-fact we've created such a replica
that if you click its photo And you've to zoom it a little bit because
we haven't design the lower portion If you click it's photo & ask your friend
so they'll say... This is the official website of Microsoft And I want you all to complete this website Please tag me on Instagram
after completing this You must have to do something on your own And you won't understand
until you do it yourself So I want you do it yourself And complete this. Interact with JavaScript
MY "NEXT.JS" course in on, on YouTube If you have to learn "NEXT.JS"
So also learn this So that you can learn
Tailwind CSS more briefly I'm damn sure whenever you'll watch this video
At that time there will be a lot of video of "NEXT.JS" So there won't be any major issue So I hope you're enjoying this
course of Tailwind Please access this play-list of Tailwind CSS Because all the videos will be in this play-list That's it for today's video guys
Thank you so much guys for watching this video :)
And I'll see you next time
