Coding

CSS | Burger Builder | Tutorial

  • 00:00:00 welcome to this video I got a new react
  • 00:00:03 course and this video is not about to
  • 00:00:05 react course but if you saw some of the
  • 00:00:07 announcements you probably saw that NSI
  • 00:00:10 react course we build an application
  • 00:00:12 where we can build up a burger
  • 00:00:15 dynamically now that burger is actually
  • 00:00:17 not using a bunch of images for the
  • 00:00:20 different ingredients but it's written
  • 00:00:22 entirely in CSS this is written entirely
  • 00:00:25 in CSS in this video we'll build this
  • 00:00:29 burger together so let's dive in
  • 00:00:35 so when I built this burger here and
  • 00:00:38 it's written as I said entirely in CSS
  • 00:00:41 we won't animated we won't add
  • 00:00:43 JavaScript logic to build it up that is
  • 00:00:46 what we do with react and do react
  • 00:00:47 course but it is
  • 00:00:49 I guess interesting to see how you can
  • 00:00:51 use CSS to create all these these
  • 00:00:54 ingredients here so for that let's
  • 00:00:56 create a new pan here on code pen with
  • 00:00:59 just the web editor I'm going to use you
  • 00:01:01 could bolt this locally but here this is
  • 00:01:04 a nice playing ground for exactly this
  • 00:01:06 kind of project so why don't we use it
  • 00:01:08 so in this new code pan here I want to
  • 00:01:12 build the burger now this burger as I
  • 00:01:15 said won't use JavaScript but it will
  • 00:01:18 use HTML and it will use CSS obviously
  • 00:01:21 to well make the burger look like a
  • 00:01:23 burger in HTML I will not have that many
  • 00:01:28 elements I will have a wrapping div
  • 00:01:31 which I will give to class box and this
  • 00:01:33 will just be like the container for the
  • 00:01:36 burger and then in there I want to have
  • 00:01:38 a div for each ingredient so the goal is
  • 00:01:41 to have something like red top maybe and
  • 00:01:45 then also have something like sell it
  • 00:01:49 and then Brad bottom and we're going to
  • 00:01:53 add more ingredients than just ease free
  • 00:01:55 this wouldn't be that delicious of a
  • 00:01:58 burger but that is the idea having all
  • 00:02:00 these ingredients set next to each other
  • 00:02:02 and styling them with CSS so this our
  • 00:02:07 HTML code how does these CSS code look
  • 00:02:10 like then well I go I'm going to create
  • 00:02:14 all these classes I'm using here I'll
  • 00:02:16 start with the box which is the most
  • 00:02:18 boring one because it's not an
  • 00:02:20 ingredient this box should just be the
  • 00:02:22 container for the burger and the burger
  • 00:02:25 then all should be built in a way that
  • 00:02:27 it's really flexible and grows with the
  • 00:02:30 box
  • 00:02:30 so therefore to start off I'll give this
  • 00:02:32 box a width of let's say 500 pixels and
  • 00:02:36 the margin of auto to just Center it and
  • 00:02:39 a height of 450 pixels and you can
  • 00:02:42 always adjust this later now let's work
  • 00:02:46 on the bread
  • 00:02:48 top so this is the first element I got
  • 00:02:50 here on the left and now the bread top
  • 00:02:54 should be well box with round corners on
  • 00:03:00 the top left and right corner so that we
  • 00:03:03 have a straight line at the bottom and
  • 00:03:05 clear edges on the sides on the bottom
  • 00:03:07 edges but then on the bottom corners but
  • 00:03:10 then this rounded look at the top like a
  • 00:03:13 burger bread you cut into pieces where
  • 00:03:16 you then will take the upper piece in
  • 00:03:19 CSS will obviously always work with
  • 00:03:22 boxes and all these ingredients are
  • 00:03:24 nothing else than boxes with some
  • 00:03:27 rounded edges some round corners from
  • 00:03:29 time to time so first of all let's give
  • 00:03:33 this red top a height and let's say this
  • 00:03:35 should be 20% keep in mind it's inside
  • 00:03:38 the box it will be 20% of that height
  • 00:03:41 here
  • 00:03:42 let's also give it a width and let's say
  • 00:03:44 that should be 80% and we can always
  • 00:03:47 tweak this later now we want to have a
  • 00:03:51 background color for this bread top so
  • 00:03:55 I'll assign background color and of
  • 00:03:57 course you can make this red so let me
  • 00:03:59 now see this box red doesn't seem to be
  • 00:04:03 the most optimal color for Brad though a
  • 00:04:06 brown probably would be better but I
  • 00:04:09 actually want to use a linear gradient
  • 00:04:12 to give this also some three-dimensional
  • 00:04:17 look so that we don't have the same
  • 00:04:20 monotone color for the entire bread and
  • 00:04:22 if we want to use linear gradient we
  • 00:04:25 can't do this on background color
  • 00:04:26 because it's not treated as a color we
  • 00:04:28 do it on the background property instead
  • 00:04:30 now a linear gradient takes all the
  • 00:04:33 different shades you want to well
  • 00:04:35 transition fruit and here only one I
  • 00:04:37 have two and I picked two brownish
  • 00:04:39 colors the first one the hashcode for a
  • 00:04:42 TD hex code for the first one is BC 581e
  • 00:04:48 and the second color I want to
  • 00:04:51 transition to is e2 7 b-36
  • 00:04:56 like this so lose the brown color I
  • 00:04:59 picked and of course you can always pick
  • 00:05:01 a different
  • 00:05:02 one now here we got the D look but of
  • 00:05:06 course we're missing the D round corners
  • 00:05:09 and so on right so we should probably
  • 00:05:11 add some border radius to this and now
  • 00:05:14 we could say ten pixels this gives us
  • 00:05:17 round corners everywhere we only want to
  • 00:05:20 have two top and the top two corners to
  • 00:05:23 be round though so what we can do is we
  • 00:05:25 can say 10 pixels 10 pixels zero zero
  • 00:05:29 the first two numbers or basically these
  • 00:05:31 numbers go from top left to top right to
  • 00:05:34 bottom right to bottom left so one time
  • 00:05:37 around the burger if we do it like this
  • 00:05:40 only the top corner corners around but
  • 00:05:43 10 pixels isn't enough actually I'm
  • 00:05:46 going to use percentages here so we can
  • 00:05:48 use 50% here 50% basically looks much
  • 00:05:54 closer to a burger a bread a cut-up read
  • 00:05:58 look as I want it now in this this bread
  • 00:06:03 almost already looks pretty good but now
  • 00:06:06 I also want to give it some
  • 00:06:07 three-dimensional look so add a box
  • 00:06:09 shadow but not one which goes outside of
  • 00:06:13 the bread but an inset shadow so which
  • 00:06:16 falls onto the bread so to say then I'll
  • 00:06:20 use 15 pixels and 0 here as dimensions
  • 00:06:25 for the shadow and this black shadow
  • 00:06:28 actually doesn't look too bad but I want
  • 00:06:31 to have some dark brown color here which
  • 00:06:34 I can get with c1 5 7 1 1 and this now
  • 00:06:38 looks really good for me at least and as
  • 00:06:40 always you can tweak this around now
  • 00:06:43 with that we got the bread top finished
  • 00:06:46 for now all these seeds on the bread are
  • 00:06:49 missing for now we'll add them later
  • 00:06:51 let's next work on the salad now how it
  • 00:06:56 should the sell it look like how should
  • 00:06:58 the sell it be stalled for the salad
  • 00:07:00 let's first of all define a width and
  • 00:07:02 the bread top had a width of 80% I think
  • 00:07:07 it would look nice if the seller is a
  • 00:07:09 little bit broader than the bread so
  • 00:07:12 maybe we take 90% here we also have to
  • 00:07:16 say assign a height and there let's try
  • 00:07:19 7% so much smaller than the bread
  • 00:07:21 because salad obviously is isn't as big
  • 00:07:24 now the next step is I want to give this
  • 00:07:27 a background color and here again I'm
  • 00:07:29 going to use a linear gradient you have
  • 00:07:31 this nicer look than just one single
  • 00:07:34 color and there I picked some green
  • 00:07:36 colors in advance two to eight C one D
  • 00:07:40 is the code of the first car a color to
  • 00:07:42 color or where we are starting at and
  • 00:07:44 then I want to end at hashtag nine 1c
  • 00:07:48 e50 this is now a green color it also is
  • 00:07:53 not positioned correctly for one we want
  • 00:07:57 to use margin Auto to Center it the same
  • 00:08:01 should of course then be done on the
  • 00:08:03 bread on the top here we all just shut
  • 00:08:06 Center this now it's centered but it
  • 00:08:09 also doesn't have any space between the
  • 00:08:12 bread and the salad so we probably want
  • 00:08:15 to add some spacing maybe two percent of
  • 00:08:18 the total height of the box to the bread
  • 00:08:20 and maybe add the same amount of spacing
  • 00:08:24 to the cell it and s so often you can
  • 00:08:28 also find you this of course so this is
  • 00:08:31 now the style I wanna use one of things
  • 00:08:35 missing I don't like the edges here the
  • 00:08:38 corners of the salad so it makes sense
  • 00:08:41 to also give dad a border radius of
  • 00:08:44 let's say 20 pixels and you can just
  • 00:08:47 play around with this number until it
  • 00:08:49 looks good to you I like this look you
  • 00:08:52 can of course choose a different one so
  • 00:08:54 now we got the salad finished let's now
  • 00:08:58 work on the bottom bread so I'll add
  • 00:09:01 bread bottom here to target this last
  • 00:09:05 death and on this bread I'll also sign a
  • 00:09:09 height let's pick 13% so that's smaller
  • 00:09:13 than the top bread but we also won't
  • 00:09:16 have this round part on the top here and
  • 00:09:20 let's pick a width which probably should
  • 00:09:23 be equal to the width of the top bread
  • 00:09:25 so 80% was our width there let's go with
  • 00:09:28 the same width all
  • 00:09:30 the bottom breath now so that we can see
  • 00:09:32 something I'll also use a background
  • 00:09:34 here and I also want to set the
  • 00:09:36 background to a linear gradient here and
  • 00:09:38 I will use the following color f08 efore
  • 00:09:43 a and then go to e27
  • 00:09:46 be free 6 and I simply picked all these
  • 00:09:49 colors aids and color Pickers before I
  • 00:09:52 started recording this now we got the
  • 00:09:55 background color for that let's also add
  • 00:09:58 a margin of 2 percent to 2 percent an
  • 00:10:02 auto here to Center this and have some
  • 00:10:04 spacing and that's also at this inset
  • 00:10:08 box-shadow as we use it on the top bread
  • 00:10:11 so inset – 15 pixels 0 and then c1 5 7 1
  • 00:10:17 1 so we get the same look as we have on
  • 00:10:20 the top some border-radius can't hurt
  • 00:10:23 your tooth though a little bit too edgy
  • 00:10:27 for my taste so add a border radius but
  • 00:10:31 I won't use as round of a corner as we
  • 00:10:34 did further the top Brett
  • 00:10:35 instead the top two corners shouldn't be
  • 00:10:39 rounded also I'll assign a value of zero
  • 00:10:41 but I want to have round corners at the
  • 00:10:44 bottom so I'll use 30 pixels here and I
  • 00:10:47 like this look of course you can have
  • 00:10:50 we're making a little bit less round
  • 00:10:51 with 20 maybe also looks good whatever
  • 00:10:56 you like I'll go back to Ferdie but
  • 00:10:58 again you can tweak this to your needs
  • 00:11:00 and with that we got our bottom rat
  • 00:11:03 style to you this already looks nice in
  • 00:11:05 my opinion but we haven't gotten that
  • 00:11:08 many ingredients so time to add more one
  • 00:11:11 great thing we can already see though is
  • 00:11:13 if I simply duplicate the salad Dampier
  • 00:11:16 well we got two salads in there so that
  • 00:11:19 really works great it's reusable still
  • 00:11:22 let's add more ingredients let's add
  • 00:11:25 bacon below the salad let's add cheese
  • 00:11:29 but maybe start with 2 slices of cheese
  • 00:11:32 and let's add meat here maybe also two
  • 00:11:36 slices these are all the ingredients I
  • 00:11:39 want to support and well build here now
  • 00:11:42 let's add them step
  • 00:11:43 my step let's start with the bacon I'm
  • 00:11:45 going to add this class right below the
  • 00:11:48 sell it so the bacon also of course has
  • 00:11:52 to have a width and here I'll use 80% to
  • 00:11:56 have it as width as the bread you can
  • 00:11:59 make it smaller you can make it bigger
  • 00:12:01 whatever you want the height should be
  • 00:12:04 really small because bacon isn't that
  • 00:12:07 fat at least not from a height
  • 00:12:10 perspective and we also want to assign a
  • 00:12:13 background here and as always I'll use a
  • 00:12:15 linear gradient here tube to have nicer
  • 00:12:18 colors the linear gradient here should
  • 00:12:20 go from bf3 8 1 3 qc4 5e 3/8 like that
  • 00:12:30 and let's also add our margin of two
  • 00:12:33 percentages and audio to Center it
  • 00:12:36 that's my bacon now here I don't
  • 00:12:39 actually have round corners you could
  • 00:12:42 add them you could add rounded corners
  • 00:12:44 here but I like my bacon do you have
  • 00:12:47 rough edges rough corners like it has
  • 00:12:49 here again as always changed as if you
  • 00:12:52 want a different look let me move on to
  • 00:12:54 the cheese and you probably already
  • 00:12:57 understood the pattern we can copy the
  • 00:13:01 code from the bacon here and just adjust
  • 00:13:03 these values for example I want you have
  • 00:13:07 cheese which overlaps or which goes
  • 00:13:10 beyond width of my bread so I'll pick
  • 00:13:12 let's say 91% here the height of the
  • 00:13:18 cheese could be 3% but let's make it
  • 00:13:21 slightly bigger maybe 4.5 and the color
  • 00:13:26 of course is off it should be in the
  • 00:13:29 yellowish reaching so there I'll pick F
  • 00:13:31 4 D 0 0 4 and then d 6b B 2 2 and
  • 00:13:38 obviously I know all these hex codes by
  • 00:13:41 heart
  • 00:13:42 no you simply lock them up and pick a
  • 00:13:45 color you like so that's our background
  • 00:13:48 now for the cheese I want to have round
  • 00:13:50 corners again so I'll add a border
  • 00:13:53 radius here and I'll simply set 20
  • 00:13:55 pixels for all
  • 00:13:57 corners this looks nice to me looks like
  • 00:14:00 nice cheese as always you can tweak it
  • 00:14:02 but I like the look of these cheese
  • 00:14:04 pieces here and that already is the
  • 00:14:08 cheese now of course that's not although
  • 00:14:10 we all to get the meat so I'll duplicate
  • 00:14:13 the cheese because meat also will need
  • 00:14:16 width and height and so on so let me
  • 00:14:18 name this meat here now let's think
  • 00:14:22 about the width I'll go with maybe 78
  • 00:14:26 percent slightly smaller than the bread
  • 00:14:28 I'll give it a height of let's say a
  • 00:14:31 percent you have red but bigger slices
  • 00:14:35 of of meat the background here again
  • 00:14:39 will be a linear gradient and here I
  • 00:14:41 want to go from 7 F 3 6:08 to 702 eo5
  • 00:14:50 for this look off my bread the border
  • 00:14:54 radius may be a little a little bit less
  • 00:14:57 round maybe 15 pixels looks nice to me
  • 00:15:00 and I think the width should be a little
  • 00:15:03 bit bigger maybe 82% yeah that looks
  • 00:15:05 better and with that I'm happy with the
  • 00:15:09 look of my of my meat it looks good to
  • 00:15:11 me I got my meat here looks fine so as
  • 00:15:15 you can see we basically have a lot of
  • 00:15:18 similar properties in all these
  • 00:15:20 ingredients I would just assign
  • 00:15:22 different values for them but besides
  • 00:15:24 that all ingredients work in the same
  • 00:15:26 way what we can also already see us if I
  • 00:15:29 go up to my box and I decrease this to
  • 00:15:32 300 pixels it all adjusts of course the
  • 00:15:35 burger can look a bit skewed depending
  • 00:15:37 on how you set the aspect ratio here but
  • 00:15:40 in general it adjusts nicely so that is
  • 00:15:44 really good I'll go back to what I used
  • 00:15:46 before though now this is the burger in
  • 00:15:49 general but the seeds on the top bread
  • 00:15:52 are missing and the seeds are actually a
  • 00:15:55 bit more work to do we have to look good
  • 00:15:58 so the seat will be wrapped elements in
  • 00:16:02 this bread top death I'll add a seeds
  • 00:16:05 element and a seeds two elements so two
  • 00:16:08 devs with these two different classes
  • 00:16:11 now the reason for this is that I of
  • 00:16:15 course want to have more than one seat
  • 00:16:16 and I will take advantage of a CSS
  • 00:16:19 feature to actually convert each dev
  • 00:16:21 here
  • 00:16:22 into you up to free seats if I want you
  • 00:16:25 but I can't go above these free seats
  • 00:16:29 easily so I'll use this approach and
  • 00:16:32 here how do we make this work I will add
  • 00:16:37 my seats class here below brad's top to
  • 00:16:42 start working with that I want to
  • 00:16:44 position it inside the bread top and I
  • 00:16:48 want to be able to use this like
  • 00:16:51 absolute viewport so I want to use
  • 00:16:55 position:absolute here to really display
  • 00:16:59 or precision these seats as I want now
  • 00:17:03 for absolute referring to my outer div I
  • 00:17:08 need to give my bread top class the
  • 00:17:11 position relative then the next absolute
  • 00:17:14 position will refer to this now we can
  • 00:17:18 start working on the seats
  • 00:17:19 I'll give them a width of 10% and this
  • 00:17:22 will now refer to the width off the
  • 00:17:24 bread top not to the box with and I'll
  • 00:17:28 give my seed let's say a height of 15
  • 00:17:32 percent now I also need to give them
  • 00:17:35 some color and here I will simply use
  • 00:17:37 white as a background color with that we
  • 00:17:41 don't see the seed yet because I also
  • 00:17:44 need to position it I do this with left
  • 00:17:46 and top now I'll try left 30% and top
  • 00:17:51 50% and now we see the seat appear here
  • 00:17:55 30% into the burger and 50% from the top
  • 00:18:00 now of course my seat all you should
  • 00:18:03 have round corners so I'll give it a
  • 00:18:05 border radius of 40% to not have an
  • 00:18:08 entire ellipse but some edges but
  • 00:18:11 overall very round corners now the next
  • 00:18:15 thing is I want to rotate it a little
  • 00:18:17 bit so I'll use the transform property
  • 00:18:20 and then rotate the rotate function and
  • 00:18:23 let's say by minus 20
  • 00:18:25 Griese so that it's not sitting parallel
  • 00:18:28 in parallel on the burger
  • 00:18:30 and finally I'll also give it a box
  • 00:18:33 shadow and inset shadow – 2 pixels – 3
  • 00:18:38 pixels and then let's say C 9 c 9 c 9
  • 00:18:40 which is like a greyish shadow I like
  • 00:18:43 this look here and you can always tweak
  • 00:18:46 these values to reposition the shadow so
  • 00:18:49 that's my first seed but I want to have
  • 00:18:51 more than one and now I'm going to use a
  • 00:18:53 little well trick but not really a trick
  • 00:18:56 I'm using a pseudo selector I'm taking
  • 00:18:58 the seeds class I just worked on and
  • 00:19:00 I'll add the after pseudo selector this
  • 00:19:03 allows me to create a new element which
  • 00:19:06 is displayed after this seed element the
  • 00:19:11 content should be an empty string this
  • 00:19:13 is required to display something though
  • 00:19:15 and then I'll give it a width of 100%
  • 00:19:18 because this will now refer to the seeds
  • 00:19:21 class so to dis with so not 100% of the
  • 00:19:25 bread top but 100% of the width of their
  • 00:19:28 seed and it should be equally sized
  • 00:19:30 therefore 100 percent now height also
  • 00:19:34 will be 100 percent and so leaded like
  • 00:19:37 this and now let's also give this a
  • 00:19:41 position of absolute let's give it a
  • 00:19:45 background color off-white and let's
  • 00:19:49 give it a left position and now this
  • 00:19:51 also refers to the average seat so I'll
  • 00:19:54 use minus 170 70 percent to move it to
  • 00:19:57 the left
  • 00:19:58 170 percent of the width of that
  • 00:20:01 previous seat and let's move it to the
  • 00:20:04 top by minus 260 percent this will move
  • 00:20:08 it up by 2.6 times the height of this
  • 00:20:12 seat now all I need to do is gift is the
  • 00:20:17 the round corners we already used so for
  • 00:20:20 the percent and I want to rotate this
  • 00:20:23 differently so now form this and if I
  • 00:20:26 now to rotate 0 degrees it won't change
  • 00:20:30 because now the default rotation is the
  • 00:20:33 rotation of the element I position it
  • 00:20:36 after so of DC
  • 00:20:38 so now if I wanted to make this well
  • 00:20:42 convert this back to be in parallel to
  • 00:20:44 my bread top I would have to rotate it
  • 00:20:47 by 20 degrees so if I do that its back
  • 00:20:50 to a straight element a straight line I
  • 00:20:53 want to rotate it by 60 degrees though
  • 00:20:56 swear to have it rotate in the opposite
  • 00:20:59 direction essentially and then I'm going
  • 00:21:02 to add a box shadow here also within
  • 00:21:07 said one pixel two pixels and then C 9 c
  • 00:21:12 9 c 9 like this so this is the second
  • 00:21:17 seed I wanted to add now I'll add a
  • 00:21:20 third one and for that I'm going to copy
  • 00:21:22 these seeds after element here paste it
  • 00:21:27 in and change after to the average
  • 00:21:29 pseudo selector before now I can also do
  • 00:21:33 the same and create another seed
  • 00:21:36 visually so all the setup up here is the
  • 00:21:39 same the position changes though I want
  • 00:21:42 to move this to the right so let's use
  • 00:21:44 180 percent and then I want you not push
  • 00:21:49 this up as high so I'll use minus 50%
  • 00:21:52 you move it up then all the rest however
  • 00:21:55 stays the same I'll just adjust the box
  • 00:22:00 shadow to come from an opposite
  • 00:22:02 direction with minus 3 pixels now it's
  • 00:22:04 coming from the bottom what's from the
  • 00:22:06 bottom left and with that that seed also
  • 00:22:11 looks good to me now we can work on the
  • 00:22:15 next seat seeds too because I only have
  • 00:22:18 after and before so I'll need my new
  • 00:22:21 element seeds 2 and seeds 2 of course
  • 00:22:26 just as style as the other seed without
  • 00:22:30 a pseudo selector loss so I'm going to
  • 00:22:32 copy the code from there and paste it
  • 00:22:35 into seeds 2 like this and now let's see
  • 00:22:39 what we have to adjust position absolute
  • 00:22:41 with and height that's all great the
  • 00:22:43 positioning here has to change I'm going
  • 00:22:46 to push this forward to the right with a
  • 00:22:49 distance to the left of 64
  • 00:22:52 and I'll leave top to 50% set to 50%
  • 00:22:56 though
  • 00:22:57 I'll leave the border-radius but I want
  • 00:23:00 to rotate it differently let's say plus
  • 00:23:02 10 degree to have a slight rotation to
  • 00:23:04 the right and adjust the box-shadow –
  • 00:23:08 free pixels then maybe zero and the same
  • 00:23:11 color as before now with that we got
  • 00:23:14 this seat in place now I'll use seeds
  • 00:23:18 after again so let me copy seeds to here
  • 00:23:25 use tea after pseudo selector with as
  • 00:23:30 you learned as height should be 100% now
  • 00:23:33 the position has to change though first
  • 00:23:35 of all let me add some content however
  • 00:23:37 so that we can see something and now
  • 00:23:40 let's move it forward to the right maybe
  • 00:23:43 by pushing this 150 percent to well to
  • 00:23:46 the right away from left and for chop
  • 00:23:50 let me use minus 130 percent you move it
  • 00:23:53 up a little bit
  • 00:23:54 border radius is fine but let me rotate
  • 00:23:57 it by 90 degrees really have it be
  • 00:24:00 rotated totally different and I'll
  • 00:24:02 adjust the shadow to use one pixel three
  • 00:24:06 pixels here to come from the right like
  • 00:24:09 this now with that I got this seat in
  • 00:24:13 place and I'd say this looks like a nice
  • 00:24:16 burger this is the burger we built in
  • 00:24:19 the react app and the burger Boulder in
  • 00:24:22 this react course and I hope you enjoyed
  • 00:24:25 learning how you can't build elements
  • 00:24:27 like this with just CSS this doesn't use
  • 00:24:31 SVG doesn't use any images nothing like
  • 00:24:34 that it's just CSS and as you saw not
  • 00:24:37 even that many CSS properties we're
  • 00:24:40 using so really I hope you liked this
  • 00:24:43 kind of video I hope this was helpful
  • 00:24:46 and hopefully see you in future videos –
  • 00:24:49 you can of course find this code
  • 00:24:51 attached to this video bye