Today, we are going to create a card component using only HTML and CSS, no JavaScript or jQuery. This card component uses two images, one for desktop views and one for mobile views.
I like to have my website structure nice and organized. To do this, I create separate folders for my stylesheet and my scripts. Since this tutorial won’t cover JavaScript or jQuery, we will just have one folder for our CSS under my dev folder.
Here is how I like to setup my folder structure:
2 – Create Markup (HTML) BEM Structure
CreatiqueMedia LLC | Ron The Web Dev | Card Component - 2
perfume
Gabrielle Essence Eau De Parfum
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
$149.99
$169.99
3 – Create CSS
Even though we don’t use maybe all the BEM classes in our CSS, I still like to have all my markup tags associated with a class for any future development that may occur, if needed.
Hey! I appreciate you stopping by and checking out our blog! If you’re looking for a personal or business website, contact us today and let us know how we can help! Give us a call, or email us using our contact form here: !