@christopher-adolphe
Posted
Hi @Briuwu π
You did a great job in completing this challenge using React. π Below are a few things that I have noticed and you might want check in order to improve your solution.
- On large viewports the
<Social />
and<Overview />
components align to the left side. To correct this, simply applymargin-left: auto;
andmargin-right: auto;
to them or you could applydisplay: flex;
on the<main>
element. - On tablet maybe it would be better to keep a 2 column layout instead of 3 for the
<Social />
and<Overview />
components. At the moment, you have one card overflowing to the next line which creates an unnecessary whitespace. - As for the CSS, it is not as messy as you might be thinking. π You could certainly improve on the organization of your partials. One thing I have noticed though, it would be better to move the compiled CSS in a different directory which you could call
css
and keep your SASS files in another directory calledsass
. This way when you deploy the finished project, only the compiled CSS is bundled in the deployment. However, if this is already being taken care of during the build process, please ignore this comment. π - You could also consider using CSS modules stylesheet, which aim at scoping the style to the component. For example your
<Dashboard />
component would have its ownDashboard.module.scss
file. I think this also greatly helps in keeping your CSS organized. You can read more here
I hope this helps.
Keep it up.
Marked as helpful
@christopher-adolphe Oh wow! thank you so much for this really great feedback! I will definitely gonna take a look at the link that you've provided! (β§ββ¦)γ
@christopher-adolphe
Posted
Hi @Briuwu
I'm happy to help and glad to see this was helpful to you.
I hope you get to practice styling your React component with CSS modules stylesheets in your next challenge.
Can you please confirm me if the SASS files were not present in the deployment with you current folder structure ? I'm curious to know because I have not yet worked with React and SASS in the same project.
Best regards.
Hello! @christopher-adolphe
I'm still new to React so I don't really quite understand this question, but base on my understanding, if you are asking if the SASS files is in the build folder, nope it is not, it's just the CSS files. just like any other normal build.
I hope this answered your question, I'm sorry if I can't really explain it, since I'm still new to this. (>οΉ<)
@christopher-adolphe
Posted
No worries @Briuwu.
I am new to React as well. I will look further into it once I get the opportunity to create a React project with SASS. But I suspect Webpack to be taking care of that under the hood. π
See you on the next one.
Cheers.