Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

clipboard landing page

Johan 200

@CallensJ

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


this was an interesting little project. However my big problem is always how to correctly name my classes . i would appreciates to hear about what names you guys would have use.

Community feedback

Mukwende 1,370

@mukwende2000

Posted

I would recomment you read about the BEM naming convetion, BEM stands for block element modifier, this is how you would utilize it, say you have a form, you would give it a class name like "form", this will be your block

And inside of the form you will have inputs likely, so you will give a text input a classname of "form__text-input", note there are two underscores, that is the convetion that bem uses.

If you have an email input, you will give it "form__email-input".

The inputs and any other direct children of the form are the elements. The idea is to have a block element which is the parent of the elements of similarity, you name the children relative to the parent by starting with the name of the block and two underscore followed by the name of the element.

Now if at all you had another form, but it is different slightly from the first, like maybe it has a different background colour, you would name is "form--red", the name of the block, two dashes and the modifier name, i can't get into details, so i will recommend you go do a research on this and learn.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord