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
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.
@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
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
<!-- 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>
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
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.