"Product" landing page feedback please

Hello,

I know that it looks like a waste of time but ta-da!I’m happy to present my first Not-So-Ugly-Landing-Page! (with some animation, which as it turned out totally ruins SEO lol)
My best shot with BEM(first-timer alert+FCC markup), responsiveness, spacing, cleaner code and also an attempt to create something more “modern”, not just something i like =) I’m trying to find a way to create a more likable cover for the book.

The stucture is still bit of a mess though.
What do you think?
Probably that it’s not a product hahaha

Thanks!

1 Like

It looks good. Simple and clean. Nice!! The only thing is that in small device (i.e Iphone 5) it shows a horizontal scrollbar, witch is not good from a UX point of view.

1 Like

Wow,it looks amazing!!
The page might need to more responsive for mobile platforms though.

1 Like

@fcosueza, @ra-y Thank you for the feedback!
Think i fixed things to a reasonable extent now, min-width and fixed-width iframe seem to be the root of all evil lol
and yep the video is adaptive :confused:

did you test it on actual mobile devices?

In chrome device mode it’s not displayed correctly when loaded first, but after switching between devices(eg large-> iphone5SE) everything works fine

1 Like

Hey Annestezia,

congrats on your project, you did a great job! :clap:

I can clearly see that you make great progress!

My ideas:

  • great work using variables for the colors
  • great work trying to use BEM!

Regarding BEM: (I removed unimportant parts)

<!-- there is some connection, but it's hard to get -->
<ul class="nav-items">
  <li class="nav-item">
    ...
  </li>
</ul>

I rebuilt it and use BEM:

<!-- we start with a block (B) -->
<!-- "standalone entity that is meaningful on its own"-->
<ul class="navlist">

  <!-- the block has an element (E) -->
  <!-- "part of a block, no standalone meaning, semantically tied to its block."-->
  <li class="navlist__item">
    ...
  </li>

  <!-- the block has an element (E) -->
  <!-- "part of a block, no standalone meaning, semantically tied to its block."-->
  <!-- the element gets a modifier (M)
  <!-- "A flag on a block or element. Use them to change appearance or behavior." -->
  <li class="navlist__item navlist__item--active">
    ...
  </li>
</ul>

BEM explanations are here

1 Like

It looks nice in mobile now!! Great work :slight_smile:

1 Like

Looks good on mobile and tablet now. Keep up the great work!!

1 Like

Hey, Michael!

Thank you :blush:

I know some classes seem random, but they are for FCC tests+ old markup+sometimes i didn’t know what was the best solution, and went with the working one (thanx @nhcarrigan and @DanCouper ;))

Thanx for the explanation! i read BEM docs, but not quite comfortable with the idea and implementation yet…
Like

<div class="container container__heap container__line heap heap_direction_column">...</div>

Real life example from yandex home page, they invented BEM as far as i know =)

Hey Annestezia,

I totally get it.

Seems to be very overwhelming, because they use a lot of classes.
I think in the end it’s more about the concept behind it.

I have a parent component. (block)
This parent has some children. (elements)
The children can’t live on their own, that’s why I connect them to the parent with a __.
All children have something in common, but maybe one child has a special need. (modifier)

In the end I think we will never have a CSS organizing/naming solution that will fit all needs. That’s why I think it’s important to understand the concept, tinker around with it and see what makes you productive.

1 Like