Coding

Laravel 5.2 PHP – Build a Shopping Cart – #2 Product Index View

  • 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