Submitted about 2 years ago

Product preview card component / HTML & CSS with Flexbox and Grid

Ron Wollschläger• 110

@ron-wollschlaeger

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, my name is Ron, and I am from Germany. At first, thanks for your time! I rly, rly appreciate it.

What did you find difficult while building the project?

This was my first challenge and at first I didn't even know how to start. I saw someone scribbling all the needed div boxen and color them. Because I like to work visually, I also tried it out, and it worked fine. After my little sketch, I felt rdy to start with my HTML Layout. Some time later, I was happy about my code, so I started to style it via CSS. I tried to be pixel perfect and also to have nice structure with reasonable comments, for other people who maybe wants to read my code.

Which areas of your code are you unsure of?

I have used the BEM naming convention and I kind of like it, but I am not sure if this is the right way to name my classes, in case of some collaborations. Does it annoy people for its length?
I have made a Button with an a-tag inside. I wanted to have a Button-tag for better understanding of what to expect from it. But I am not sure if only an a-tag would be enough and easier way to create my CTA.

Do you have any questions about best practices?

I am a self-taught "coder" and want to learn more about Frontend and Backend development, but after a while I don't know how good or bad my code is. Would my code be ok to work with? I want to collab with someone in the near future, but feel unsafe about my writing.
Question from above: Does people get annoyed of my class name length? (of BEM in general)
Is there an industry way of doing things? Like how I made my Button, would professional people do it like that?

Thanks in advance for your Feedback and your time you invest to read this! I wish you a wonderful day.

Best Regards Ron Wollschläger

Discord: #8485 pxMahio // Email: [email protected]

Community feedback

Patrick• 800

@PPechmann

Posted about 2 years ago

Hallo Ron!

Congrats on completing the challenge, well done!

Regarding the BEM methodology, it does get a bit confusing with the larger classnames you used for this project. I would have a bit of a hard time, if this was a big project and I had to understand the code. I highly recommend checking out this quick BEM Guide. Basically, you use (card__component), for components and (card--button) for modifiers, for example.

I also recommend working with an editor for these challenges, such as Visual Studio Code or Atom, as the website is unable to track errors properly from Codepen. You will see, that a lot of HTML and accessiblity issues are showing, when I am 100% sure there aren't as many.

Lastly, I highly encourage you to get used to working with rem and em units instead of px, as these are scalable and will make your life much easier in terms of responsivess.

Hope my quick feedback helps, and I am looking forward to more completed challenges from you!

Best Regards,

Patrick

Marked as helpful

Ron Wollschläger• 110

@ron-wollschlaeger

Posted about 2 years ago

Hi @PPechmann thanks for your help!

Regarding the BEM thing. I thought I would be using it the right way, but I used card__full-content__paragraph for example, but in this case I should have used just card__paragraph, right? It sounds easier for other people to read my code.

Yeah, I am using VS Code and I couldn't find any errors, but I am not sure if it comes only from CodePen or something I have missed.

In my next challenge I will try to use rem and em units only, and in general I will keep an eye on learning more about units.

Patrick• 800

@PPechmann

Posted about 2 years ago

@pxMahio Exactly, the shorter you are able to keep the classnames without losing their descriptive purpose, the better.

And yes, most of the errors showing are due to codepen, as @correlucas mentioned. You will see that this will be solved, as soon as you upload your solution via Netlify free hosting, for example.

The units are mostly important for your time, as you will notice that you spend much less on getting bigger project responsive. If you use relative rem units for example, and then simply lower the font-size for the entire html document on smaller sizes, half the work is done already.

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello Ron, congratulations for your first solution!

👋 Welcome to the Frontend Mentor Coding Community!

You've uploaded your solution using codepen and this is nice. But this makes hard to us to analyze your code since this creates a lots of accessibility issues look that you've not 73. This error are not created due your solution, its due the code pen because the report comes from your page.

My advice for you is to use vercel.com or netlify.com that are really easier platforms for live sites and totally user-friendly, in a matter of 5min your live site is online. All you need to do is to connect the Github account, import the repository and deploy it. Really fast. –

Your preview site its not displaying yet, first of all you need to configure the Github Page and update your solution inserting the new link.

My advice for your is to use vercel or netlify since Github Pages its kinda tricky to setup. But if you really want to use Github Pages you can try to follow this guide to use it and fix the settings for your page https://docs.github.com/en/pages/quickstart.

In case you choose vercel.com or netlify.com, in a matter of 5min your live site is online. All you need to do is to connect the Github account, import the repository and deploy it. Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

✌️ I hope this helps you and happy coding!

Marked as helpful

Ron Wollschläger• 110

@ron-wollschlaeger

Posted about 2 years ago

Hi @correlucas and thank you for your great input! 😁✌️

I looked up Vercel and Netlify. I tried Vercel first, but it said that I don't have a GitHub Account to log in, so I switch over to Netlify, and it worked great. In my solution, I switched from CodePen to Netlify, but it seems to take some time to update, or do I have to repost my solution?

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

@pxMahio Yeah, you need to import the github repository into it, its better you just update the solution. If you delete it you'll lose the points and the comments.

Please log in to post a comment

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