Liked using react-hook-form, very nice tool
What challenges did you encounter, and how did you overcome them?Group of radio button help message
What specific areas of your project would you like help with?Group of radio button, should its legend be voiced by Vox assistant?
Looks very true to the design. Seems to be accessable with a screen reader. Yes, the legend likely should be read to the user, and it is being read for me with NVDA.
🙋♂️ Hello, Everyone,
Here is my solution for the FAQ Accordion.
89% on Google Pagespeed Insights! 🤩ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱<details> & <summary> to create accordion without using JS #️⃣prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨BEM principles to create a consistent structure of TailwindCSS classesCSS files to improve site performance 🚀Do you have any insights to share❔
I'll be happy to hear them. 🤓
Code Together | Learn Together | Grow Together
Looks good!
I might challenge you to extract this into a separate component, and to feed it question/answer data to render in React!
;)
What challenges did you encounter, and how did you overcome them?;)
What specific areas of your project would you like help with?;)
Can't say much about the code, since it doesn't seem to be available and I can't glean anything from a quick look into the debugger.
Looks pretty good! Though, the styles break at the expected mobile screen sizes. Since it's pretty static, this could be resolved simply by changing the max-width of the center card!
I am quite proud of using an external file to store all the contents for the page and just exporting them to the Recipe component. Designing unordered and ordered list can be a bit tricky, luckily Tailwind has utility classes that made it easy.
What challenges did you encounter, and how did you overcome them?I just eyeballed the layout since I didn't have the .fig file. I focused on learning React and Tailwind and just did my best to make the design as close to the mockups.
I am all good for now. Enjoying these challenges. Frontend Mentor is so much fun!
Great job, especially considering you didn't have a figma file! Much closer than I've normally gotten on these so far.
Everything looks great for the most part. I like how you made the component reusable by making it accept a prop, though perhaps it would be better if the parent component fed the actual data into it.
I'm not sure how I feel about the empty Header component. Perhaps that could have been part of the App HTML/styling?
I almost got it 100% . Im happy
What challenges did you encounter, and how did you overcome them?im not sure
What specific areas of your project would you like help with?I am having with font weights and sizes. That is the problem i have with all challenges so far. It is so hard to hit the weight. or maybe is the same but it looks weird on the photo.
Looks like the learner got the design nearly spot-on, nice!
I found when looking at the code, names of components like Card are decidedly vague. It'd expect that to perhaps be a generic card, but it comes with all the social media profile content!
In regards to font-weights, I believe the style guide contains the weights that are used for this project. Might be useful if the learner didn't notice. Without looking at something like a Figma file, I have trouble with that too. The style guide can be quite vague on what exactly should be what size.
I am proud of the way I used the Figma preview more effectively to understand design specifics. I also figured out how to make the image responsive using object-fit and a container with a fixed height.
I also discovered a good work flow. First building the skeleton. Then making it responsive, then filling in the detailed css.
What challenges did you encounter, and how did you overcome them?I couldn't figure out the deployment. I'm getting an error on GitHub pages and Vercel. This is my first time using create-react-app for a project, so there's something in the boiler-plate config or file structure that's throwing it off.
What specific areas of your project would you like help with?Deployment! The index.html is in the build folder and I'm running npm deploy. The command is running in the terminal and returning 'Published' , but I'm getting a 404 on GitHub pages and a syntax error with vercel.
I like the project! Everything seems pretty neat and the code is easy to follow.
Since it seems like the learner has figured out deployment, I only have a couple comments:
To do the font-size challenge without media queries, they likely could have used something like clamp(). It seems like they used a media query anyway.
There may have been a chance or two to add another component, or at least "BEM blocks" with unique class names here (perhaps a "Tag" component and a "Profile" block?). I like the SCSS, but continuing nested styles like this could become quite long, and you may lose it's readability benefits. An alternative to adding more block names/components might be big obvious comments that draw your attention to where styles for certain parts of the card start, like the card footer.
I will make an effort to complete projects faster.
What challenges did you encounter, and how did you overcome them?I had trouble deciding on the appropriate size for the HTML elements.
What specific areas of your project would you like help with?Try to improve your projects with new concepts
One likely shouldn't use <pre> tags to format the headings and paragraphs as the learner did here. Web pages will display differently depending on page size- and that's okay!
Semantic HTML was used in some places, but it seems the learner didn't use a <main> tag like FrontendMentor likely suggested. It's a small change, I'd encourage learners to get in the habit.
Lastly, the design is a little off from the screenshots the peer-review form has provided me. I'd challenge them to try to keep the content as close as they can to a tall, rectangular shape on most screensizes if they hadn't already (can't exactly check rn as the live page seems to be down)
