- 00:00:00 so welcome back so in the last video we
- 00:00:04 set up our project we implement the
- 00:00:06 basic project structure now in this
- 00:00:08 video I want to start outputting or s so
- 00:00:11 once you start working on the product
- 00:00:13 page outputting our for now a dummy
- 00:00:16 products which we can add to the card
- 00:00:18 and well by later on this tutorial it's
- 00:00:21 let's start for this I already got my
- 00:00:24 extra plate a PHP file here
- 00:00:26 which is of course page or the view
- 00:00:28 which should hold my different products
- 00:00:31 however I also want to have a header to
- 00:00:35 well later on navigate to my let's say
- 00:00:39 user area to sign in or sign up and also
- 00:00:42 to access my card so I will create that
- 00:00:45 header for now and I do this in a
- 00:00:47 partials folder by adding a new fall
- 00:00:49 which I'll call header or later PHP and
- 00:00:53 then on get bootstrap comm components I
- 00:00:58 will pick the default bootstrap navbar
- 00:01:01 now of course you may change this or
- 00:01:04 laplace's with whatever that for you
- 00:01:06 like but I just want to have a basic
- 00:01:08 navigation bar here which I can use and
- 00:01:11 customize to my needs so therefore I
- 00:01:13 will grab all of that code here which is
- 00:01:16 more than I will need but I will clean
- 00:01:18 it up in a second and paste it into my
- 00:01:22 header here now as already said this is
- 00:01:24 way more code than I need so I will
- 00:01:27 quickly clean this up but before I
- 00:01:29 actually do this I want to implement it
- 00:01:31 first so in the master file and the
- 00:01:34 master layout here right before I enter
- 00:01:38 my content here I want to include this
- 00:01:41 partial and I do this by using the
- 00:01:43 include command here and level
- 00:01:46 plate in levels plate templating engine
- 00:01:48 and then I just specify the name or the
- 00:01:50 path to the file I want to include so
- 00:01:52 this is in the partials folder and then
- 00:01:55 the header file so if I save this and
- 00:01:58 reload my page you can now see this
- 00:02:00 bootstrap header with that it's time to
- 00:02:03 clean it up so let's think about what do
- 00:02:06 we need or what do I want yeah I want
- 00:02:09 this brand here which leads back to the
- 00:02:11 product in next page in this case for
- 00:02:14 now I don't want all of this stuff here
- 00:02:17 I want to have a link on the right which
- 00:02:20 allows me to go to the user page or to
- 00:02:23 login locked logout sign-in it was
- 00:02:26 something like this tea will use related
- 00:02:28 stuff or none of the thing about it
- 00:02:30 let's make this a drop-down where I then
- 00:02:32 have like sign up sign in or if you're
- 00:02:35 assigned in logout and access to the
- 00:02:37 user page so drop-down is fine
- 00:02:40 and I've also want to keep this link
- 00:02:42 here which should lead to the shopping
- 00:02:43 cart so now first I'll get rid of this
- 00:02:46 part here on the left and in order to do
- 00:02:50 this you can just see I want to get rid
- 00:02:52 of this link this link and a drop down
- 00:02:54 so I may just grab all these links or
- 00:02:57 this whole unordered list here on the
- 00:02:59 left delete it also get rid of the
- 00:03:03 search bar delete that now on the right
- 00:03:06 as a center will keep this link which
- 00:03:08 should be well I should believe into the
- 00:03:10 shopping cart later on and I also want
- 00:03:13 to keep this drop-down menu but I will
- 00:03:15 use or call this user account or
- 00:03:20 something like this this is fine and in
- 00:03:24 here well I would get rid of some of
- 00:03:27 these actions here let's say these two
- 00:03:30 actions
- 00:03:31 later on then I will have let's say the
- 00:03:33 logout link what a log out link at the
- 00:03:35 bottom and here the user account link or
- 00:03:38 something like this so if I now go back
- 00:03:42 that's how the log just looks much
- 00:03:44 better and if I resize this page a bit
- 00:03:48 you can see that we get this mobile
- 00:03:51 navigation built in to bootstraps or
- 00:03:54 this works too great so that's the
- 00:03:56 important first step next I want to add
- 00:03:59 a little bit of fine-tuning already I
- 00:04:01 want to have like a user account I can
- 00:04:04 here next to the text and I shopping her
- 00:04:05 like and next to the shopping cart link
- 00:04:08 here I will use font awesome to do this
- 00:04:11 and if you're not aware what font
- 00:04:13 awesome is this is well with named sass
- 00:04:15 and a fund which you can include like
- 00:04:18 any other
- 00:04:19 you might use your webpage but instead
- 00:04:21 of real characters this font has a
- 00:04:24 couple of images or little icons you can
- 00:04:26 use and therefore this one makes it
- 00:04:28 really easy to implement
- 00:04:31 I can small little handy icons in your
- 00:04:34 application now in order to use that you
- 00:04:36 mentioned click get started and then
- 00:04:39 just pick this see the end line here to
- 00:04:42 import it well from a CDN server you
- 00:04:44 don't have to download it and that will
- 00:04:46 also include that right believe the
- 00:04:49 bootstrap import here and the cool thing
- 00:04:52 now is I can have a look at the icons if
- 00:04:55 I click on all icons and now I can just
- 00:04:57 search so if I search for a user I see
- 00:05:00 all the icons related to your user and
- 00:05:02 let's say just default user icon doesn't
- 00:05:06 look too bad now as you see if you click
- 00:05:08 on it you already get the code you need
- 00:05:10 to have to add this icon to your page so
- 00:05:14 if I now go back to my header and add
- 00:05:17 this user I can write before this user
- 00:05:19 account text here if I now reload my
- 00:05:22 page you can see this little icon now
- 00:05:26 obviously this is way too close to this
- 00:05:28 user account text so well it's only the
- 00:05:32 case because I have to enter a space
- 00:05:34 here and if I reload looks much better
- 00:05:37 now let's also have a look if we can
- 00:05:40 find a great shopping cart here so I'll
- 00:05:43 search for shopping and we get this cart
- 00:05:47 plus or the stifled shopping cart I
- 00:05:50 think I'll go with this so I'll just
- 00:05:52 grab this code here and add this in
- 00:05:56 front of the shopping cart text this
- 00:05:59 time
- 00:05:59 I'll think about adding a space after it
- 00:06:01 so now I feel reload it already looks a
- 00:06:06 lot better even though it's still a
- 00:06:07 default booster block and you might find
- 00:06:10 unit but I think it's good to go with
- 00:06:12 that so with the header in place let's
- 00:06:15 actually work on the product page itself
- 00:06:18 and I think of having a grid of several
- 00:06:22 products here a responsive grid of
- 00:06:24 course where we will have on each
- 00:06:27 product short description
- 00:06:28 she at idle an image and then a link
- 00:06:31 which allows us to to buy it or to add
- 00:06:33 to the card and of course also a price
- 00:06:36 would be good so again I will use
- 00:06:39 bootstraps both in styles or things
- 00:06:43 helpers I got to get get us going and I
- 00:06:48 will get you to see us as part because I
- 00:06:51 will use the bootstrap grid here to well
- 00:06:54 create my my grid basically and if
- 00:06:58 you're not aware how bootstrap works
- 00:07:00 it's definitely worth checking out a
- 00:07:02 detailed tutorial but to give you a
- 00:07:04 quick start with it basically to use the
- 00:07:07 grid which allows you to well make your
- 00:07:09 whole page a greater where you can
- 00:07:11 position things you have a container
- 00:07:14 wrapping you overall grid and in this
- 00:07:17 container you have several rows and in
- 00:07:20 each row you might have several columns
- 00:07:22 and bootstrap is clever enough to
- 00:07:24 provide your different column classes
- 00:07:26 with it you can specify if a column or
- 00:07:30 if column should stack on certain screen
- 00:07:32 sizes and it will find all this
- 00:07:34 information on this grid information
- 00:07:36 page on the bootstrap page here so what
- 00:07:40 I will do is I will go back to my
- 00:07:42 application and first in my layout in
- 00:07:45 the master Pete apply to a PHP file I
- 00:07:48 will wrap the overall content in a
- 00:07:51 container so in a div having a class of
- 00:07:54 container and again if you're wondering
- 00:07:57 what I'm doing here by just typing and
- 00:07:59 then having this whole they've tagged
- 00:08:01 with the class attached to it that is
- 00:08:04 plug-in called Emmet and it's not only
- 00:08:07 available for phpstorm it's also
- 00:08:08 available for other editors so you might
- 00:08:11 check this out if you are interested in
- 00:08:12 having this functionality in your editor
- 00:08:14 and it basically allows me to like
- 00:08:17 specify class name by typing dot and
- 00:08:19 then the name of the class and I'm just
- 00:08:21 hitting tab to create a div with that
- 00:08:23 class head in the same style I could
- 00:08:26 create a h1 tag by typing h1 and then
- 00:08:28 hitting tab but that's just a side note
- 00:08:30 so back to the grid the content is
- 00:08:33 wrapped in this container and I do this
- 00:08:37 of course because each content
- 00:08:39 we'll have grit in my application here
- 00:08:41 at least and therefore each content will
- 00:08:43 be wrapped in this container however
- 00:08:46 regarding rows and columns that is
- 00:08:48 something which will be specified on the
- 00:08:50 individual view because that of course
- 00:08:52 depends on the way I want to structure
- 00:08:53 or I want to position data in my view so
- 00:08:58 I will go back to this index page in the
- 00:09:00 shop folder and now here instead of
- 00:09:02 having it works it's time to strike from
- 00:09:05 the layout of this page now later on we
- 00:09:08 might have like let's say top
- 00:09:11 information section here or a banner or
- 00:09:15 whatever but for now I will only output
- 00:09:18 a couple of thumbnails on this page now
- 00:09:21 speaking of thumbnails bootstrap helps
- 00:09:23 with thumbnails to under components you
- 00:09:27 can have a look at the right navigation
- 00:09:29 and there you will have this point
- 00:09:32 thumbnails you click on that you see how
- 00:09:35 you can include evil pure image
- 00:09:38 thumbnails or here thumbnails with image
- 00:09:41 add text and buttons and this is exactly
- 00:09:44 what I want to have in my application
- 00:09:46 therefore again I will just copy that
- 00:09:48 code and if cold copying is too boring
- 00:09:51 for you or to begin or like you may of
- 00:09:53 course also type but it's just a couple
- 00:09:55 of nested ifs with separate word with
- 00:09:58 different bootstrap classes so back in
- 00:10:01 the index page I will now enter the
- 00:10:04 thumbnail so I get my thumbnail in place
- 00:10:07 here let's have a look at this how it
- 00:10:10 does it look okay not too bad um I
- 00:10:13 personally yeah what you have it a bit
- 00:10:15 will a slight bit smaller of course
- 00:10:19 having an image would be great because
- 00:10:21 that looks a bit ugly like this and I
- 00:10:24 won't need two buttons I only want to
- 00:10:27 have let's say an Add to Cart button and
- 00:10:30 then on the Left I want to have a price
- 00:10:33 so the but we should go to the right and
- 00:10:36 say add my cart and on the Left I want
- 00:10:38 as I just said I want to show the price
- 00:10:40 of this item okay so that's where let me
- 00:10:43 work on this first I will get rid of
- 00:10:45 this first button which I won't need
- 00:10:50 and I'll just restructure that a little
- 00:10:52 bit nicer here replaced this with a div
- 00:10:55 element here it didn't want this to be a
- 00:10:56 paragraph here in this paragraph above
- 00:11:01 the icons or above the patents excuse me
- 00:11:03 I will have to even for text about the
- 00:11:06 item and I will just enter some dummy
- 00:11:08 lorem ipsum for now and again this text
- 00:11:10 was created by using the Emmet plug-in
- 00:11:12 which has this functionality built in if
- 00:11:14 you're ever in need of some dummy text
- 00:11:17 well to be honest the quickest way is
- 00:11:19 just to Google fool lorem lorem ipsum
- 00:11:23 and for example you might find this page
- 00:11:25 which is on German but it's
- 00:11:27 straightforward you just specify the
- 00:11:28 number of words you want then you could
- 00:11:31 choose if you want words which is the
- 00:11:33 default or characters or paragraphs then
- 00:11:36 you just hit go and boom there you go
- 00:11:38 you get your text which you can copy so
- 00:11:42 I got malarum up some text here this
- 00:11:44 will be the title which should be the
- 00:11:47 product title and of course here we need
- 00:11:49 an image now let's have a look for a
- 00:11:52 possible image I will just search for
- 00:11:55 well what what do we want to sell on
- 00:11:58 this page let's say we're selling books
- 00:12:00 so we're selling Harry Potter because
- 00:12:06 that is the book we will like here or
- 00:12:10 maybe you don't you may choose an upper
- 00:12:12 book so let me look well these are
- 00:12:16 driven books so you might not recall
- 00:12:18 these just lay out what sort these
- 00:12:22 images so you might just take oops you
- 00:12:26 pick whichever book you want so I like
- 00:12:29 it with that great and I will just copy
- 00:12:32 the link here now you on your page
- 00:12:34 shouldn't do deep linking like this you
- 00:12:37 wanna store the image on your own sore
- 00:12:39 and serve it from that and I will
- 00:12:42 implement this functionality later I
- 00:12:44 just want to get a prototype a quick
- 00:12:47 prototype going here so we'll enter
- 00:12:49 tussling here and a source attribute of
- 00:12:52 this image and when you reload my page
- 00:12:56 looks good but obviously far too big I
- 00:12:59 don't want that to be in the or
- 00:13:02 in all sizes certainly don't so in order
- 00:13:04 to fix the size of this I will just add
- 00:13:07 some inline styles for now I will set
- 00:13:09 the max maximum height to let's say 150
- 00:13:14 pixels it's a class of image responsive
- 00:13:17 just to make this look good on all
- 00:13:20 devices not very resizes yeah looks
- 00:13:25 better and of course stumblest to your
- 00:13:27 needs I am happy with this now inline
- 00:13:30 styling is not the best way just wanted
- 00:13:32 to see how this looks so I get rid of
- 00:13:33 this here and instead I will add a new
- 00:13:36 folder in this public folder with just a
- 00:13:38 folder of course the server will serve
- 00:13:40 in the end and sort of browser has
- 00:13:42 access to this folder and here I will
- 00:13:44 add a source oops new folder called
- 00:13:47 source and in the source folder a lava
- 00:13:50 never new folder called CSS which should
- 00:13:53 hold my apt or CSS file so all the
- 00:13:56 styling form application will go in here
- 00:13:59 now you can see that my the image I want
- 00:14:04 to style lives inside this thumbnail
- 00:14:06 class and therefore I can use this from
- 00:14:09 nail class here and then access each
- 00:14:12 image in this class which is only the
- 00:14:14 one I want to change and set the max
- 00:14:16 maximum height to 150 pixels like before
- 00:14:21 now if I go back and reload you will see
- 00:14:24 that this does not work and that's the
- 00:14:26 case because I'm having my stylesheet
- 00:14:29 here but I'm not importing it anywhere
- 00:14:31 right so back in the master layout here
- 00:14:34 I went to add import my own style sheet
- 00:14:37 and I will just right below the
- 00:14:39 bootstrap files here where I have my
- 00:14:42 Styles hook so I could either import it
- 00:14:45 here in this master layout or now
- 00:14:48 imported in my index in my shop index
- 00:14:51 file and use the Styles hook here with
- 00:14:53 section Styles to then provide the
- 00:14:56 Styles I want to use on this view now
- 00:14:59 since I want to use this app dot CSS
- 00:15:01 file throughout my whole application I
- 00:15:03 will go with the first approach and add
- 00:15:06 the import directly in the master layout
- 00:15:09 here so right below bootstrap I'll add a
- 00:15:12 new link or new
- 00:15:13 import and now how do I import my apt on
- 00:15:17 CSS file a letter well you have to be
- 00:15:20 careful here because your files will
- 00:15:24 always be served from the public folder
- 00:15:27 because this is the folder accessible by
- 00:15:30 the browser however depending on the
- 00:15:33 route you're currently on you might not
- 00:15:35 be able to access the source folder like
- 00:15:38 this source CSS app CSS does well work
- 00:15:46 now because if you can see if you see if
- 00:15:48 I can reload this applies the new
- 00:15:52 styling but if I would have another out
- 00:15:54 like let's say later on the shopping
- 00:15:57 cart then the browser would look for a
- 00:16:00 source slash CSS slash app dot CSS file
- 00:16:06 under this shopping cart folder which of
- 00:16:09 course doesn't exist on the server since
- 00:16:11 this is only a new and Euron segment and
- 00:16:14 not as folder on the server but the
- 00:16:16 browser does know that that it is just
- 00:16:18 the way we style our URL and therefore
- 00:16:20 this would lead to an error now in order
- 00:16:22 to always import this file from the same
- 00:16:26 source or from the save path and not be
- 00:16:30 dependent on a current URL we can use a
- 00:16:33 helper lana will offers this here and i
- 00:16:37 access this helper by using double curly
- 00:16:41 braces which allows us to add code to
- 00:16:43 our level plate template and the code i
- 00:16:45 want to enter here is URL colon colon 2
- 00:16:49 and then the path to this file seen from
- 00:16:54 this public folder on so source CSS apt
- 00:16:58 on CSS now this you are all too thin
- 00:17:04 here this to method used on some kind of
- 00:17:07 URL class here is in reality fs8 URL is
- 00:17:12 a facet Nafis aids as a concept in level
- 00:17:15 which allows to easily access different
- 00:17:18 helpers if you want to put it that way
- 00:17:20 off the framework
- 00:17:23 notice too
- 00:17:24 method here in reality as defiance of
- 00:17:27 our class or in some our object but so
- 00:17:31 that we don't have to write it or access
- 00:17:33 this complete object and find out where
- 00:17:35 this – method actually lives letter will
- 00:17:38 offer us us this URL for said which
- 00:17:40 that's what the name implies itself to
- 00:17:42 say data it's allows us to easily access
- 00:17:45 this underlying helper method here and
- 00:17:47 this specific helper method to does the
- 00:17:51 following
- 00:17:52 it takes the path we specify here as an
- 00:17:55 argument and finds this path in your
- 00:17:59 root folder independent of the current
- 00:18:01 route and then it will parse this in the
- 00:18:05 correct URL the browser has to access to
- 00:18:08 fetch this file so by doing it this way
- 00:18:11 here we're making sure that we're always
- 00:18:14 fetching this fall and not trying to
- 00:18:17 access some path which doesn't exist so
- 00:18:19 now if I reload the page you won't see
- 00:18:22 any changes because of course it still
- 00:18:23 works but now it will work on all routes
- 00:18:26 and not just the root route were
- 00:18:28 currently on so to finish this thumbnail
- 00:18:30 I want to moved as button to the right
- 00:18:33 and say add to cart and I also want to
- 00:18:36 output a price on the Left where the
- 00:18:38 button currently sits at in order to do
- 00:18:41 this I will go back to my index file and
- 00:18:44 a shop folder and to move the button to
- 00:18:47 the right I have a gift is and I'm a
- 00:18:50 class here which is called pull right
- 00:18:53 this is a built-in helper class in
- 00:18:55 bootstrap which applies some floating to
- 00:18:58 this button to float it on the right if
- 00:19:02 I now reload this looks pretty broken
- 00:19:07 because this button now hangs on the
- 00:19:10 bottom right corner here and well does
- 00:19:13 this might be the style you like but I
- 00:19:15 think we can do better here in order to
- 00:19:18 fix this I have to clear fix before
- 00:19:20 using this float here so I will apply
- 00:19:24 enough a class to the div holding this
- 00:19:26 button now with the gift us div a class
- 00:19:28 of clear fix
- 00:19:31 and if I now reload this looks much
- 00:19:34 better now what does clear fix do clear
- 00:19:36 fix is basically a combination of styles
- 00:19:39 being applied which make sure that all
- 00:19:41 prior floats are cleared before the new
- 00:19:44 one is applied and by doing this we make
- 00:19:46 sure that this float does button you're
- 00:19:50 floating somewhere actually floats in
- 00:19:52 the overall element it sits in instead
- 00:19:56 of being kind of mixed up with Prior
- 00:19:59 floats and the ole grit here in
- 00:20:01 bootstrap is bolt with floats and
- 00:20:03 therefore hanging a little bit off on
- 00:20:07 the page it's really a stylistic fix we
- 00:20:10 have to apply here and a common one too
- 00:20:12 as long as you use floats to lay out
- 00:20:15 your page at least and of course there
- 00:20:17 are other great ways like flexbox in the
- 00:20:19 future but not supported by all browsers
- 00:20:22 so I would go with the default bootstrap
- 00:20:24 grid system based on floats for now so
- 00:20:28 floats okay that's one thing now add or
- 00:20:30 change text and add to Bryce on the left
- 00:20:33 here so in order to change the text data
- 00:20:36 straightforward Add to Cart and also I
- 00:20:40 want to change the color of this button
- 00:20:42 now if you go over to bootstrap you can
- 00:20:45 see which colors we got available you do
- 00:20:49 find this here under CSS and then
- 00:20:53 buttons and if you scroll down a little
- 00:20:56 bit you see all the default buttons
- 00:20:58 bootstrap offers now I think a green
- 00:21:00 button is a great choice as it should
- 00:21:02 encourage our customers to buy something
- 00:21:04 so in order to make a button green you
- 00:21:07 have to apply the button success class
- 00:21:09 to it and note that you can not only
- 00:21:12 stop button elements with this button
- 00:21:15 classes but like we're currently doing
- 00:21:17 in our app all the style anchor tags or
- 00:21:20 any element as a button now this button
- 00:21:24 already has the button class but we have
- 00:21:26 to change button default to button
- 00:21:28 success here so if Y now reload you can
- 00:21:34 see I got the Add to Cart button last
- 00:21:36 step I want to add price so I will add a
- 00:21:39 new div here
- 00:21:43 where I will say like let's say $12 as a
- 00:21:49 price and now ever load this looks
- 00:21:51 pretty crappy so in order to bring this
- 00:21:53 in line I will also add a clasp here the
- 00:21:56 pull left clasp to float this on the
- 00:21:59 left but in the same line as this button
- 00:22:01 floats and this looks bad or bad we can
- 00:22:04 we could make us stand out a little bit
- 00:22:07 more so in order to make this stand out
- 00:22:10 a little bit more I will give it as a
- 00:22:11 new class price this is not a beach trip
- 00:22:14 class I will he find us myself in the
- 00:22:16 apt or CSS file and I want you style
- 00:22:20 this a little bit and basically what I
- 00:22:22 want to do is I want to make it bold I
- 00:22:26 also want to increase the font size a
- 00:22:29 little bit at least I think so let's say
- 00:22:32 let's say 16 pixels let's let's try this
- 00:22:35 and yeah how does this look looks better
- 00:22:40 might stand out even a bit more if this
- 00:22:45 text here were a bit more grayish and
- 00:22:48 less black so in order to do this I will
- 00:22:51 go back to the index page and I want to
- 00:22:53 sell this paragraph the product
- 00:22:56 description therefore I will give this a
- 00:22:57 new class called description and back in
- 00:23:02 the Aptos CSS file I will make sure that
- 00:23:04 my thumbnail class I want to style all
- 00:23:09 descriptions because of course this
- 00:23:11 description
- 00:23:12 lives inside this thumbnail element or
- 00:23:14 this thumbnail div and description
- 00:23:18 should have a color off well let me just
- 00:23:22 choose nice gray here like this maybe
- 00:23:27 save this have a look could be a little
- 00:23:32 bit more on the white side so maybe like
- 00:23:37 this yeah I think that's great so with
- 00:23:42 this I'm pretty happy and of course
- 00:23:44 there's always something we can do but I
- 00:23:47 will leave it like this I think I'm even
- 00:23:49 happy with the size now that I think of
- 00:23:51 it we should be able to fit three of
- 00:23:53 them on
- 00:23:54 one page and now before actually
- 00:23:57 outputting some data or making the next
- 00:23:59 steps
- 00:23:59 let me duplicate that five times to see
- 00:24:03 how this looks if we have a really
- 00:24:04 complete grid here and not just one item
- 00:24:07 so in order to do this for now of course
- 00:24:11 later on we will just do this more
- 00:24:13 elegant I will grab my whole column here
- 00:24:19 not the road just a column for now and
- 00:24:22 copy it two times and regarding the
- 00:24:25 width you see these classes here call em
- 00:24:28 v4 and call sn6
- 00:24:30 now what these classes do is they
- 00:24:33 specify how many blocks this there
- 00:24:36 should be wide now in a bootstrap grid
- 00:24:39 there are always twelve blocks available
- 00:24:41 so with having MD for this means on a
- 00:24:45 medium sized screen each dev here should
- 00:24:48 be four blocks wide so free divs are fit
- 00:24:51 on one or in one row with gathers
- 00:24:54 between them however on smaller screens
- 00:24:57 only two of them fit as each of the divs
- 00:25:01 should be six blocks wide indicated by
- 00:25:03 this class some other they copied ad if
- 00:25:06 I reload you see this looks okay my
- 00:25:08 opinion and now to have multiple rows I
- 00:25:11 will go up to the top and grab the whole
- 00:25:14 row here with all the columns in between
- 00:25:17 and duplicate that and now if I reload
- 00:25:20 you see we get this grid with all the
- 00:25:23 items and now again you may restyle this
- 00:25:25 make this smaller or wider whatever you
- 00:25:28 like I'll go with that and I think this
- 00:25:31 is a decent first prototype of a shop
- 00:25:35 and in the next video we'll go to the
- 00:25:37 next steps