3 Column Preview Card (Vanilla CSS + Custom Design & Hover States)
Design comparison
Solution retrospective
👾 Hello, Frontend Mentor coding community. This is my solution for the 3 Columns Card Component.
Feel free to leave any feedback and help me improve my solution or make the code clean!
- 👾 I added a Custom hover effect on card w/ the Vehicle Types photo on background.
I'll be happy to hear any feedback and advice!
Community feedback
- @elaineleungPosted over 2 years ago
Hey Lucas, very colorful and creative solution! Just wanted to quickly respond to the question you asked AppiePieGiraffe about
<h1>tags; what you could try is to add it in with some text that describes the site, and then put a.visually-hiddenclass in the tag:<h1 class="visually-hidden">Descriptions and comparisons of three types of sedans, SUVs and luxury cars</h1>There should be some articles out there on how the CSS looks like; I also used it in some challenges, I just don't remember which ones so I can't give you a reference😅
Once again, well done!
Marked as helpful4@correlucasPosted over 2 years ago@elaineleung Thank you Elaine, this is a matter that I was ever thinking about, this challenge in particular I didn't knew if I've to choose randomly which card should have the h1. I'll search more about. 😁
1 - @AdrianoEscarabotePosted about 2 years ago
Nossa eu não vi isso! Meu Deus!
Ficou insano o efeito de hover nos cards, eu estava fazendo este desafio antes do art gallery, mas deu uma preguiça ahuahauhahu admito que fiquei agora com vontade de personalizar ainda mais ele ahuahuauahu
Uma dica para melhorar ainda mais:
Observei que você colocou
min-height: 100vh;em dois lugares diferentes.1- body { min-height: 100vh; }
2- .center { min-height: 100vh;}
Para não ter um código que não é utilizado no nosso código podemos simplesmente retirar o
min-heightdo body.o resto está ótimo!
Espero que ajude!!!
Marked as helpful1@correlucasPosted about 2 years ago@AdrianoEscarabote Essa tá com a estrutura html zoada, fiquei com preguiça de refazer e só estilizei hahaha
0 - @tauri-stPosted over 2 years ago
Your adjustments to the design are beautiful and sleek! Your Readme is nice and to the point, your CSS Commentary is awesome and I will certainly be emulating you more there. There's clearly a lot I can learn from you here and I will probably be scrutinizing your projects multiple times as I continue to learn! I have flagged that resource on BEM to reference for better standardization!
Marked as helpful1@correlucasPosted over 2 years ago@tauri-st thank you Tauri, you're welcome! You'll see that with the time you'll learn a lots and improve your projects. Is since february 2022 that I'm focused on html and css. I've joined Frontend Mentor in may and this fact made a huge difference I learn a lots building these projects and having feedback from the community, before this platform I was stuck doing tutorials and with a lack of motivation to go on.
Feel free to ask me any question, I'll be happy to help you ane see your next projects!
Happy coding Tauri.
1@tauri-stPosted over 2 years ago@correlucas That is so cool and inspiring! I also started exploring HTML and CSS around the same time, in March! I'm in a program called Skillcrush that guided me through building a few larger responsive projects while teaching me foundational layout skills which was incredibly helpful for me and how I learn. Now I'm ready to start doing independent projects. :muscle: Seeing how much you've learned since you've joined Front End Mentor is definitely igniting my drive!
1@correlucasPosted over 2 years ago@tauri-st I went to the skillcrush website and seems an amazing initiative that's cool, is that like a coding bootcamp?
Keep coding and doing the challenges and you'll see that in some you'll become a css magician. 😂
1@tauri-stPosted over 2 years ago@correlucas Skillcrush is a coding school, and it falls somewhere between paid teach-yourself courses like Udemy and LinkedIn Learning and most bootcamps in terms of both intensity and cost! The internet today is an INCREDIBLE resource for everything you need to know with programming and coding, but it was invaluable to me to have a program cut through the clutter so I didn't spend half my time worrying about what I should learn next and searching for the best resources. You've obviously been kicking ass on your own, but I like to spread the word bc they are incredible community and I have grown in many ways bc of them. {:
I'll talk more about my program next week on my blog. I mentioned you too and featured your build bc you are awesome!
Marked as helpful0@correlucasPosted over 2 years ago@tauri-st Wow Tauri! Thanks amazing, thanks for the mention! I'll read this article with calm then. I didn't knew this platform codenewbie seems an good community. I read your article and I saw that you already know JS cuz you're studying dark modes. I don't know nothing about JS yet, my knowledge is currently html/css. I was wondering how to do a dark/light mode button without css then I'll look the work you did with your dark mode repository. Thank you again for the mention Tauri, I appreciate it a lots!
0@tauri-stPosted over 2 years ago@correlucas Oh oh, something I can teach you!! As far as I know, you would always need SOME CSS in order to call in a dark/light mode bc you need to apply the styles for both, like a "dark-palette" class. Set a darkModeButton variable, use a querySelector to select the "body" styles you are changing. Link the darkModeButton variable to the palette changes in an event
darkModeButton.addEventListener("click", function () { body.classList.add("dark-palette"); });That's just to set a button to trigger a dark mode! So easy and fun! You can set conditionals like I did in my challenge to trigger dark mode on and off. {:1@correlucasPosted over 2 years ago@tauri-st oh that's amazing, I'll try that soon doing a new version of the qr code challenge! Thank you Tauri. ✌️
1@correlucasPosted over 2 years ago@tauri-st 👾 Hey Tauri! I've done what you've said, now I've my first solution with dark/light mode and I've used Javascript for the first time(also if I didn't understood not, I'll try that later when I finish all html/css challenges). Thank you for the JS snippet.
Here's my solution with Dark/Light Mode JS: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
Thank you! 😁
1@tauri-stPosted over 2 years ago@correlucas Wow, you're killing it!
When I shared that info with you I didn't realize you hadn't started JS yet! You are right to focus on HTML/CSS/layout skills first, and you are well on your way to excelling with those! And excellent job implementing what I said on the fly!
A friend from my school has recommended Developed by Ed to me, and he's awesome on Youtube so I'll be checking out his JS Animation course in the future but thought you might be interested in his Creative JS course as well which goes over the fundamentals. :)
I will also be checking out this course in the future, to deepen my understanding of JS: Just Javascript, based on understanding how JS works and constructing mental models around its features.
Happy learning!!
Marked as helpful1@correlucasPosted over 2 years ago@tauri-st thank you again Tauri, I'll check ir for sure!
0 - @ApplePieGiraffePosted over 2 years ago
Hi there, Lucas! 👋
Amazing work on this challenge! 👍 The extra touches you added to your solution look great! 🤩
Small tip—it would be worth using only one
h1tag per page. This is a good practice since there should be only one most important heading on a page. You can use less-important headings tags (such ash2andh3) for the the headings in this challenge since there are multiple of them of the same level.Hope that helps. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful1@correlucasPosted over 2 years ago@ApplePieGiraffe How it should be done once there's 3 headings with the same hierarchy? I should choose one just by case and
h2for the other only to don't have threeh1headings? If I set three headings with h1 I wonder to have the accessibility issue saying 'you should have at least oneh1heading...'. Which is the correct way in this case?1@Pawel-GnatPosted over 2 years ago@correlucas This challenge was just a component, so you could just use 3x h2 (without h1). When you will be implementing similar element into your website, then your main heading would be used somewhere else I suppose.
Marked as helpful2@ApplePieGiraffePosted over 2 years ago@correlucas
I was literally about to suggest what @Pawel-Gnat and @elaineleung mentioned! 😆
I wouldn't worry too much about the HTML report complaining that there is no
h1for this page since it is just a component and not a full-fledged website. 😉Nice one, guys! 🙌
3@correlucasPosted over 2 years ago@ApplePieGiraffe ahh, in fact I didn't add only h2's because I was worried for the report that'll say I missed the h1 😂😂😂
2 - @crsimpson5Posted over 2 years ago
Hey Lucas, this is awesome! Love the design and hover effects.
A small improvement you could make with your CSS is to remove the redundant "rounded" classes on the cards. Since you already have a border radius on the container, you can add
overflow: hiddento the container and the cards won't need their own "rounded" classes.Keep up the great work! 😃
Marked as helpful1@correlucasPosted over 2 years ago@crsimpson5 Hey Curtis, thank you for the feedback! That's true, the main .round class was useless. The other .rounded classes for each card I've used to set the border-radius: 0; in the center card when the container becomes a single column and for the card 1 and 3 side border-radius.
1 - @celeste-melissaPosted over 2 years ago
This is a masterpiece! Thank you for being active in the community. Keep calm and code on 🤙🏽
1 - @nerometaPosted over 2 years ago
This is truly amazing, Lucas! Love the hover effect and your take on color that's entirely different to the design.
After seeing this, I HAVE to follow you man. You're that amazing😀
1@correlucasPosted over 2 years ago@nerometa Thank you Nerometa, you`re welcome! Your message make my day!
0 - @snehamoybagPosted over 2 years ago
Damn this is so cool! 😯🔥
1 - @AhmedAlhareesPosted almost 2 years ago
WOW! what an amazing vision for this challenge.
0 - @chukwudobe-MicahPosted about 2 years ago
Really nice work, I want to ask .. what's the difference between -webkit animation and animation? I checked google but I'm not getting the answer I require. I see you use WebKit a lot.
0 - @imranhossainemiPosted about 2 years ago
hey , what is main purpose of "box-sizing: border-box;"? When I should use it?
0
Please log in to post a comment
Log in with GitHub
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