Budweiser Clone

Hi,

I made a Budweiser clone page. I built it mobile first and then used media queries to respond to larger screen sizes. Unfortunately, I used vw units for most of my typography, and there didn’t seem to be an easy way to scale the font size back without overwriting every single line of code that had font-size. That was my biggest mistake that I learned from. I think I’m going to try using em’s next time.

Also, you might notice a problem with the scroll bar in the nav menu. It has to do with the fact that the bottom element has position=absolute on it. I might revisit this issue.

There are plenty of other problems. I would like to hear some feedback so I can learn and get better. This was my first serious attempt at building a responsive page. Enjoy:

https://codepen.io/LouisPetrich/full/mdVPWxQ

Instead of just making a clone I would go one step further and fix the issues with their web site. Their landing page is atrocious. Try manually increasing the font size just a little and the content starts overlapping itself. The three boxes you are supposed to enter your date of birth in are not self explanatory, they don’t have labels, and you can’t read the placeholder text.

Once I get to their ‘Our Beers’ page the issues continue. As you pointed out, they are using view port units for font size which is a big accessibility issue. The light gray text on white background does not have enough color contrast to be accessible. If you look at the heading structure, they are skipping heading levels and using heading tags for content that isn’t a heading.

When you narrow the browser window and get the hamburger menu icon, it does contract/expand using the keyboard only but good luck knowing when you actually have keyboard focus on it. And the tab order on the left side menu bar is terrible. You have to tab through all of the social media icons at the bottom first before you get to the actual menu items.

Let this be a lesson that just because it’s a big company that should be able to spend enough money to have a quality web site does not mean that they actually did spend enough money to have a quality web site. I would not use this web site as an example of how to build good web sites.