3 Column Preview Card (Vanilla CSS + Custom Design & Hover States)

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

@AdrianoEscarabote Essa tá com a estrutura html zoada, fiquei com preguiça de refazer e só estilizei hahaha

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

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

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

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

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

@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. {:

@tauri-st oh that's amazing, I'll try that soon doing a new version of the qr code challenge! Thank you Tauri. ✌️

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

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

@tauri-st thank you again Tauri, I'll check ir for sure!

@ApplePieGiraffe How it should be done once there's 3 headings with the same hierarchy? I should choose one just by case and h2 for the other only to don't have three h1 headings? If I set three headings with h1 I wonder to have the accessibility issue saying 'you should have at least one h1 heading...'. Which is the correct way in this case?

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

@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 h1 for this page since it is just a component and not a full-fledged website. 😉

Nice one, guys! 🙌

@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 😂😂😂

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

@celeste-melissa Thank you Celeste! 😉

@oluwa-busssy-olami Thanks Busoalmi! You're welcome!

@nerometa Thank you Nerometa, you`re welcome! Your message make my day!

@snehamoybag Thanks bro!