We are getting close to the finish line. Let's head over to the challenge page on the front-end mental website to have a look at the instructions and the acceptance criteria because I think we're getting there. OK, here I am on front-end mental, and if I go to my challenges, we can go and check out the challenge we enrolled into. And so if we look at the brief, I just want to make sure that we have everything your challenges to build at this product list and get it looking as close as possible as the design.

your challenges to build at this product list and get it looking as close as possible as the design. On that note, as mentioned at the start of the series, I didn't really go for a pixel perfect replica. I at least believe that myself am capable to do a much better job to replicate a design pixel for pixel. Here I wanted the essence of the app to be there and do the focus a little bit more on Laravel in the back-end. We still wanted the site to look good enough, and I think we did the job.

We still wanted the site to look good enough, and I think we did the job. You can use any tools you want to help complete the challenge, so we've used Laravel and Talon TSS mostly. All right, so your users should be able to add items to the cart and remove them, increase the number of items in the cart, see an order confirmation model when clicking confirm order, and reset the selections when they click start new order. At the very end of the last video, we've checked exactly this set of features,

At the very end of the last video, we've checked exactly this set of features, so I'm pretty comfortable saying that, yes, we are feeding these requirements. The user should also be able to navigate the whole project and perform all actions using only the keyboard. Okay, that's definitely something we want to check. I'm pretty confident, though, because we've used form elements, buttons, semantic markup, so we should be able to tab into elements,

because we've used form elements, buttons, semantic markup, so we should be able to tab into elements, select them with the space bar or enter, and everything should work. All right, so let's give it a go, I will press tab, and you can see that the first highlighted element is the first button, and if I press tab again, I will tab through or reverse tab with shift tab, and if I press enter or space bar, it should add the item to the cart, nice.

and if I press enter or space bar, it should add the item to the cart, nice. I should also be able to tab between the plus and minus, so I can go plus or I can go minus. So as you can see, it's working. It might not be the best user experience because the page reloads every time, and the tab focus goes back to the start. We could enhance that with a bit of JavaScript, or at this point, this is probably where I would take

We could enhance that with a bit of JavaScript, or at this point, this is probably where I would take this project to a single page application, so it feels a lot more interactive, but in terms of performing the actions, looks like we're able to do that. So we've added items to the cart, and we've increased or decreased the quantity. Let me also tab into the sidebar, so now I'm focused on this close button,

Let me also tab into the sidebar, so now I'm focused on this close button, so I should be able to remove this item from the cart. Yep, it works. So let's add the waffles again, and tab all the way to the cart, and we're going to test the order confirmation. It's also working, and I should be able to start a new order, and therefore clear the cart, it's working. We might not quite be at the STL level of accessibility here.

and therefore clear the cart, it's working. We might not quite be at the STL level of accessibility here. For example, the increment decrement button. I imagine this would be a roving tab index pattern where I can use the arrows left and right to go between plus and minus, where right now this is just a tab stop. Also, there should probably be a way to skip the whole product list and go straight to the cart if we wanted to,

to skip the whole product list and go straight to the cart if we wanted to, but in terms of am I able to perform all the actions with just the keyboard? Well, I've just showed you. I've used the mouse to show what is hovered or selected in focus, but I've been able to do all the tasks that I needed to perform with just a keyboard. Another conversation about this keyboard navigation

that I needed to perform with just a keyboard. Another conversation about this keyboard navigation is you can see elements like this one, which seems to hint that the element, the second element, the chamborelli is in focus. Oh, no, actually this is not the focus, this is any element that has been added to the cart that has this red border. So that's more of a UI design implementation. So let's go back to the acceptance criteria

So that's more of a UI design implementation. So let's go back to the acceptance criteria and we will definitely get back to that. All right, so the two items that we haven't checked yet is view the optimal layout for the interface depending on device screen size. This is basically responsive design. So we definitely going to check that and see hover and focus state for all interactive elements on the page.

and see hover and focus state for all interactive elements on the page. All right, so these two tasks are definitely front and heavy and I'm happy I'm wearing this T-shirt. Let's go do a roundup of the design, the responsiveness of it and hover states so we can make it as fine-tuned as we can. Okay, let's start with the responsive layout. So we have these three column grids. One thing I'm not going to change

So we have these three column grids. One thing I'm not going to change but that might be a case is to have the sidebar sticky as we scroll down instead of going away. But let's try adjust the design and see what happens at different screen sizes. That to me works quite well. That might be a little bit big but this is what you call the teenage width of the browser and this is stretching a bit.

but this is what you call the teenage width of the browser and this is stretching a bit. I think that's acceptable here. It still sort of works and then on mobile we're going to have the cut stacked below the cards and I think it all works nicely. All right, let's go back to full screen. And one thing I want to check, let me add some items to the card is the confirmation order.

let me add some items to the card is the confirmation order. It might close it. No, it stays open as a resize, good. So I want to see what happens when we reach the max width. I've set it to max width full so it should start shrinking with the browser. Of course, the browser doesn't go any lower than this. So perhaps let me zoom in the UI a little bit to create this false sensation of the card being too wide.

So perhaps let me zoom in the UI a little bit to create this false sensation of the card being too wide. And yeah, you can see that it stretches and that sort of works. I can see an issue with the icon that seems to be shrinking. You can see here that it's really little. Let's go find this icon. It's at the top here and usually the shrink zero class that tells this element to not shrink

and usually the shrink zero class that tells this element to not shrink is usually a good fix. So now the icon should stay nice and big at all times. Okay, cool, we fixed that. Let me zoom back out to my go to 90% zoom level for this course. I think I noticed earlier and didn't really like is that there is no spacing from the sides and we eventually scroll up and down

is that there is no spacing from the sides and we eventually scroll up and down but it would be nice to have a tiny bit of gutter at top and bottom. There is no gutter left and right on the design. I just remember this being an odd choice but let me find, there you go. So we will go with that but let's try to implement some gutter at top and bottom. So again, in the confirmation model, which is here,

some gutter at top and bottom. So again, in the confirmation model, which is here, well, we have max hdvh. Let's see if we can do some Frankenstein calc here, calc. And we're going to go 100 dvh. So that would be the equivalent of what we had but then go minus 4m. I was gonna go 2m but let's believe copilot that 4m is a good idea. And let's try to toggle the order confirmation.

but let's believe copilot that 4m is a good idea. And let's try to toggle the order confirmation. And yeah, that works now. So you can see that the model is never going to touch the edges. I think 2ms could have been enough. We just never want the thing to touch the border. So let's go 2ms. Yep, I'm quite happy with that. So now we can scroll inside the container

Yep, I'm quite happy with that. So now we can scroll inside the container but it never touches the edges. All right, I think we're in a good place. I'm sure we might find some little quirks if we poke a little bit more but in terms of responsive design, I think mostly it behaves pretty well. The next thing we're going to check out is the hover state for different elements.

The next thing we're going to check out is the hover state for different elements.