Responsive social link card using flexbox and tailwindcss

Community feedback

• 

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted 6 months ago

  Hi, congrats on completing this challenge! 🎉

  I checked your repo and can give you a few comments on your solution.

  Does the solution include semantic HTML?

  • ✅ There is a main landmark
  • ❌ Heading order is skipped . The location can probably be a <p> tag instead of an <h> I don't think it has a title purpose.
  • ❌ The list of buttons should be within a list.
  • ❌ Buttons are ment to be links so probably using <a> anchor tag is a good option here.

  Is it accessible, and what improvements could be made? It seems accessible but the use of <a> tag would be more appropriate. Button have no meaningfull purpose here then just being buttons. A link can give more informations that we are clicking a link to go somewhere.

  The current solution breaks if the font size settings of the browser is increased to 22px for example because the height of the card is fixed to a pixel value.

  Does the layout look good on a range of screen sizes? Yes.

  Is the code well-structured, readable, and reusable? The structure of the project is not clear and you could add more content in your readme explaining how you run and compile tailwind for example. You have a package.json but no script is defined so personnally I have no idea how to run that project. I don't understand the link to the two css files index.css and output.css at the top of your html.

  Your custom class names could be more meaningful for example the .anc class didn't made sense at first without checking the html and understanding where you apply it. You can read about CSS methodology, it can help make more readable code that will be easier to transfer to other developer but also easier to maintain in the future.

  Ressource

  • Learn about BEM
  • Learn about CUBE

  Does the solution differ considerably from the design? There are some small differences from the design but overall I think the solution respects the design intention.

  I hope you find my comments helpful for improving your solution and your future challenges. Don't hesitate to reach out if you have any questions.

  Happy coding !

  Marked as helpful

  1

  ---

  

  caspgin•30

  @caspginPosted 6 months ago

  @gmagnenat Thank you for the wonderful bits of advice. I have updated my project accordingly. I have added reasons for index.css (renamed to input.css for clarity) and output.css in the readme file. If you get a chance again, I would greatly appreciate a re-review and your insights. Thank you again. cheers!

  0