Design comparison
Solution retrospective
This is my second project using React and its the first time I render a list inside a component š.
I chose not to pass props to render social media network name and link address.Instead, played a little with Javascript and accomplished what I want to do.
After my second project using React, I start to have questions about how to structure project folders/files and how small one component can be.
I'm still exploring this subject and read some articles about it.
Community feedback
- @justinconnellPosted 10 months ago
Hi @javascriptor1,
Your solution looks great! - in response to your comment on structuring React code, I had a look at your repo and the way you have the code organised is fine - I pretty much follow a similar pattern.
Just from the perspective of one developer having to take on your codebase, I would not have issues understanding what your code is doing.
One thing I would suggest is you keep the App.jsx component in the src root - that way you import down directories without having to go up and out then down again (if you get my drift)
Otherwise the code is readable, easy to follow and not going to be painful taking on tasks to contribute to the features etc
I hope you find my comment helpful
All the best, Justin
Marked as helpful1@javascriptor1Posted 10 months agoHi @justinconnell,
Wonderful. Thank you so much for the valuable feedback. Indeed, that would be much better.
Rgds,
MKF
1 - @danielmrz-devPosted 10 months ago
Hello @javascriptor1!
Your solution looks excelent!
I have just one suggestion:
š In order to make your HTML code more semantic, use
<h1>to<h6>for titles instead of<p>.The tag
<p>is meant for paragraphs. For titles, we have the HTML headings (the tags<h1>to<h6>).Here's a quick guide on how to use them:
Unlike what most people think, it's not just about the size and weight of the text.
-
The
<h1>to<h6>tags are used to define HTML headings. -
<h1>defines the most important heading. -
<h6>defines the least important heading. -
Only use one
<h1>per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with<h1>, then use<h2>, and so on.
All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
Marked as helpful0@javascriptor1Posted 10 months agoHi @danielmrz-dev,
Thanks for the valuable feedback. Indeed, I forgot to include at least one heading element.
1 -
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