Responsive qr-code card using pure CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Amaury, congratulations for you challenge solution!

  Its fine that you've used normalize css, I don't this will cause too much performance issues, but note that using normalize css you'll be nor aware od many problems/errors since the normalize fix a lots of stuff, so if someday you work ina project without normalize, can be that you'll be not aware of the default behavior of many properties in CSS.

  You can set the main properties you use in the top of your css sheet using the * selector isntead of import all normalize css sheet. Example * {margin: 0; padding:0;} and img { display:block ; line-height:0;} you can set your own css normalize and set your default properties and have full control of what you're doing. Every time I start a new project I've my css sheet with some properties reset like the margins paddings and etc. Note that isn't a problem use normalize css I was only giving you another point of view ok?Hello Saiful, congratulations for your solution!

  Keep coding bro and keep it up. I hope my comment help you in some way. ✌️

  Marked as helpful

  1

  ---

  

  Amaury Franssen•180

  @ExploryKodPosted over 2 years ago

  @correlucas

  Thank you bro for your reply, it is inspiring and give me a good advice.

  Indeed, if I use such methods as normalize.css or the other one "reset.css" I'll lose the bugs I need to encounter to understand what really happen, how CSS/HTML work under the hood. I used my own reset file that I call "base.css" and I add what you said in it and some other stuff but normalize.css shows me that it is more complexe that I thought. It may be useful to understand each of its css rules now rather than blindly putting "normalize.css" in my stylesheets.

  I also have a problem in my deployment : I didn't anticipate that by using netifly it would of course not deploy it (as it is imported in node_modules with npm and I haven't a build). So I will rewrite it.

  My other problem is my semantics: the use of "section" may appear a good choice at first sight but it is possible that for card component like this it is not the good choice. SEO may be less optimized and it triggers 4 html issues : a parent <section> implies h2 to h6 childs according to frontend Mentor report so I made a mistake using it to divide my card layout.

  Thank you if you read me until this line, I wrote a big reply ;) I wish you good and enriching coding moments today :)

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @ExploryKod hey Amaury, thats fine, I hope you don't felt judged by my comment about the normalize was only a tip, hope you get me. About using Netlify i stopped to use because I had a similar issue since then I use only vercel.com because is much more simple and user friendly, I think Netlify requires some previous knowledge to use, so I jumped to Vercel and works really good till now!

  I was curious so I read your report and I think that to solve this accessibility issues you need only to add one H1 and follow the sequence of headings without jump from one heading to another, I'm not sure but u can try that, add h1 and switch between <section> to <main> wrapping all the content as a container. I hope this fixes this issues, but you can write me then to say the results, ok?

  Happy coding bro 👏👏

  Marked as helpful

  1

  

  Amaury Franssen•180

  @ExploryKodPosted over 2 years ago

  @correlucas hi Lucas, I don't felt judged, on the contrary I was surprised how good the first comment I receive on this site was, indeed I believe I would have no comments on my solution as it is one of so many. I will now use vercel more, I just used it and it is a very good tool.

  I fixed the accessibility issue, I didn't know h1 was compulsory and so I learn more. I will wrap my content as you say or try to avoid section as they require hn title according to the report.

  Have a good coding day too bro.

  0