aniweyn / advancedcss-bem-applyingbem

Exercise: Applying BEM Naming Convention

Objective: To practice applying the BEM (Block Element Modifier) naming convention to HTML elements and use of Visual Studio Code with commiting changes to GitHub Classroom.

Scenario: Imagine that you are designing a website for an online poster shop. In this exercise, you will apply the BEM naming convention to buttons and cards on the website.

Instructions:

Buttons:

1. Create a "Wish List" button that should always be available on the website.
2. Implement a "Basket" button that should always appear on all of the cards. This button on certain cards should indicate that it is "disabled."

Cards:

1. Design one of the cards to represent a "New" item in the shop.

Card Layout:

1. Arrange the cards in such a way that all cards related to dogs are displayed in a single horizontal line.
2. For cards related to cats, ensure they are displayed in one line as well but separated from the line containing dog-related cards.

Note

You can achieve the desired layout by appropriately structuring your HTML and applying CSS styles to the cards.

Creative Styling:

1. In addition to applying the BEM naming convention to buttons and cards, feel free to unleash your creativity in styling the entire page.
2. Use CSS to customize the color scheme, typography, spacing, and any other visual elements of the website to make it visually appealing.
3. You have creative freedom to design the overall look and feel of the poster shop website to your liking.

Note

While styling, remember to maintain good design practices for user experience and readability.

Tip

Use the BEM class names in your HTML and CSS to maintain a clean and organized code structure. Test your website to ensure that the buttons and cards display as expected with the defined BEM modifiers.