Coffee Website (W.I.P)

I Built This
1

It’s not entirely complete, but I would like to get some feedback on what I’ve got so far.

https://codepen.io/editor/CasualWanderer20XX/pen/01a078ec-e273-7655-9f57-e937ab2e8265

Specifically these points:

  1. Does everything look neat so far.
  2. Does the nav menu work properly in the small widths?
  3. Does the text and how it reads look fine?

Also, I do want to ask if this is how the Mobile-First Approach is implemented.

I started with CSS for the smaller sizes first and then tried to use media rules for the bigger sizes next.

2

Welcome back to the forum @CasualWanderer20XX

Great looking landing page.

Here are some of my suggestions, you can disregard them if you want:

  • I’d place the h2 element above the img element
  • Noticed the close button has a white box around the “x” when it is hovered.

image

  • Place some space between the hero description text and the edge of the viewport.

The mobile first approach is a good idea. Start with the smallest viewport, then work your way up to tablet, then desktop. Refactoring from the other way round is a lot tougher.

For mobile, see if you can get everything to fit on the viewport. This may mean removing images.

Since you have a hamburger menu, you don’t need to include the “About” section on the landing page.Also, putting a menu at the top of the viewport is not good UX. Most people use a phone one handed, so it makes sense to put navigation aids at the bottom of the viewport, within easy thumb reach.

For larger view ports, remove navigation aids from the bottom of the viewport and place them back in the hamburger menu.

Place “Careers” and “Contact” into navigation or buttons.

Happy coding