 Okay, hi everyone. So we'll be starting the responsive web design workshop. I'm Arpan. I work with a part of a design collective called uncommon So today's workshop. We are going to be mostly focusing on different ways of writing different responsive patterns So we have a limited amount of time. So let's see how much how many different things we can cover today The focus is going to be mostly on the on the HTML and on the CSS The HTML I've already prepared for you at this link. If you download that, you'll have the file with all the files there So this way that we are not going to waste time sitting and writing or writing about mistakes and all that We'll only focus, like we'll take a look at the markup of how it is written and why it is written in that way And then we'll look at what would be the best way to what ways we can create a good layout That would work well in a mobile, in a tablet and on a PC So one of the things that I see is, well actually, before we start that Now how many of you are familiar, very comfortable with HTML and CSS? How many of you are not? Okay, so let's do this There is something, let's test them out Which one? Let's start with HTML No, let's do it with HTML Let's start with HTML Okay Yes Right, so you need to open the individual HTML file itself Don't worry about the links, the links are not all linked up Alright, so here's the thing We have one file getting started at our HTML So please open that Yes, yes, I understand that So the styles are not written for you Okay, this is the first exercise The HTML has been prepared for you Your job is to write the CSS Okay, this is the layout that you have to build You all said that you know front-end design, you know how to write CSS So build this So your first exercise is to start with this Write the CSS Now if you take a look at the HTML file You have this CSS file already linked So just open this, it's a blank file Don't worry about so much about the colors and the styling but the layout Now here's what I'm actually looking for Now this is an initial Like if you just look at it on the desktop, this is a layout But this is actually a responsive layout So you have these three So initially at least at the minimum Even if you're not used to responsive layouts At least just build the desktop layout Yes, so this is a layout You have 10 minutes to build this layout Okay, just pass it on to copy and copy It's just a small file, just copy and pass it on You need the files? So if anybody else hasn't gotten the file, that is the link tinyurl.com slash oq5tgk Alright, so download the file if you can't I'll share the, just use the pen drive Okay, who doesn't have the HTML file open? Are you done copying? Did it get the files? So that's the link you need to download Otherwise I have the file right here So if you look at the HTML here It's actually very, very plain You have a container, h1h2 We have a list of links And you have three paragraphs So we are just formatting that into this layout It doesn't have to be exact, doesn't have to be identical This is just for, get as close to it as possible If anybody needs the file, let me know So everybody has the files now Make sure that you have this HTML file open Getting started.html And then open the CSS file and start writing So we have this file open, getting started.html So open that in the browser Take a look at what we have So none of the slides are there So now I want this layout built I want you to build this layout So there is a file getting started out of CSS Just do that So the colors, it doesn't need to be identical So we are just getting started So I want you to start with this And then we will go to the next one Don't try to worry about pixel perfection Or about exact volume Just do an approximate version of this In the meantime, so quick question How many of you have written responsive layouts before? Even a basic responsive layout Okay, keep your hands up No, just keep your hands up Okay, how many of you have done it Without using something like Bootstrap It does it for you How many of you have actually written A responsive layout with your own CSS? Okay, that's a very good number All right Without Bootstrap, without foundation Like you can use SAS, Susie, whatever But not a readymade framework that does it for you Okay, so how many of you have not done responsive layouts At all or don't know how media queries work You have a basic idea But you have not actually used media queries Before manually Okay, sorry Okay, how many of you have finished the layout? Any of you? Using only plain CSS Please don't bring in Bootstrap Or anything else In your folder We are going to learn How to write responsive layouts In different design patterns Like this is a very basic layout But we are going to be doing more complex layouts Which we cannot really use in Bootstrap So, like Let's not use a tool that will restrict our Design Yeah Those of you who are comfortable with responsive layouts And know how to use media queries Add this And this Don't worry about the colors Don't worry about the backgrounds Just a rough version of the layout Yes That's good Yeah, so now When you make it smaller I want this to Yeah Yes, I want it to change to 2 That goes from 6 to 3 This goes from 3 to 2 And then this Yes Yes, sir I don't want to do that Yeah, so that's the reason for this I'll show you how to do it Yes Yeah, so here It has 6 beside each other When you make it smaller Move it to this So how many of you are able to get this done? Yeah, good Okay, so Instead of taking too much more time Let me just show you quickly how we could do this Alright Let's not worry about that one in H2 They are not really changing Let's just focus on The chapters Let's take an approximate What's the Let's go with block Okay, so this is What it initially looks like With the little CSS that I wrote Let's change And Martian Okay, this is Approximately rough idea of what We wanted to bring Just simply Yeah But we have some text floating So we want to clear the floor So Just go here So what we have done is We have removed the margins of the padding So it stretches all the way Now remember we are doing very roughly We are not trying to go with Exact numbers and all that Because you can do that later Just to see the pattern We have the list element which we are taking it Floating it to the left Giving it a bit of about 15% And so we are getting We are able to fit in 6 of them What we want to do now is We want to change it at Slightly smaller screen size So let's Set it Okay, so If you don't give work for hidden Then this element Unordered list UL When you have elements inside it That are floated The UL itself doesn't have a height Like it doesn't have a height at all So by Setting it to work for hidden The unordered list comes all the way here And pushes the content Other content below it It's just It's just basically Clearing quotes It's a clear fix That's how clear fix works It's the simplest way to do it You don't have to do all that before After and on the This is the simplest way to do it It depends on how But like I mean This is the simplest way to do it This will work in our process Work for hidden Yeah You might have an item that is Out of the box And work for hidden And if you have Yeah So the other way Gives you more flexibility But for the sake of this thing This is the simplest way to do it Okay Okay Yes What is the advantage of using float Leftover to display inline block So this is like It doesn't really matter You could use for display inline block And do the same thing Except that float allows you To give precise margins Display inline block Will display Use it as an inline element Which will always have a space after it So you won't be able to control The exact space in margin Five things I mean If you have more elements 25% each You will There's a tendency Of the float side to come down Because it's 25 plus the space Yeah Okay So here Okay So we have this part done Now what we need to do Is we want to change it at a certain bit So then we add a media query This is what it looks like Basic question What is a media query? Yeah I'll just show you I'll explain one second Okay Now in CSS When you're adding a CSS file To your HTML file You have a thing called a link Style Style sheet About that There you can even say Media screen Then you have another type of Media which is called Media print So that You can say that Instead of having colors Instead of having a background Of black I just want the background To be white And I want the text to be black Like you can customize it For print You can customize it For Like you also have Media You can have CSS Which is just for a screen Reader For example We have Different media Now Media queries Now But Apply this CSS Only when the maximum width Is 640 pixels That means If the screen is 640 pixels Or less It will make this yellow So If I Make this Narrow We will Yeah Sorry See this If you take a look It's white Make it narrower It's yellow So basically this CSS Anything written inside This media query Only will apply if this Width Meets this condition So you have Options of maximum width Or you have the reverse Which is minimum width So Starts from this And then when it crosses A certain width 700 pixels and greater Then do this So you can do that That's basically what media queries do If you go online I will give you links At the ending There are Lot of media queries Not all of them are supported But you have options Of max width Min width You can select Specifically You can do a layout Which is for portrait Versus landscape But It is most commonly used Max and width So you are basically Adjusting the layout Based on the width Of the screen The next one I'm saying You could see that Regardless of the length Regardless of the max width I want a tablet Or a phone in portrait To have one view And a tablet Or a phone in landscape Could have a different That's not A common use case But you can do it That's an option That is there for you Depending on your Design Okay So Anyone have a doubt About how Media queries work In this part Okay So here's the thing What we are going to do Here is this We set a certain width For this element For the nav li We are going to Change the width Over here We said that The list element Is 15% 15% wide So at 640 and below We are saying Now we interest this So with just this We set at this Screen size Change the max width So now Each list element Is 30% Of the screen Can you now do Now since you have seen this See how we can do the next one So I add Another media query Below this But make it 400 pixels Or 480 pixels And then have them in just 2 beside each other Instead of 3 Inside Okay So one thing Everyone needs to remember Is that We are talking about Style shapes CSS We have cascading Style shapes So one thing Overrides So this overrides The previous one Is specific For example Here you have Nav Li And here also We have Nav Li So both have the same Specificity With the media query Change it But If you don't do that Or if you If you do this Like you have Nav Li here Which is less specific But that is more specific That will Still overwrite this This won't work Because that is More specific Same if you have a class So remember When you are writing CSS Elements The styles Make sure that Your specificity You don't make it too specific Or if you do You will have to Use that at every stage So if you have like Navigation Nav UL Or header Then nav Then UL Then li Then you will have to Use the same thing In every place That you want to Overwrite it Or you have to Add additional classes To that Okay So try to keep it As less specific As possible Okay Okay So far this is Like the most basic Layout possible Sorry So this is just To introduce how to use Media Quills Are we done with this part? Any doubts? Okay So let's Take a look at the next Layout Which is actually the Layout that I want to talk Now this layout Is very simple Like it looks exactly Like what bootstrap Do you have columns And then merge And different things We are adding like Just two layouts You have like Three layouts So they adjust In between Things like that Now But this is a This is actually A very bad Design pattern Okay Now why is this A bad Design pattern I'll explain this Let's take a look At the next one But here we have Some paragraphs Over here An article And we have A block code So this is One column So you have One column In a normal layer If you merge that This one Would go below The article Correct Now if you are Reading on a mobile Or on a smaller screen Does it make sense For the full code To be here Or to be at the Very bottom It should be Beside Or it should be At the minimum If you have Less space It should come in here Or here Wherever Whichever Paragraph is a part of It should not go to The very bottom Right But that is One column Two column Three column You reduce it And then you reduce it And that's it But that's not That's not Optimal You have to think about What your content is doing Like The previous talk Was also about that Right Your content is important That is what's most important Your layout has to Facilite Make sure that Whichever screen Your user is using The content is Presented in the best Way possible Okay And that's one thing Second Now you have A phone Do you want to Read about the First or do you want to Read the article first The article is most important Now if you are Reading on the desktop You can just ignore that Correct You can ignore it And you can read the Article if you want to But on a mobile Like if you have to Scroll through Like two, three screens Before you can actually See the article That's going to be Irritating So what Ideal would be That this Goes to the bottom And this Merges in here And that's the Layout that we are Looking at What happens here Make it Scanner The author Info disappeared Going to the bottom Is right here Alright First Second We still have The Block code over here I want it to merge In Like this Okay So Thank you Thank you Alright So this Is the First exercise That we are Going to work on Alright So I am going to show you A very Now this Looks very Implicit Thank you for your Claps But the fact is That this is Extremely simple to do Alright And we don't Most of us Don't do it this way Because we use things Like bootstrap Or foundation And things that Handle it Automatically for us So we don't Think about the Design But we are Supposed to be Designers Like our Framework tells us To do it Right That's what We are here for If If you Just use Bootstrap And let everyone That make All the decisions For you Or for me Then why are We here Right Our job Is to make things Not just Look good But to work Well So this is The very First exercise Next Exercise is Going to be A slideshow Which is almost all CSS With just a little bit of JavaScript So in So we I think He'll be happy to see that But right So two elements Animated separately With about 6 to 10 lines of JavaScript Everything else Is done in CSS Now creating A slideshow That is responsive Has some complications Which Will cover When we come to that And Here's the final Navigation Over here Like this That when you Change it Facebook style Side menu Alright So this Is basically What we're going to Try to cover today In three hours If we can do it Please So we That's the reason That I've given you All the HTML The JavaScript Everything is given to you So that you can You don't have to Spend time doing that All our time Is going to be Focused on Just Writing the layouts Even the styles The colors You will see that All the colors Everything is set If you open The second file Article 2.article HTML Open that file You will see that All the styles The colors The fonts All of that Is done for you So you don't Have to spend time Trying to make it Look good So I don't Want you to waste Your time doing that Today we are Only going to Focus On Creating A good Layout Right Is about Look at the content Look at How What kind of a layout Makes sense And different screen sizes Okay And design it accordingly So you are not Just thinking about it In terms of columns But in terms of How the different Pieces of content Are connected to each other And in this case When we are doing this One of the things That you've probably Heard a lot about Is mobile first Starting with the mobile First And to do something Like this You need to start With the mobile first You It's not just with the mobile You start first With the HTML itself So make sure Where the structure is right Is the structure For this is right Then to change it From the small screen To the bigger screen Is actually Very, very simple Alright So we are going to See how to do that Let's just open it Open the file Or by the way This menu Sliding and slide out Is Without any JavaScript As it Literally no JavaScript Is there Not a single line Of JavaScript For this What you have just When you click on it There is no on-click handler Is just CSS with Target Which I will explain How that works Anyway Alright So this Is the This is what we are trying to do Let's take a look at the Let's open the file Open this file This is what you will see Okay So all the styles are set For you You have the initial links So we are starting With mobile first So this is the mobile Initial all the styles Are for the mobile layout Scroll down So you already have this part Done Right The merging part You don't have to worry about Merging part We are just going to figure out How to move it to the site Alright So this is the initial layout This is the mobile layout With essentially no styles Set up there We have this text We have the Slideshow Without any Slides Happening So when you say the merging part Is already figured out The As in It is already inside It is merged You are starting With mobile first So look at that So for this Let's look at the Code Let's look at the markup Now the navigation is pretty simple You have Next type lists Right Let's look at That's how you normally write A multi-level navigation Next This is where the important All the fun happens Basically You have the article Inside the article You have the header Okay Which is the title Then you have the section Which is the story over here In the story You have Paragraph Second Third paragraph And then the block code right there Like if you remove the CSS That's used to get that same layout Okay You can even take the Like if you want You could Just say okay Remove the CSS files Completely And refresh it And you have the Block code right there Without any styling Correct So the markup Has to be written properly For this to work So in the sensible manner So if a person Assuming Let's say if Someone who is differently able The person who is Who is applying Is Reading through your article Using a screen reader They are also going to Get the exact same order Which makes sense right They should also Like even for a person Who is using a screen reader They still want the Block code in the place Where the block code is Supposed to be It would make absolutely No sense for this To be read at the Very important Correct So that's What we are doing here So we have the markup Any doubts about Any part of this So let's start with the css So we start with Ok we have the page Let's just give some margins Or some padding to it Or actually there is Ok how many of you know What is box sizing Border box Anyone Few of you Many of you don't know Ok So normally in css When we are looking At the previous layout Let me just take Open that If you see here We set the width to 15% and gave a margin of 1 Or if you do anything With the padding as well If you add If you have this Width set to 15% And you add padding of 2% What will happen The width will change to 17% It will be 15% Plus 2 So it is adding to Whatever the width is Correct So if you add 1% On both sides Totally 2% Or whichever So whatever you are doing You are adding padding Margin, border Everything adds to What is already there Right It doesn't stay within like If you wanted Let's say 4 columns here And you set 4 columns To 25% each And then you set padding of 1% Instead of being 25% It will increase in size Again if you Even if you add Like you want a 1 pixel border That 1 pixel border Will break your layout Correct Like you have 25% width And then you have A 1 pixel border It will change your width So that 4 columns Don't fit in your place As they are supposed to Correct So border So border box is something That is a little newer Which basically says that Whatever the width is Set Paddings, borders Everything has to be Within that Okay So that means if I Set something to 25% And then have a 10 pixel border It will not break my layout It will stay within The 25% Okay So that's what We are going to do For this We are going to say That we want to use Yes open the Article or CSS Essentially we are saying I want everywhere Every element To use this Okay So every element That we are doing Instead of having to Set at its place Just star Every HTML element Box sizing Bottom box Next Let's go to page Okay Let's say Adding of What you want to do Percentage 1% or 2% We want Like If you have a very big screen Like we don't want it To go like So wide So let's set a max width Of What you want to Set it to Now we don't want it To be 100% We want it to be That right So Max width of Let's say 960 pixels And margin Now It will stay centered And it won't cross 960 pixels What do you say The margin 0 auto So if you want to Center an element Unless it's As long as it's Not floated Block element You want to Center it Let the Right margin So Next Okay So Now next part What we want to do We don't want We want to focus On the article right now Okay We have the image We have the slide show We have the navigation We are going to look at that later But we are not going to Look at that right now We don't want all of those In the way Like we are doing this So let's just hide them For now Temporarily So And This is Figure This is like All right So we are just Hiding the elements That we are not working on now So normally You don't want to use Discipline But for the sake of Just temporarily We just don't want those In the way We are just going to Look at the article So this is what We have Let's also hide the Links So this is what we have Okay Now First part We are going to see How Like on the mobile screen This is what is there Right On As you move slightly larger To a larger screen We want this To move to the right Got it Any doubts Okay so let's do that Okay That Once you cross 600 pixels Let's So here's One thing About media queries Don't necessarily Fix on Cert On specific screen size Don't say that This is for mobile This is for tablet And this is for desktop Because Think about it You have Small phones That are 3 and 3.5 Inscreens You have Large phones That are 5.5 Inscreens Now you don't Stop in screen If you look in terms Of the total area It's more than twice as big Right So there is no There's no real reason For you to give this Same Layout of the cell phone Every smartphone You can customize it My recommendation Would be Not to customize Based on the device But customize it Based on your content And the screen size So if Now this article If it looks Fine Like you have You have websites Where the articles Final full width Or is a single column Even on desktop You don't need to worry About like Okay it is on a desktop So I need to have There is no such route Look at your content Look at Your requirements And how it looks And adjust your Layout accordingly Alright So in this case We are taking 600 pixels Like if you Don't like 600 pixels If you think it needs to be 640 Or 480 Do that Alright So at this size Now we are going to Make some adjustments To the layout So let's say That We are going to do Story And P Do this Open your page Refresh it Look at your layout How it looks A little messed up That's fine Because we haven't yet Worked on that We wanted this To be 75% Right We got that Now all we want Is now This is kind of All the mood Because of the Point But we want To move it properly So this is What we will go Okay instead of 75 Let's change it Right Now refresh your page And see what happens You got it Did you do this Paragraph 70% in float left Block port 25% in float right Not able to see Let me Move it up Move it Are you Are you able to see This green Or do you want The lights The light is not Just like The angle is too sharp Okay So here We have Media query Story P With 70% in float left And for the Block port 25% With And float right Now if you Look at What happens Now refresh your page This is what We wanted Was it difficult Just simple Float left Float right Set the width Can you Adjust this placement Got it Okay So now So this Yeah Okay So right now This is related to this right So you can either set a margin for this Or if you want it to be below this Just a clear both Let's say if you want this Instead of being Beside this You want it to be after this Right Just a clear both Find out Find out If you want it to move to the very top Then you have to Change it a little bit In the way You do it But you can do it Yes Float left Yes Okay All of you How many of you Have gotten this Okay All right Okay So you understand How float Floats work Floats basically Let's Essentially Every element goes to the top left Assuming you are floating to the left So it goes to the very top The next element If there is a Based on the width If there is space If the next element is floated It will come to beside it Let me show Let me demonstrate It's better if I do it this way You have this paragraph Clear Then you have the second paragraph Beside Now when I say Clear Instead of being Beside it It will always go below it Even if there is Floating Floating Floating Even if there is space beside it Clear will move it below That's it So When I have this Edit is right now It is below this right So these two elements are active Beside each other Like it's at the right end If I don't have the clear It is beside it If you say clear Then it goes below it That's it Now about moving the other stuff We are going to look at other questions later About other different layouts But for now let's just focus on this layout Finish this layout because I don't know if I will have time to cover everything In the three hours Based on that we can have a discussion after this Alright Okay so this part Anyone have any doubts about this So far Yes it's fine Alright let's go to the next one Yeah Okay what's happening Ahh I just want to I want to So You said This part is near About that Am I telling you this Why is this so near Is So this space here So that space is near So this is the right layer Okay so everyone one thing to remember remember these lines make sure that you have this okay otherwise these elements will interfere during while we are doing this layout when we come to that element those elements will work on them for now I will make sure that we done okay first second make sure that you are keeping the same as much as possible keep the same numbers you can experiment with them later because if you do something different and then you say it is not working I cannot fix it okay. Now the third part was in this we wanted once you go so from 600 pixels across 800 pixels you want this to come to the side can you try to figure out use the same method same technique that we use for that use the same technique and see if you can do this try to move the story to the right and get the get the footer up here yeah that is it right it is not it is very simple if everybody has a question in the first part let me know in the meantime those of you have finished this please try to do the second part we can look at it after so basically okay what's up it should automatically move to this side with the margin so we look at it with remove the styling and do that okay next anyone else has a doubt so far in the first part not a footer get this to come here so right now yeah this is what we have done and the footer is all the way bottom I want this to come to the left who got it that's very good not understand how to do it use the same technique that we used before just the floats and the bits got it so make sure that you're adding another video please don't do this in the same media query because we also want this we want this layout for the tablet right then when you go to desktop then you want or you go to the largest then you want the footer to come so don't do the next part in the same media query so first thing is we have this media this very old year so 600 pixels add another one which is for let's say 900 pixels okay so we have one for 600 add one more for 900 and then do your code over here remember there are two elements that we are working on right ignore the paragraphs the block codes all of that is done now we are focusing on the story and the footer just those two elements so make sure that you are looking at that and not looking at the trying to float the story or the paragraph don't float the paragraphs now again work on the story and the footer so should I show you okay those of you did not get it should I show you how to do it now okay three more minutes okay your time is up now let's look at what we need to do this is this entire thing is a story okay so we float this to the right and give it a bit of seventy percent or whatever you want to and you have the footer you sort it to the left and give it a bit that's all let's go to the board yeah no okay so you got this we have the footer came up but the image is too big so what is solution for that just go here to the top and say image max with 100% so it will never go outside its container so if you are writing the exact same cases that there is a mistake there will be some bug in your thing like one small element see double check if you have if it's not working there is always going to be some tiny one dot somewhere one semicolon somewhere or a bracket that you're using the wrong bracket most of the mistakes are just that you just use a small so it is different like you do have like ones that do the stuff for you some of the actually like essentially in these kind of cases in my work I am mostly using sass in sass if you made this mistake it would blow up and say there is a like it's there's a problem in some sense I will show you how that works in sass you can nest like you can nest it inside another element so if you have story you would have this inside it here but instead of nesting an element inside the media query and it will render the correct I will show that as if we have time I will show you when you will link so you can take a look at any notes so far so this is what we have completed so let's just do a quick review so we have the article it has the block codes we have the past story with the block codes and we have the footer we started with a moment we started with this with the block code in here and the footer at the very bottom as the screen size increase increases we are moving the block code to the sidebar for this all we are doing is we are just using simple floats float left float right and well then next doing the same thing for the footer float left 20% 25% float right 70% and then match it for the image 100% so that it doesn't go outside its borders that's it so exercise one is complete now we are going to look at the next part any doubt so far yes set it to max with 100% here look at this image max with 100% so when you say maximum width of 100 can be less than that when it won't go beyond that okay okay so how many of you have used this max width like this how many of you understand this so what we are saying is that you are not saying that it should always be 962 pixels it should be 962 pixels or less so that means if it is on a mobile screen and it is only the screen is only 300 pixels or 400 pixels wide it will be 400 pixels wide but if it is greater than that if it's whether width is if the screen is like you are on a very large screen you don't want your paragraphs to be difficult to read they say it should never go beyond this okay so depending on your layout you might have 962 as a maximum you might have 1200 as a maximum it depends upon you like many of some apps that I work on we have like 1200 pixels wide or whatever it's your option but this section was everything and this center so this is this part is done now we are going to look at the image now this is again this should be very simple for you to do this part we have okay so the estimate the estimate tag is a figure there is a HTML5 tag figure this has an image inside it and it has a figure caption so basically it says that image as the captioner together is at a single element and I would this layout on a larger screen but on the smallest screen the layout is already done so can you do this so use the same method that we use for the paragraph and the block board on the small screen it is like this but below the other which is already if you look at it it's already there what you need to do is right now we have hidden figure right at the top here so remove this just go here say figure display and refresh your page page you will see a bug so make sure that you have this this is what it should be figure display block and clear both right now we are only looking at the figure so already everything is hidden right so only the figure we are displaying for now and looking at that okay so did you get that we have this we want to forget about the slideshow right now only this we already have this it just needs to change to this that's all the caption has to go to the right that's it. Okay so you have five minutes. Okay all right so I'll tell you what's happening now many of you have done a part of it right now we are taking a look at this here you have a figure in the figure you have the image right they're saying float no let's set the bit 70% float you're getting this or if you're even floating the second element you're getting this problem all of you got this now we had the exact same problem in the very first time when we were doing the links where the element was so you just need to add clear fix to this because two elements are floated the container element now doesn't have a height at all so if you insert the element with the figure the figure has a height of 0 pixels because both of it containing elements are hidden and both of them are floated so all you need to do is go here or to hidden to the figure element and you're done so this is what we have gotten okay so complete this sure that you have it all the way in the bottom and then I'll then we'll now we have gotten all the elements positioned in the right places next we look at actually creating the animation and having the slideshow so so okay so we don't have a lot of templates you got everyone gotten this far we have the we have set the width and the height and the position and all that is done we have it be the responsive part is done well the next part is to create the actual animation right so let's do that okay just look at this part can you see this can you see this here can you see class being changed current previous and that okay so that is what JavaScript is doing that's all okay it's telling us it's letting us giving us information that this is supposed to be current slide this is the previous this is the next and that allow we will use those classes current previous and no only current and previous right so we're going to use these two classes to do to create our slideshow all right so first now in a slideshow every element that is all the elements should not be displayed here right only the current element should be here so by default we don't want this box here so we are going to change the positioning here go here and instead of left zero we want the element to come from the right side right so instead of left zero let's set it to 101 percent what does that do now when you do it here we can actually say since I removed what we did you can see this can you see where it is now it's just like this is the container and it's just right outside it now what we will do next is we'll just say that take these two items okay so what we are saying by default put this outside like at 101 percent and the current slide make it zero so bring it to its to the position that you want it to be so refresh it here now see what happens the slides are changing that slide comes here correct now if you want to actually create the animation what you do here is this you go here and say what's it transition duration that's all you need to do to create the actual animation so you set it set it to 101 percent then set it to zero percent and every time the class changes the position changes but instead of happening just jumping it moves can you see that now okay so we got the first part so we are having this element coming here but then we want the current element not to go there but to go here right so then we add another class we already have the class in this we saw right previous there's a class called previous so let's just do that take this here refresh and see what happens what happened so I mean this is the first part so you still have a little bit with z index like you need to make sure that when it's going back there you don't want to be to be visible things like that we'll take a look at that but like this is what the core part of your animation is working here so we'll do that okay but now before we go to the z index part we still need one more thing now we want these two elements they are being animated together we want to animate like we want the text to come slower how do you do that just change the duration so go here to the port here you have constant duration one second right so copy that into the span and change it to 1.5 that's it so see css is actually now with all the new features that you have in css 2 css 3 there are so many features that we have that are that work right now in current browsers so you don't need to depend on javascript to create all the animations for impact this is just a very basic animation you can do much more complex stuff than this but the idea is that whatever you can do with css do it with css so see the javascript now it's very if you look at the code it's so easy if you actually go and I want to modify it or want to change how it works or if there is a bug you can actually very easily see what's happening and fix it because all your layout stuff is happening here so if you want to hide this stuff that is beside make sure you go here now the animation happens any doubt so far we haven't yet done it we need to do that yeah so we have a class in the center that we did for that what we can basically do is we let us see yeah just one second just double checking it's working we're still not going to do it so next step but this has the previous one is very nice to work in here no it's actually not previous the standard that it should be what standard that's what it is right the index one is an index 10 but that's not working so I have it working okay but I've done it differently yeah what I've done is for your current previous yeah the current I'm setting it to zero for the previous I'm setting it to minus one so when the ring slides exactly it goes behind the image and it's not visible but your current previous is always at zero are you setting it to the image or the alignment the image at this point yeah so that's what I was thinking the mistake so you still have a problem with the tension yeah so I haven't set it to 10 and one I've set it to zero and minus one okay okay so this is the final code so this is all basically the entire cs the entire layout or the entire slideshow open the nav.css we are going to do it here now here's one thing that till now we have been doing one layout for like we are building from the mobile layout and then slowly building up to the larger layout now in this case what we're going to do is we're going to have two completely different layouts one for mobile one for layout desktop because like there's very little similarity between the two so we so if you first do the mobile and then try to override you'll have to override so many different things so for the sake of this we'll just have everything in a media page all right you can always do the regular method and then override it but it'll mean a lot more cs's free so let's start with this layout is already done for you so you have the navigation which you have this already there right now we're going to start with let's do the mobile layout first so add a media page we'll give this mobile layout for upper tablets for the menu and you can change it you can do it differently this is a bit so 800 pixels and below we want to give it the sliding menu and above that we want to give it a regular menu so let's start both these so nav is going to be the navigation element here and you have the page so okay so let's see what's okay so initially we're only looking at the navigation okay so you have this at the you have it behind the content so when we actually add a background so it'll become it'll you won't be able to see later but the idea is okay so you're seeing position fixed so even when you scroll even when you scroll this this should not be affected it should still stay the same place wherever you are first second you want it to be from the top to the bottom you want it to stick right so you're just saying from top to bottom and stick to the left so this and you're giving it a bit of 200 pixels so it will always be within this area no matter what the size of its uh the screen itself is when you go bigger than that it's a that doesn't affect only 800 pixels and below now for the page what you can do is okay what is this we have added a link or we have added two links over here okay so we are using this we are doing this without any JavaScript we're just saying that we have two pair links in the same class one is show one is hide and the hnf is different so it just uses an anchor tag okay now look at this ID what is this ID so this when this matches this you can target it okay so when you pick on this the browser knows that this element has to be treated differently so it's a another new pseudo class in CSS 3 so make sure that this is correct all right now let's take a look at this uh i'll explain this is the ID menu right here you have an anchor tag with the same ID so when you click on this you can target this in CSS without the awesome it's not used like it's not supported well supported in all the functions you can use no so see normally when you know this old method is when you just scroll to it but i'm talking about applying css it does go to the hash of the page but the hash of the page is this i'll show you we'll see okay uh you know you know pseudo classes like hover and focus right so this is a new this is another pseudo class called target so what we'll do here is this target okay so when the menu is targeted the menu still stays in the same place is the page that moves so how do you tell the page to move whether then that is it so what you say is menu target plus page uh so essentially we're telling it that the page element that is after this has to be moved okay so here you have position absolute and uh let's say you set a position here is left zero here you say position left 20 200 pixels okay now go here did you see what happened the url over here changed when that url changes over there we can use this target to target that okay so you could just even do something like so when you're saying menu target right so whenever that url changes to when the hash is clicked you get the hash in the url then you are able to use that to target css so essentially you can have certain level of behavior essentially just with css over here so you click on something you hide and show stuff so how have you had in a how we have over and focus you have target so you can say okay so now one more thing is we have two links over there so when one link when it is hidden you want one link to be displayed one link to be so we just do that okay and okay so this is what we have right we have a link we have two links there one link has the uh hash exact hash which matches this hash menu right so when you click on that we are able to asset target some css for this and use that also to target some css for this and then you click on that we're just saying that okay hide the this link and toggle to the other so look at what we're doing here in css so by default you have two links for menu one is show one is hide so the show link is displayed and the hide link is hidden so when you click on that it shows the menu when you show the menu we are reversing it and saying that show this link hide the other link so there are two links in your in your marker here right you have two links here one and two so this one is used to hide show this is used to hide so with pure css just with a couple extra elements and using the target method we are able to hide and show basically do the menu now the next part is do the animation add it you know how to do it right just add a css transition yes okay so how many of you know what this is plus okay so basically plus is that if you have this element here plus says that okay this is the next element after it so if you have a page element that is immediately after menu it will work so you can do it in such a way for example let's say you have you have a paragraph and you have some spacing above a paragraph but just below a header you don't want spacing so you can say h paragraph top margin margin top 20 pixels or 2ms and h2 plus paragraph margin top 0 so that any paragraph that is immediately after a margin won't have top part so you can have a header and then a paragraph right out so you have spacing between paragraphs but not between a header and a paragraph so or you can yeah yeah yes uh so you have this why do you don't have this uh why is this required yeah because we have fixed it position fixed not position absolute position fixed is always in relation to the viewport okay so if the code is same but it's not working that means there is a you have not typed it again okay so look at the HTML here uh the navigation here and then you have the page right after it so what we're saying is plus says that any page element it is immediately after this so if you had uh you could say the same thing for header plus section would target only this section but not any other sections so the first one it is immediately the right after it so yeah no the plus is separate what we are thinking on it the target is changing so we are saying when you click on this then you are getting the hash menu right it's look at the url yeah it matches this in the url because the url so go to the top look at that hash menu so this id is menu the url also has hash menu over there so that it is showing that you have clicked on this tab this anchor so that this anchor this element is a target so you are saying that menu is the target so whenever menu is the target then the page has to be moved by default it should not be moved only when the menu is the target then you want to move the page you don't want to move the menu yeah okay any doubts so far okay so about stuff like this i'll discuss this at the very end there are many many different css selectors that you can place in addition to this so yeah some are not everything that we are coming to be supported you might have to use the hash menu yes overlapped If you add the transition to the one in the class in the target, add it to the main page itself. Okay, alright, has everyone gotten up to here, anybody who hasn't gotten this, I will talk about the transition next, I will show you where you might have a problem, but up to here, how many of, any questions up to this stage, anyone, no, alright, okay, so let's take a look at the transition, now when you are adding the transition, don't add it to this element here, you need to add it to this element here, okay, so let's do that, we want to add it to both the page and the menu link, right, so okay, so now do that, why is it bothy, right, yes, no the nav is not supposed to animate, only the page and the menu link are supposed to animate, but why is it bothy, now when you are adding the transition, always remember that the position has to be set properly, okay, so now see this, the body is, the transition is happening there, right, but there is still one more problem, the body is supposed to move, it is not supposed to resize, it is resizing, right, why is it resizing, because we haven't set it a set of it, we are just saying my move left 200 pixels, we are not set that it should go beyond, so set the width of the page, okay, now see this, is it working properly, but the link is not, the body is animating, but the link is not, who can tell me why this happened, but we have applied it to the menu, right, here is the reason, we are not moving the link, we are removing one link and showing another, right, it is not the same link, got it, so what we need to do is instead of showing and hiding it, we change the zindex so that one comes above the other, so then both of them will move, one will go behind the other and you won't notice that, both links look identical, right, so instead of using display null, use zindex, so say that here instead of display null, zindex is minus 1 and here zindex is 1, let's see if that works, now it's working, because till now the problem was that one menu was being hidden, the next one was being displayed, there was no transition in between because the position wasn't changing, 2 different elements were in use, now we are having both the elements displayed at all times, we are just moving one behind the other, so both of them are moving together, you don't know when one comes out of the other, it doesn't matter, that's it, so just take a look at this and I think we have finished with our main all the exercises that we had decided, so we still have some time to cover a few more extra things, so let's just finish this, any doubts if we have let me know and maybe I will see if I can cover a few extra things.