Any tips for better accessability, or organization in React projects would be nice!
I'd like to know how to manage accessibility when JS is involved and showing/hiding content on screen when users click things.
Any comments on the accessibility of my approach with the invisible radio buttons would be appreciated.
I researched how to center the bullet points vertically with long text, but couldn't exactly figure it out. Admittedly, my research was haphazard and I kind of just tried stuff.
I could have made custom bullet points, but I wasn't exactly feeling that. If there's a way to do it without creating custom bullet points, a hint would be nice!
If I were to get any suggestions, I would ask suggestions on how I can manage Component styles more effectively.
Nearly always, for bigger projects, I find that I want to re-use some component but the styles I applied to it aren't great for what I want to do. That didn't crop up in this project though.
If I were to receive help, I think I'd like pointers relating to managing the size and shape of centered layouts like this one, and in the QR Code Component project.
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.
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.
