Live-Code a Netflix card clone with HTML and CSS | frontend web development

Key Takeaways

hello once again from me leanne and him michael and him now pompini yep and we're off i don't know why he refuses to sit with us when we live stream he sits with us very happily the rest of the time but when we live stream he's like now screw this i'm out he loves the chairs but there you go that's cats for you yeah exciting news we are streaming in not one not two but three places today michael really i'm sure this is news to you as well yeah i do remember that yes we are uh youtube actually four youtube the scrimba screw dashboard dashboard yes wow okay swear i've shown it when you were here let's get it up again anyway actually it will be interesting to see no i don't want the stripe dashboard screen right here we are oh wow okay here we are okay okay click this and then i would see myself but if i did that you'd probably hear me twice yet again okay so that's two is it i thought it's three well youtube this linkedin oh okay and as of today twitch oh really uh okay wow cool nice it is cool so although things just have always twitch i don't know something the kids are using i was told that um it would be good if we streamed to twitch so that's what i'm doing and i'm trying to find the link probably not that one and how do people actually discover these twitch links i don't know anything about hashtag channel that's what we want oh look i'm gonna here we are oh right nice duplicating myself on purpose for once probably would be good if i muted that um yes so all of you look at that recursion all the way okay i'm gonna close that um all of you who wanted to watch us on twitch you can do that now yeah oh someone shared the link i don't know who mysterious ass it's not the scrumber account twitch scrambler account looks like it ah dan says you follow the twitch account receive notifications whenever the person goes live cool oh wow cool thank you that sounds good so um zeons says streaming on twitch is a good idea can someone drop a link like twitch for old people so i can read it i think what's good about it is um well people were saying you can use the chat even when you're on full screen i think yeah okay oh dave collinson had us on youtube and scrimba double worry really echoing i hope that's because you had us on twice and not because i am generally echoing that could happen fair enough uh yeah yeah nice well cool uh i guess i'll just watch our other stream on twitch so i can just learn it i don't know if you can watch it afterwards or not on twitch no i mean whenever you're going to be interviewing someone ah so i can just have a look from the twitch site yes sounds good cool hello to all of you who have joined us today and hello to everyone watching in the future be that tonight or in 300 years long after we're dead right here i hope our legacy lives on that long although i very much doubt it in a bad yeah no it might be we've got lots of people here um i would love to say all your names but that will take a while i will say the first person to log in other than me i came at four o'clock to say hello the second person was three rohan nagmotti who said we are waiting not sure if that's a nag or anticipation tom chan says you will live on through your youtube yeah although when css dies i guess my youtube will be kind of useless although i don't know it'll be historical won't it so on with the show what do you think of this week's challenge michael have you seen it so yes that was an accident but hello here it is yeah no that's not it this is it it was an idea from last week's stream actually nikhil tanwa said good that you're doing this can you make some serious clones and once we'd established that this person didn't mean a clone army but a clone of websites i thought they might be onto something so i thought cloning a um netflix card for your favorite movie yeah yeah very good good at it yeah i've seen it uh in live stream so yeah quite quite looking forward to that and obviously you know snatches our favorite film so yes which brings me neatly to my next point snatch is our favorite film um as michael says here it is little overlay there and the reason it's our favorite film is that it's the first film we ever watched together isn't it yeah yeah and we're kind of like well we're training to be english language teachers yep and this film has an amazing array of accents so it's it's just fantastic yeah that's true it's got uh irish traveller it's got eastern gangsters well kind of most of them it's got an american in there yeah got it all yes and um we liked this film so much and this character here his name is bullet tooth tony he used to be a chelsea football player yeah the actor in real life used to be a footballer um and in the film there is a scene where he is smashing someone's head in a car door to the tune of madonna's lucky star oh yeah that's right and here's a gif of him doing that and it's extremely amusing to hear madonna's lucky star in the background as he does this and that then became our favorite song so we even oh you dug out that picture at our wedding yeah exactly that was a winning big wedding song a bit morbid if you think about it from the point of view of the film but it's a good song yes indeed so that is why snatch is our favorite uh phil and 50 people are watching yes and then uh ruffalo says great do you want to buy a dog yes that's the line from a film there's also a dog in the film yeah i forgot about that that's a good dog yeah afrohula says i'm so sweet in a way yeah yes um oh some insight into twitch a lot of people stream games on twitch says the seasons one feature i like is that you can watch streams after they've been finished okay well that answers that then cool fair enough sir hans says no that's a sense of humor we try yes right let's get on with it so michael yeah oh wow from absolute scratch from absolute scratch yes well that's what everyone else had to do so it seems only fair and um there is a stretch goal as well we can add functionality to this which is the part that um gives more info right cool fair enough but first things first i reckon um yeah and we've got what 50 minutes left oh that's i have no idea how long this card can take can you move in a bit you're not in the frame oops i guess too much for revolving yeah okay right well let's get on with it then do the camera instead of me moving let's move the camera don't work hard work smart live we're a class off i'm gonna go card container that's that now looking at this i see two main sections the kind of hero i guess you'd call it hero of this card at least and the um info i think you can probably show it on that screen so uh people can see what you're pointing to can i not say that i don't think so no they can't yeah or do you have i do picture somewhere no it's already in my bin because i thought i would be able to do that but never mind here we go i'll drag it out oh crikey no don't drag 141 items out of your bin that would be catastrophic do you remember that on windows if you press the wrong button it would open like every file somehow and then you'd just have to wait 10 minutes for them to like no you're too young for that okay i remember it and it was awful so anyway yes we have the hero and the info yeah so that's what i'm gonna do another div i reckon uh with a class off keep things simple hero and then another div with a class off hero no not hero movie info sounds good yeah actually now i'm thinking about it i don't think this really needs to be a div i think that can just be an image okay i'm gonna do that instead and if it transpires that a div would have been better i'll add it back in hero image um yeah which i conveniently found earlier so i'll now drag that in and i thought that was the whole card there yeah that's the whole card um which i conveniently found earlier so i'll drag that in [Laughter] here we go and okay fine i'll rename it here snatch hear it go jpeg let's see what that's doing okay it's in that's good roughly says um i wish i was that young um i'm not sure how i would say that dizzy says anyone else find the video really blurry hmm interesting i might have set it up wrong i will check general no it says i'm in high definition maybe you need to wipe your screen let me know yes um no how many times do you watch snatch in a year um not lately we haven't watched it lately i think we should watch it yeah yeah but there were a couple of years i think a couple of times see you definitely yeah yeah i'm gonna put a size on this image because it's huge so size on uh i see yeah snatch hero because otherwise i cannot see anything else i'm doing so we'll do it with 100 well that didn't work is there a class on that nope i guess that's why let's try again class equals keep things short and sweet and then i can delete this there we go and that is something at least like what i want and if i want to change something else later can do make the width 400 and height auto 400 watt um pixels intriguing let me know in asa says it looks like that it's not clear on my youtube but twitch is fine oh if anyone else is watching on youtube and it is fine let me know or if it's not 60 people watching that okay let's move on so now i'm going to concentrate on these putting these things into the html so i can see that there are three kind of lines i guess and i'm going to put them into a div each because i'm planning yeah so like the first one is like the the buttons second one is the rating and the duration and the third one is like tags pretty much cool yeah plus um let's call it array buttons i guess they are buttons button container and then another div which i'm gonna call movie info does that seem like a reasonable name yeah sounds good and then another div oh i think you already have three all right get rid of that one then yeah and the final one yeah tags could call it description but there we go okay ah doug moore yes he had to change the quality though yeah that makes sense you can change what quality you're watching on on youtube okay ah so the photo doesn't enlarge past its original size how do you know it's the original size even i don't know its original size i'm not sure i understand the question then the person who said that we should have this at 400 and height auto ah i see so it wouldn't read the comment before it low okay youtube sets it to a lower resolution oh no now you have to go to your settings and change it that's something else yeah i'm not sure which one of those oh maybe it was the previous comment on twitch but we're seeing all the aggregated comments so when you say previous it might not be previous to us i think it's this one you should maybe set max width on the image to 100 oh i see right yeah sounds good yeah cool never really know when to use max width and when to use width but i mean i kind of do sometimes but anyway let's move on uh yes button container so now we want to add in these um four five buttons and i included the icons already in here so that shouldn't be too much of a pain yep now how to do it i think i'm going to put them in as shoes i mean they're buttons aren't they so i think they should be buttons oh i see right i'm getting into a argument with myself about html which is never a fun place to be in life yeah but you can always just insert an image or an svg inside of a button right yeah i mean the svgs are here i wouldn't want to put the svg directly into the html because that just makes the html look like an absolute mess as we saw last week in the cat challenge make sense yeah okay all right source down dot svg oh no first off i need to go into the icons folder okay well it's loaded so that's good yeah you can also close this yeah in the chat let me know which of the four options um of viewing you are using where are you watching us from youtube linkedin screamer dashboard or twitch i am intrigued oh i am see who's watching where uh plus are these in the right order no i need yeah i think you need play first yes help me out here play and then plus class thumb up thumb down um thumbs up thumbs up yeah and thumbs down look at that it's already down in there and then just down i think okay they are in cool they've got the default button styles on them but interestingly we're not getting the cursor pointer which i thought was part of the default button but maybe it actually isn't interesting ooh youtube youtube youtube linkedin youtube ah i am on youtube so i thought this was the most chat would be happening yeah that's a good point yt youtube it seems like mostly youtube oh some twitch yes okay what does this say dave collinson the component would be a card with buttons as components rendered by the card component i think this is referring to something else okay if you would make it in react says hello world would you think the buttons are components or the component would be the whole card what are your views michael um [Music] and probably so far i would just make a card as a component uh because button right now as the button i mean i can see where you come from but right now the way the button looks it's like i probably wouldn't make it a separate component because there isn't enough to just distinguish it because it would just be react layer straight over a plain button with an image so it makes it a very complex button basically yeah right now it's not it doesn't really do much and stuff but if you start adding like handlers and um there is a lot of stuff going on with the button clicks and things then yeah probably it would become a separate component interesting question thank you and thank you to dave for the answer and you so that's those now we're going to put in the info i'm going to call this movie info so we have a rating which i reckon they're all going to be paragraph classes yeah probably yes if i know what i'm talking about plus equals rating 94 match yep and then i'm just going to copy this what's the next thing uh the next thing is uh certification i think that's called oh really i thought it was like pg rating or something yeah that's a bit confusing actually i'm going to call this match rating ross and tomatoes or imdb caffiers and thanks it probably is certification 18. okay and then the next thing is length well at least there's no discussion on that one i mean really is that film like the target there's violence there's guns i don't know well the first time i watched it i was definitely under 18. um but one hour 42 minutes okay so that's those and now finally on to the last bit this interesting question should this be a list do you think in the in the chat or should it be just paragraphs does it matter really because it kind of looks like a list doesn't it yeah i think so let's do a list anyway because it's distinctly the same category isn't it just for a bit of variety so then this is unordered list yeah rule yeah and then three leaves okay and then we do witty i have never typed that word before oh okay i probably never will again but here we are i've never been punished what it means i think it means like kind of um off-the-cuff type of thing no no no fine irrelevant showing a lack of respect for people or things that are generally taken seriously that's kind of like you know i mean to be fair that's a very good description for that film yeah yes yeah wow absolutely uh what was the last one dark comedy so that i think is the html we need i am wondering how we're going to make these dots actually i have an idea for how we're going to do that fair enough let's move on i think with the dots you're not going to tell me what we can do possibly yeah because they've got dots built into the list and i think we can just remove the first one and then that would do what we want yeah however first we have to get everything um spelling is still wrong what surely not is it maybe capitalization oh irreverent it's not just the spelling that's wrong it's my understanding of the whole word so rare all right that's gonna have to do otherwise i'll change it to something else if that's not right cool yes like even here uh people are still point charges making mistakes oh you're nice really matters michael yeah command plus eight is the dot what's this ah maybe that would work let's give it a go then i get this don't really want that anyway let's come back to that we must move on display and i'm rock and roll the next line yeah so how would you go about um styling this michael uh probably make the bottom part now well yes because we've already done the top part well yeah i mean like the dark the dark backdrop that the background didn't you reckon yeah and then just in line all those elements that need to be live okay let's do that what i like to do which i found makes my life easier when i'm doing um css is i take a screenshot of the html usually after i've tied it up so i can then have it open on my other screen and then i can see what kind of classes i've given to things and so on so there's a tip oh i see it right okay i suppose like envious code you can just split the screen uh anyway so you don't have to take a screenshot yeah that's true we're not in vs code we're in scrambler but we'll consider that for future updates so i think we should yeah splitting the screen will be neat i'm gonna do uh frodo if you're if you're card watching background crack probably just a little bit off isn't it what's up well it's not like 100 black no that's true because it's like well they recommend when you have black and white colors they're never 100 white i think it's like was it hex for black i can't remember now zero zero zero yeah and i think they're basically saying that you should make it like zero zero zero one or something slightly blue uh no it's like all six zeros well three five zeros in the one big difference or maybe ten i'll cut my mother i know what you mean i hear what you're saying yeah really what i'm going to do is go html color picker and pick zero zero zero i don't really want a slightly red one so i will go to color groups i will go to black shades over there on there yes yeah and i will take this one out oh there we go perfect yes much nicer you're totally right oh there's another one suggested two two two really let's give two two two ago because that's easier to remember i think that's quite nice okay so that's that so now moving on to the positioning of things so we've got this i'm going to use grid michael wow okay yeah i know how do you feel about grid i know nothing about it i mean i understand it conceptually um compared to flexbox because i do not understand flexbox at all no i have no idea what you either mean interesting so brazen container um movie info and tags all need grid put that in display grid now oh i see what you're trying to do right so you're basically having a grid by it's gonna be [Music] so the first row is going to have how many columns five but it's not is that not how it works i think that's how it works okay so we're gonna have three rows first rows five columns the second one three columns and the other one three columns i think it's easier if they all have five columns and then we spread these for example across two ah okay yeah let's give that a go um grid can play columns repeat and then five because i want five columns yeah one fr yikes but i think you need to also not specify a rose oh okay yeah you're right green grid template rows repeat three do i actually want that probably not i don't want fractions because that one's pretty big these are smaller so i guess i'm going to set them manually let's let's try 1m no 2m 1m 1m i think the problem is there's no height on the card that was not the problem oh no what is wrong oh no that's an interesting point one seven one seven one seven is netflix lovely i actually looked it up now why is this not working in the way that i expect what i will do to try to debug this is go down here and uh oh no no do you not want um so that's what i want isn't it that is now working well so when you say display grid you're basically declaring a separate grid for every single class i think you want a grid to be displayed on a container oh yeah i think you're right now yeah that seems to work but it's only working for the top row though uh does it well yeah because these are still all right so if you comment out these two declarations great template and great rose right thirty is not doing anything um yeah but the first four buttons in their own div interesting i probably will first yeah but i think you need to we are trying to solve right now is to have the rose i am going to continue in the way that i tried earlier because that worked and if we have time to refactor all the better and if we don't well at least we haven't totally tanked okay not to panic code or anything so how i did it earlier was like this i'll show you quickly and i had three there yeah and then tags had how many tags are there three oh three one f up that's not what happened earlier though how annoying i reckon it's a problem in the html i reckon there's like a missing closed one or something so that closes that that closes that and that closes that div class movie info oh yeah oh uh can you go back to your css you have in your css file you have uh display you're still displaying great button configuration and moving for instead of the card oh no actually you don't want on the card do you i don't know why i'm puffing like this i could just look at the one i made earlier let's do that so description so with your indir what's your index html looking like it's looking like this do you have movie info yeah no i think it should be on movie info then if we're gonna do it your way display is moving in for underscore or yes yeah and then and now okay no isn't that so you have the columns yes one two three it looks like five yeah but there's only three dibs yeah so it's basically spacing it out [Laughter] why am i listening to you this went well when i did it on my own i want this leave me alone i don't know why you were listening to me [Laughter] okay [Laughter] she doesn't need a grip but she wants to use a grip oh god i love this oh yeah totally all right let's try something else back to the old habits [Laughter] displays that reminds me of my driving lessons so we're having a panic actually yeah you're still in the okay depress the clutch if you want to go the engine anyway okay i'm gonna should i start again i mean look we've got the thing so it's a little bit annoying that we can't see there's so fun okay you invited him to do this with you and you're asking what are you listening to okay no honestly i think this is totally fine look at it calmly needs nothing at the moment yeah button container that needs display flex definitely yeah um info also needs display flex which it's got tags needs display flex which it's got yeah so everything's in place here so you need now what um something no no that thing that switches it around flex direction all right well that's funny okay column why is it affecting all of them what do you mean well you're selecting all of them that's why is it no yeah so display flex needs to be on moving info i think yeah and uh yeah but it also needs to be on here i think on these you see that's when i would just take a pen and a pencil and start drawing it yeah and then these need right yeah no i don't understand why this isn't working can you can you show the html because i can't see it behind my friend yeah so can we watch the chat [Music] flex direction column to movie info just movie info okay you need to probably remove yeah i don't think i want that though come on let's just do it no no look this one is working out okay now this one ah so you need to oh yeah yeah because now you have a rogue so yeah honestly certification now you need to take movie ah that's why because there are two ah they're both named the same this movie info is named the same as the container moving oh god that's why it's not working ah so let's call it i don't know card content okay it's fine i told you it's a problem with the html so now this goes back in here so that's what we wanted yeah cool oh there you go wow yes you selected movie info twice in the display flex lol indeed yes indeed okay um no here so now this movie if you don't need the 23 25 you probably don't need that yeah and now all of that is also there movie info you don't need that line 16. yeah oh yeah cool so that's flex row uh so basically these two can merge together because they're the same oh yeah yeah okay cool so yeah awesome okay so i think that's what we wanted in the first place i think so you don't need flex direction row either no because that's the default correct it was only on there due to my awesome flapping trying to figure out what's going on cool okay awesome so the bug was that html had basically the same class applied to like a child of a container and that was kind of messing all up yes and then garrett says can't you already use great template columns if you have display grid i mean i'm not gonna lie but now you can go back to the grid and it's gonna work it would but i'm not gonna do that because uh yes yeah so now i think we want in here gonna have to get out the old uh flexbox cheat sheet and then space around now i never know if it's justified content or the other one but let's try this one space around actually i think i want space between yeah and now yeah looking good so now in the styling these rows individually yep i reckon so and we're really up against it now but never mind um so i mean to be fair this is a very realistic scenario sometimes you just bang your head on a problem for like half a day to then discover that you just made the silly typo and you just never seen it really yeah it happens to me pretty much pretty regularly obviously everyone knows girls that makes me feel a bit better um i do want a boiler i want a border actually of one pixel solid white background and now not gray right color is gonna be white oh yes i forgot about this fun and games because they are svgs we can't just change the color in an easy way well you can change it in the svg but there's five of them so you could do in here oh i see you have to style them somehow fill equals white and that's you see changed this one but it's a bit of a faff doing that for all of them and then if you want to change it you've got to go in and change the ball again blah blah blah i have found another way of doing it which is filter invert whoops one whoa but now that's inverted all of them so this should be black which will then get inverted to white right and then we want uh border radius 50 and i reckon we want some padding 1m okay they're looking like buttons i mean that one's slightly in the wrong position and this one's got a circle already around the icon which we don't really want but never mind just change the fill with css lol but how what oh no i don't i tried that if you do this i think you'd need to do like barton svg what about like yeah like children um would it be i know i don't think you would be able to do it with this i think it's button image svg plus because oh yeah you have it inside of an image no dice how do you do it let me know phil css no oh that i think dave basically tells you like how to google it yes i will come back to that one but for now i'm going to continue with this otherwise i will have very little to show for an hour of hysteria yes okay let's move on to movie info which is going to the html we have now established this um yeah so actually they're more specific than that i'm going to do the match rating now color i found out earlier this is it i don't know if this is really interesting but there are two colors one called lime and one called lime green onion michael thinks all greens are the same thing yeah they're very similar well i think lime green is a bit more accurate so i'm going to go for that one um can't wait bold actually i'm going to change the font while i'm here on the body i don't know what the font is if anyone knows let me know but for now i'm going to say family is ariel yes just at the phil rule uh phil white rule it i don't works so you just literally type fill so what chest nothing interesting it looks like it's helvetica so oh okay i will change this oh you already heard hillary clinton the correction but i only want that yes i need to get rid of that okay it's not just me typing it wrong it could well be you know okay let's move on 18. um what did we call that in the html 18 certification uh yep here color red and what does it look like it's actually white yeah it's like a white number with inside of a circle background color red it should be and then a bit of padding i'm going to do 0.5 ends and the old border radius 50 oh wow um and then border one pixel solid white wow whoops uh that's that should be a semicolon yeah right yeah okay bro so i think that's it's kind of so basically now you just need to hide the first bullet on the tags well and this is all a bit skew-if and yeah don't need that moment i'm going to delete it and also our card container doesn't have a max width so it's just an answer to the person who asked if it was responsive no well in a sense yes but it's not quite what we want so we're going to do with what's that min max thing no don't think you could do that on a normal width remax you have to do it like min width blah blah blah ah basically the break points yeah but actually i don't think i'm gonna do that i think i'm just gonna do like 600 pixels i think yeah it would take us a little bit of time to actually just break it up for different screens and stuff well the thing is with a card it wouldn't ever be a full screen would it uh that's a good point yeah so in that case probably 400 yeah yeah i'd be a bit squidged but never mind i think that'll do um okay that's the wrong one no it's not no that's all right card container yeah it is it is the right one it's just in a slightly confusing order in my css that's better i like to write my css so that it matches um the order you see it on the screen i know some people do different things they have like a typography section and stuff like that and sometimes i think that's worth doing but generally it kind of makes sense to me if it's um yeah showing in the order that i see it okay yes um we also need to spread this out so how do you do that but first i'm gonna do card container yeah body i want to put it in the middle basically margin o auto on the body [Music] nope oh right yeah press play flex and then the old justify content and then the line items well yeah but then we'd have to have a actually yeah that is a good idea because then we can put um a smaller height on the card which i think we would actually want because we wouldn't want it to be a hundred percent of the viewport so i reckon the old max height what do you reckon um interesting i don't know why yeah 600 pixels i think yeah but then you would need to set the height as well all right like the min height okay i'm gonna do this and then we'll see where we go from there right yeah just height is good yeah okay cool what's going on in the old chat um yeah garrett says it bothers me that the icons aren't centered in the buttons yeah it bothers me too if anyone has an idea of how we can fix that let me know and in the meantime we will continue uh fixing this dave collinson says um don't go hide on the car container it doesn't need one okay all right actually yeah you're totally right um renesa says in the button container you need two dibs one for the first four buttons and another down arrow so that you can use justify between to separate them yes absolutely now originally i was going to use grid which is why they only had one i didn't end up doing that so do you remember why yes because it went awol um [Music] what should we call it class button group um navigation buttons oh just so lazy with long words so these four go in here oh for goodness sake enter yeah what no yeah yeah i said yeah that's the one and then there's another one which we'll call oops expand button and then move this in there you know just give that class to that button instead of creating a new div well this actually has already done everything yeah well how um because now the flex box is basically being applied one level above so it's treating this as one unit and this as another unit yeah fair enough yeah oh yeah that's true last button doesn't need to be in a div of its own yeah that's what which is why when i saw that it was like positioned correctly i was like well yeah fair enough it works yeah okay yeah so there is some i kind of hover over that and also the button probably has its own oh every button has some kind of padding around it doesn't it i know maybe not that's within the button right i will bring back div and just move on or i can give it a lift of auto but then i would need a class to give it a margin left of auto i think yeah i'm going to i might stick with your idea michael if it works if it ain't broke yeah uh now no so this section here needs a bit of padding definitely do you actually need that class though classic spam button no no and do you need well not currently ah really are we going to try to do something to that button well you never know yeah okay navigation buttons probably doesn't need anything either because it's already no yeah that's true i'd be like to make my own life difficult um yes so card content now needs some padding yeah container hero and then here add content padding one in yes and now i'm going to remove this um yeah just checking through the chat i see yeah i created an inner container for the media info put the buttons in separate dibs inside the inner container yes ooh it says the reason the circles are not perfectly rounded because they don't hardly find width and height oh okay let's give that a go so that was button height how big is 50 pixels and width three pixels are they centered now no but you probably i think that basically means that you can try to center them like if you make it 60 pixels or 55 55 and 55 i think that's worse it's 60 or 60 55. oh wow look at that 60 actually does look relatively okay relatively yeah put the old cursor pointer on come on we're here we'll do a button hover and sudden focus of light gray lightning oh okay yeah background color light grey yeah that looks like which is the real thing yeah but why is it dark oh because it's inverted because it's inverted here [Applause] so you can make a dark gray willow so this one oh my god this needs to be light gray and this one needs to be dark gray yeah it's not an optimal solution is it let's be honest yeah that is super confusing it definitely has this seems hacky yes garrett smith you're telling me yes text to line center i'm not sure that's gonna work because it's an image i don't think text design would work on that there you go would you remake this string to hack with pumpkin it seems like there might be a margin or padding influencing things influencing many things yes yeah and there's where i've just realized it's already gone six o'clock but i'm going to try and remove this um yeah bullet point that first bullet point before we wrap up because you know it's friday six o'clock css style single point kevin powell's got a video on this yeah there was like you can select the first child of a somehow has anybody thought of asking pumpkin house styling lists yeah he just looks in contempt i think first child would work yeah if you just select first child and then you how do you remove the bullet points like something something something none um list style item i think there you are first child css this oh it's actually first child selector how awesome is that so what like url for i don't know it should be p it's like this yeah but is it only ul or oh you're gonna do it on a css class no i think you have to do it on p first child so it's like the first paragraph yes so i think you need to select we need lee first child then whoa yeah just confusing you're telling me right color red okay it's doing something [Music] nada nice yeah well kind of it's not what didn't that do it it did do it yeah there you go but i mean if i had more time i would maybe that's not too difficult actually rule text align left maybe that needs to go on the lead then no because it would be left by default so margin left i need to fix this now it's going to annoy me why were you fixing oh that's kind of like a little bit off center basically this gap here so what's that green so when you when you go to yeah only it's the pattern padding that's better isn't it and now whilst i'm here for the sake of how can we line these up so they're not what's up with them okay no i have an idea 94 percent match uh it's kind of not centered yeah in the center of its rope that's not the best way of doing that but it will do for now i'll make it work cutting top not 0.5 and yeah and then we want the same on the length uh it should be with a dot because it's class yep good catch is that good yeah yes it's the whole thing really now um is this movie info yes yeah so just this one don't need this could do with actually i probably shouldn't do that with padding i should be just spread them out a bit oh i see um i would probably just maybe probably just stick padding into it i'm sure there's a better way of doing it with flexbox what's the original actually it doesn't have that much at all okay then just optimizing for nothing okay yeah close enough uh you know it says pumpkin is working on nap script yeah yeah oh what about making the button a flex and then justify content cetera and okay let's give that a go um i feel like that already didn't expect that no but that's because you already have flex declared on i think you already have um flex declared on on the class that the button all the buttons already have yeah but this isn't a class this is just the tag well yeah but when you go to html you have flex already declared on [Music] on the button container and because those two are the divs well it isn't i'm sure it's a great idea it's just my incompetence that's making it fall down but yes thank you all for your help remove the padding from the ool oh this is kind of addictive like have you already removed oh yeah padding left i feel like we're reading the old comments okay no you probably are ready to remove the padding could you not just align item center to get that effect which items yeah okay yeah there's like it the problem is that when people write a comment it's not when we read the comment and by the time we read it we don't know what what we're and then we get this yeah exactly yes so that's that well thank you for sticking around through our hysteria and um fun and games with the netflix card i have to admit one hour for this card from scratch is i don't know it feels like feels like a really tight deadline to me but i don't know i don't have any yeah this is what i made earlier in my practice run right and it's different well yeah oh i see interesting no yeah that's not yes this is what i made earlier ah you need did i just close it no okay yeah yeah yeah it's not really that different but i didn't finish it i was just having a go and i thought oh this is going to be plain sailing how wrong was i and it's funny you misspelled it forever irreverent on that one too [Laughter] well what can i say cool um it was fun plus it also gives me confidence seeing you both struggle with it yeah uh well both struggle is a bit of a compliment to me okay uh because i don't struggle with css i just flat out can do nothing with it so there you go well yeah i think i've demonstrated that not that brilliant jose has summarized it nicely god yes indeed oh yeah i did say we were going to talk about some polls but we didn't get a chance to oh no however shortly before the stream i emailed everyone and said that you should um vote on my poll of if you had to live off only one food for a month which would you choose it's exactly 50 50 now i would go oh i did not read the question i just worried if i just voted for chocolate what you just thought which do you prefer carrots or chocolate yeah pretty much i just saw the thing and i just voted of course i would choose chocolate for that but if you i didn't read the question only eat it for a month right carrots or chocolate yeah i would say carrots you could do so much with carrots you know roasted raw yeah but with a mouthful chocolate would be so much better it wouldn't like like you get sick of chocolate very quickly i reckon so that's what anyway if you feel like voting drop your thoughts in the chat and this um conveniently shows off oh yeah this is what i was banging on about last week one div multiple colors my video has just gone live really well i hope so it was scheduled to yes it has here we go so if you want to check out how to make a pie chart with just one div head on over a pie chart oh yeah right parchment we want it yeah because it's like all the degrees yeah ah nice super cool oh you can make the flag of ukraine with just one div interesting and on that note micah will grab pumpkin let's go thank you all for coming thank you all for chatting it was wonderful to speak to you all i hope you come again next week yeah so have a lovely weekend see you later everyone oh