Add Gawker Default with airSlate SignNow

Add gawker default

maybe a two of the main portions of the of the assignment right the website edit and the website list and feel free to reuse this for your own purposes to complete the assignment and or for your own project so so be that the next part is to create the page list now the page lists the page edit and the page new we are going to be very very similar to the website list website edit and the website nib alright so so I would hope that you would you would reuse the those three when you're done with a website right it should it should be very trivial very easy to just copy the folder right and recreate those three for the pages yes right so that should be okay so let's let's just just you just get started without paper if I go to page list as I said earlier I could grab website list right and just rename it to page list and that could be like the beginning of my page list development yes I'm not going to go into it the the website edit could be also a starting point for my page edit alright but notice that this quickly is going to get overwhelming the number of pages that you're handling okay and we have to come up with a an organization way to organize our files right to deal with complexity right not only are we have these HTML files soon we'll have accompanying JavaScript files for every single one of these pages right and and each one of these will have perhaps also services that connect to the database to go fetch data back and forth so this is going to get fairly complex pretty soon right so we can start organizing around this by creating dedicated folders to organize this right now if there's several ways to organize this one way is by feature and you create a folder for each type of feature that can be reused across the across different portions my recording yes another way to organize it is by and by the type of entity right in this case we we have at least three entities right for instance we have the user enter key like that and we have pages for those for the for the user entity the login page the register page in the profile page all deal with a user right with a with user entities yes whereas website edit website list and website knew they all deal with websites right and same thing with pages deal with pages yeah up so I'm going to organize around those types of entities so I'll create a directory for user I'll create another directory for pages page I don't like portal remind me that I don't like floral page and the other one is website a website okay right and so I'm going to grab each one of these all the website I'm going to drag them into the website now if I move them typically it would break hyperlinks that refer to these two these two these files but most IDs today are are smart enough to identify this problem and fix them for you right so this one is for search for references what it's going to do is that's going to look at the HTML files and see who else is referring to this HTML file right it's going to look for H reps that refer to need is going to update them when it's going to it should ask me maybe no I guess it didn't ask me let's see if I broke anything and the way I come here is from where i from the login page right the login page notice that the login page was fixed see that my login button used to refer to website list not refers to website website list see smart enough to do that no most modern I des will allow you to do this okay so same thing with pages let's move pages into pages into page say okay and I'll move the these user ones into user like that all right next week when we start adding controllers and services and I'll you know lots of JavaScript will have to revisit this right and create yet another layer of organization to have to be able to distinguish between HTML and the accompanying JavaScript right but we'll do that next week so for now this is good all right any questions alright so I'm going to leave that there let's move on to to to get another side part of the of the assignment all right all right let's see so page list is there is it oh no wait didn't move I think it moved like graduate let's see a Index login I logged in I'm in the list of in the list of websites I can edit a website I can say delete it I can say I can okay notice that it's navigating to page list but cageless is exactly like website list okay which is okay it's a good starting point right when the page was created with the Pedro's last access and things like that right all right good so from the pages though obviously if I click on the card that would take me to the edit the page right edit the page but if I click on the page it's supposed to take me where to the list of the widgets for this page right so let's do that let's go to a page page list page list and so on the list of pages pages right here right instead of going to page list it should go to a widget list yeah and would your list should live we're under a directory widget list widget right and widget list should live here and I'm going to copy one of these folks I don't really care which one saying sum up copy this one but we're going to we're going to replace most of the context we're only going to keep the header in the foot right and everything else was going to throw away so this is going to be widget list so there's the widget list um and so the page page list if I click on any one of the page it should navigate to hey let's see let's going to go up down to the widget and then down to widget list yeah right um just to make sure that I am in the right place I'm going to name this widget list let's see if I click on this indeed it navigates the widget list every day okay all right all right so we're not going to really need any of this let's let's see what uh what the assignment says the assignment says that the widget list should look something like this right a list of widgets by some of them header some of them images some of them a youtube video some of them just clean all HTML wait so let's uh let's uh let's see how we can reproduce this over here okay all right so in the widget list we are in the widget list we're not going we're only going to keep the header and the footer everything in between we're going to throw away so let's throw this away maybe we'll just keep container for it I'd say just continually okay it's gone all right so so widget list is empty so let's let's let's try to recreate what we have to the assignment a h1 maybe this is a blue this is an h2 or h3 and this is an image so let's that's a and I will give us a chance to introduce those those elements too right so since since these are since these are widgets by which it objects a widget components but it would be a good idea right to encapsulate them in a div right perhaps even with a class of widget right which we could then associate different of style transformations right for widgets in general right so we have near one two three four widgets the whole bunch of widgets so presumably we might have lots of easier classes maybe with the class widget this is a widget right and we might have several of these there'll be fridges now if you're going to create your own classes up to this point we haven't created any of our class well we did right when we use a we declare yellow blue red right those are classes that we create ourselves and we want to make sure that if we create anything we rename in such a way that it is unmistakable that it's ours right this class belongs to us right so so one way to do it is to prepend right in front of anything that you create with a an agreed upon a namespace right for instance an angular the typical namespace is ng right here for the for the web dev course maybe WD right could be to be an appropriate naming convention so let's let's say that we are always going to create these widgets with these these classes ourselves right now they don't have any any styling right associate to them but it allows us to give us give a um categorize write either behavior or look and feel for this type of component that we're trying to build all right all right so now we can put in to start putting in here perhaps content that is specific to this particular widget right in the and this one here would be maybe an h1 all right so maybe this would be an H one and it's a Gizmodo all right so let's see if we can render that we'll see what that looks like so there's Gizmodo right that's good oh let's keep going so then we have maybe a smaller header right so maybe this is a so this is an H maybe an h3 right and so since I don't have actual content let me actually go to this moto and we copy some content from there so let's uh grab some some some actual content let's grab this let's see the content there it is we cool and comfortable all summer very good and then then the assignment says that that we have perhaps a image where is the assignment so let's look at this image here so it's an embed an image perhaps from this motor let's see if we look at this and open this open image open copy image address let's see if that works if you paste it there indeed there is an image there right so we could use that URL as a as a hyperlink for that image and this is what I would prefer that you do that you have links to images from outside so you don't get into any copyright issues of owning this image or not if you're linking to it outside it's already public right you're just embedding it in your file and they're free to remove it anytime they want and I won't have it anymore right but if I actually download it to my server right and I make a copy of digital copy and then link to it locally then I might run into copyright issues right so let's keep it links to remote files outside so we don't have any of these issues okay all right so let's grab back and let's create an image widget here so it could create an image widget we have a source we can inject that image in there let's see how that renders there's our image okay now our current image is not responsive right it's a notice that our header is responsive to some to some degree right it is getting it is wrapping but our image is not all right so one way that we could that we could fix that is that it depends what you want to do right but one way is that let's inspect and see what's what you could do so let's bring that here let's just bring that this down here what we could do is extend it in extending Swift right and say that the width right is a hundred percent right if it's a hundred percent it's going to extend entire width of the page right and the height is grows proportionally right to maintain the aspect ratio all right so whatever you do to the to the width say 100 pixels right notice that it's the the height is also proportionately grows and shrinks with the to maintain that the aspect ratio so if you increase the the width notice that the height also increases proportionally yes so if you say unless you unless you override it you say yes I want the width to be a 100 or maybe 200 right but I don't want it I don't want the the the height to grow proportionately I can separately manipulate the height all by itself and say that I want it to be I want it to be a different pixel right and that's going to skew right and deform the picture from its original size it's whatever you prefer to do and I would suggest you maintain the aspect ratio right and expand it to 100% and decide what to do whether you want it if this is too big well what do I want to maybe show on the left-hand side as an article and then just visit expand to one on the right-hand side it's up I think that's what this moto does this moto adds this left-hand side right on a desktop right and so this is not so big right and as it's become smaller it's a it hides the left-hand side right so that the image again goes back to a manageable size right again a few 100% is fine 1% is fine all right so we have that obviously on a smaller screen notice that the image is responsive and it grows to - to fill the width of the of the device very good all right so let's keep going let's uh then in the assignment you then ask you to have some content that that follows the image so let's grab a some content from from this moto maybe this HTML here now it's like if I grab the HTML if I grab the HTML and copy and paste it here I'll grab it and paste it notice that what it paste it is just the raw the raw text right and that's not exactly what we intended to do you oops to break something can you broke something did I not close something image widget oh I never gave it the width I never gave it the width right so so what we could do is is to decide that all images inside of a widget are going to have a width of 100 right so we could we could decide that in our style shoes you can go in the style sheet and say right if an image if an image is inside of a wd webdev widget widget right and maybe we can be very specific and say that our images images there are immediate children of the class right saying like this is their immediate children's to be very specific right all the images inside of a widget we can we're going to make it with to be with with to be 100% let's go back there is right that's what we meant to do I notice that notice that the HTML is not really HTML right also what we could do is come back here and actually look at the HTML that was used to generate this right if we inspect it if we inspect it we'll see that it's this paragraph right here that contains hyperlinks and contains other things in there right we could grab this and say copy this copy this as the copy the elements copy the entire element and then paste it in here in the widget list and I copy one so we can replace this and paste that now notice that this is the actual HTML with hyperlinks and and and right breakpoints and everything right so so so this is more effective all right let's go back and refresh and now we actually have you actually have hyperlinks right as we have everything in there we could have grabbed more I guess where was it inspect and grab maybe two paragraphs so let's see what's this yeah on the paragraph you have the give give give and then discard graph you can just copy the whole thing copy or you can only copy I'm going to copy that and you click the museum there it is so let's see what it looks like now got two paragraphs with hyperlinks and everything everybody good all right all right so let's keep going oops no I don't wanna do that then in the AMIA assignment it asks us to add some more content the YouTube iframe all right so let's do that let's go let's go grab something from YouTube all right let's grab my next float and so let's I'm going to share it so there's a couple of ways to it's a couple of ways of sharing your your YouTube videos one of them is to copy the hyperlink and just send it over to someone right somebody can come back to YouTube video or to embed it embedding it grab the iframe and you can copy and paste it into your code right so let's say let's do that into our YouTube video here takes room here let's go back and see how that lenders it's render and now we have our video my nice folks here to notice that the size is 6 so I see that it's fixed it's not responsive and to make this responsive we cook to the width to be 100% right and just leave the height now you would expect that this would behave just like the image when unfortunately it does not behave just like the image if you could do that the the width is responsive right it changes the width right so it does adapt to the we overall width but the height is not like the height doesn't all right there's a there's a nice article that shows how to make this responsive I'll share it with you it's not trivial right and I'll put a I'll post a link in on Kappa how to make this so that it grows also vertically right all right so I think I think where we have we have enough enough content view that we can play around with this right but one of the things that we might want to be able to do that is to add the ad via the via the toolbar right on the top right corner all right so let's let's work on that all right so let's let's let's add this toolbar and so for each one of these you have a widget and each widget is going to have an instance of the toolbar right so for instance and we could implement it again with its own dip and again give it a class and so that we can control how its going to show or display inside of a widget right so this might be a toolbar so we'll call it widgets widget toolbar right and it's good idea that you get into the you know into the habit of providing your descriptive needs like two components right so that you can quickly go back and refer to them or form from from from CSS you know what what exactly be talking about Thanks so anyway so let's see what do we want to go in that toolbar we want to save basically to glyphicon right one is the cog blip it's on let's add a cog with a gun here so span class blue click on go if it's on cog no not that hog let's let's see what that renders or so that renders a cog there we also want the kind of like bar here I don't remember what that is let's go to bootstrap and see what that might be and maybe this one's justified is there another one that looks more like a sandwich no all right so I'll go with that one grab that copy and add a most fan underneath to the class for that very good let's see how that renders there it is that's done exactly where we want it um actually it's nowhere near where we want so so notice that it's rendering where notice that is h3 you have the div here you have the div and down below we have an h3 what's going on here it's a once - it's rendering below it right let's see what we could do here to make this render here at the top way okay so let's uh let's uh hover here and let's inspect it and see what we can do so here's a toolbar here's our h3 oh where do we put it oh I thought we were doing this one up here but if we're in the wrong place I did this toolbar this works it's one here I'm saying why is it rendering my back okay there it is ok good ok so one thing that we could do right one way we could do it is doing using floats well you can say maybe float right by a standard tool right but kind of starts messing up everything else right so let's not do that another way that we could do it is to override the position I say what is that I want you to do so busy but we want to do is is a remove it from the normal rendering what I mean what are we changing here the widget map of widget go not the widgets is a toolbar thank you the toolbar is the one we want to change the position I want to say I want to override your normal position mechanism normally divs or render a blog element and they say they push everything else down what we're going to do is that we're going to we're going to make this absolute notice what's happening here it's no longer being is that a part of the of the normal rendering algorithm notice that typically if you hover over it's a block element right it takes up the entire width when you when you apply the position:absolute if you hover over it notice that the width actually becomes the width of whatever's inside right okay but making it absolute allows me to position anywhere I want right for instance I can say that I want it to be stuck to the to the right-hand side you know zero pixels from the right-hand side okay or maybe a little more right to compensate for the gutter like that the gutter that that bootstrap adds alright so I thought it was 15 pixels yeah bootstrap uses 15 pixel gutters there so 15 pixels so that allows me to add that let's try and use this technique across all all of these toolbars right so so what we could do is grab this toolbar and just apply to all of these right apply to all these to the images to the text to the iframe and that's it right so right now it just doesn't do anything right it's just just just they just behave like normal normal dibs but we saw that if we add the if we add a positioning and we can we can change that behavior so so it's the claire this and in the style sheets and we'll say that again toolbars inside of a widget so a widget that contains a toolbar but it contains a toolbar so there would be WD w d and then toolbar what we want to do is you know that's not what we're going to do is position and then what was it absolutely right absolute absolute and then we change the the right-hand side we say that is going to be 0 pixels so it's not not 0 pixels 15 pixels right so if we do that looks like it working like we have it we have it for the is that working is it there it is there right yeah it is there but notice that the contract doesn't look right right so what we could do is change maybe its background or we can inspect it and and change the background of the of the toolbar you can set it maybe here I can say that the background is white right is white well can we do and we could make it its opacity so it gets a little bit see-through so you can see a little bit through the content so one is and completely opaque right but if you will go something below that maybe 0-9 it's a little it's a little transparent right so that you can see through maybe so you can see the contents of seep through right so let's go or maybe seven but to know that you can see a little bit through this let's see a little bit through the content right you can decide how much what else can we do is we could make me changed a little bit the padding so that the padding to adds a little more space left right above everywhere so patty maybe give it a 5/5 pixel padding maybe also we could make it a rounded corner right on the bottom left so we can change the border the border and we can change the border the radius right and maybe the radius maybe through is like a toothpick so let's try to pixels notice that is adding radius right that's longer think that's a little too much maybe let's go with a ten life I noticed that I don't want the radius all around I don't want the radius on the bottom the left right so you could say a border um I think bottom left there it is bottom left radius now you can you can you individually change between individually so we'll go with that it's our looks low that's pretty good that's pretty much what we would want for the assignment maybe it's a little bit too much transparency right so maybe a change the opacity a little let's movie eight okay maybe even less nine okay ah and so so yeah so so this this tool allows me to really play around with this and see what we can do let's see how it looks everywhere else so it looks looks nice let's copy this copy and go back to our style our styles for the widget and paste it under here yeah right and that if you refresh notice that we have our toolbar everybody good all right um play around this with your own content right you'll need to fix the the YouTube video so that it's responsive not only in horizontally but also vertically also notice that this is that there should be some space in between here that looks way too crunched up right perhaps some margin every widget should have some margins right right so so for instance each widget at all widgets dot WD widgets and you can add some margins at the bottom maybe you know maybe 10 pixels - to add some spacing be in between see that and so that looks much better every guy all right um all right so let's let's look at them being able to edit these things right eventually we're going to be able to grab this right and just move it around the page right and reposition it somewhere on the page right we'll do that a little later for now let's let's say that we want to be able to edit that particular widget if you click on this yeah and the assignment asks that there will be different editors for different types of widgets right if you click on the YouTube widget that you should navigate to the YouTube editor right if you click on the on the on the image editor widget that it should take you to that step that particular type of widget right so let's let's do a couple of these I'm not gonna do all them let's uh let's go with a behind here Wow actually me let me stop here and