I copied the Uber Eats page :)

Hi all.
I copied the main Uber Eats page. None of the links work ,as that’s easy and not needed to practice.
Now I off course did this alone, so I’ve had no feedback . I would like some feedback now :slight_smile:
Hopefully nothing is done too crappy.

I didn’t validate the JS as it’s been more than a year since I last practiced JS and so for now this is good.
I’m surprised I managed this well with it still after so long.

I also only used a media query for screens maximum 600px.
Obviously that’s not complete enough, but I didn’t want to get to stuck on details ,as I think changing for other sizes wouldn’t offer much more practice.

I also would like advice on how to proceed next :slight_smile:
Are there any good free JS / Jquery courses online you would recommend?

Also, which tools /methods are best to use to develop a site next time?
I just used a codepen obviously.
Also, Is there a methodology that’s a 'best practice ’ in the steps to follow to develop a page ? (if that makes sense?)

Also, I’m looking to connect with others in a similar boat who want to go further , and maybe find others to work with on a next project?
Perhaps for paid work ? :slight_smile:

Edit: I forgot to link my page:
codepen
Edit: I forgot to add how long this took me : about 3 weeks.
Too long I’m sure.

Thanks!

I think if you are going to copy something then you should not only try to make it look like the original but actually try to improve it where needed. I found issues with the uber eats page within 30 seconds of testing it. There is a lot that can be improved. One example. Using only the keyboard, try using the hamburger menu in the upper left. You’ll be able to open it but it’s going to take you some time to figure out how to actually activate any of the items in the menu. Oh, and you can also tab out of the menu even though it appears to be behaving as a modal. Another example. The “Deliver now” button is using a div instead of a button and they didn’t add a tabindex to it so you can’t even focus/click it with the keyboard. You did sort of address these two issues but I think there is still work to be done.

I’m going to disagree here. In this day and age, responsiveness is a necessity, as there are so many different devices that are used to access a page. You are cheating yourself here if you aren’t taking them all into account. Narrow the actual uber eats page in as far as it will go. You’ll notice the horizontal scroll bar and the page looks terrible. There’s another thing you can improve on.

Sorry if I came off sounding a little too critical above. I really don’t mean to be. You have a good start here. I’m just pushing you to make it better. And really, I was just surprised at how bad the real uber eats page is.

1 Like

Thanks for the feedback. I did off course test my own page in debug mode and resized it , it does look ok, rows become columns etc.
I have not thought about adding tabindex anymore, something I should remember next time :slight_smile:
I’m also unsure how I did with Arias . Not good probably.
it’s a lot to think about adding, that’s why a methodology is needed.

I off course know a responsive design is important. I incorporated one media query for max 600px . If it were a real development I would off course add several more for other sizes .
:slight_smile:

1 Like

I think for a learning project you did pretty well.

But I would suggest always getting as much practice as possible with responsive design. If you code enough pages with it in mind from the start you won’t ever start coding a page without thinking about it.

In all fairness, the original page isn’t really made to be adaptive either. If you load the page in a mobile layout using the browser device mode it detects it and offers you the app or the site and if you click the site link it loads it in a “mobile” only design. If you then switch to the responsive layout mode and change the screen width it doesn’t actually go back to the desktop design.

2 Likes

I still can’t believe sites do this. It’s like they don’t realize that desktop users can zoom in and need to trigger the “mobile” layout. @agate, this is what I am referring to. You can make their site so much better by making it truly responsive.

1 Like

I added more responsiveness for different screen sizes and portrait/landscape, but I’m sure it’s lacking still.
Anyway, now I’m off to take a look at frontendmentor.io to take part in the challenges there.

If anyone has advice it’s appreciated :slight_smile:

Thanks for the replies .

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.