Skip to content
OverviewSolutions
10
Comments
3
Rashi
@shangum

All comments

  • Rashi•165
    @shangumSubmitted almost 3 years ago

    Hello All, This is my first Frontend Mentor React project. I took an online course that introduced me to React some months back but haven't had a chance to try creating and deploying a project in the wild yet.

    For this project I implemented the design using only two functional components. If you see any improvements that can be made feel free to mention them.

    Since this project was mainly used for me to get my feet wet using React I only have one explicit question. Does anyone have any resources on the best way to deploy a React app to Github pages?

    Usually I use the web interface as outlined at this web page: https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248

    I had some trouble getting my React app deployed to Github Pages and ended up getting it working using a convoluted method that I'm sure can be improved upon.

    Here are two other web pages that I initially used to guide my code deployment: https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

    https://www.pluralsight.com/guides/deploying-react-on-github-pages

    Moving forward I want to get more comfortable with deploying React code to Github Pages but in this case I figured done is better than perfect for my first project.

    Thanks to all who have helped so far. And Thanks

    Responsive Price Component using React

    2
    Rashi•165
    @shangumPosted almost 3 years ago

    Resubmitted this challenge here: https://www.frontendmentor.io/solutions/interactive-pricing-component-using-react-and-sass-UiWQExOca

    0
  • Taruna•305
    @Tiyana19Submitted about 3 years ago

    This is my second project on Frontendmentor. I have used grids in this project for the first time so, please let me know your thoughts and feel free to give me suggestions that how can I improve my project. and also I have few questions: why it looks like that the width that is set for my card get shrink on the Github page. also, the font size looks bigger on the Github page.

    Responsive stats card using flex

    1
    Rashi•165
    @shangumPosted almost 3 years ago

    Hey @Tiyana19 I checked out your design. I am fairly new to front end design myself so please take my points with a grain of salt.

    I noticed that when viewing your project on mobile (screen width of 375px) that the design does not appear to be responsive. At this size the purple image should be appearing above the text as opposed to being on the left side. I believe that updating the “grid-template-columns” value when the screen width is smaller may do the trick in this case. Feel free to investigate. Also don't forget about the "mobile-design.jpg" file.

    Your question - “why it looks like that the width that is set for my card get shrink on the Github page” ..… I am not clear on what you mean in this question. Perhaps investigating the “min-width” and “max-width” rules would help you here. Also some left and right margins could be useful for keep your card from touching the screen edges on smaller screens.

    Your question - “ the font size looks bigger on the Github page” … I didn’t notice anything odd with your font sizes. Are you comparing the font sizes of the Front End Mentor design previewer with your GitHub pages design? It could be that the previewer on Front End Mentor is slightly distorting the design causing it to look smaller on here. Just my guess.

    Way to go otherwise. Hopefully some more experienced designers can give you some better feedback and correct/adjust the things I mentioned above.

    Hope it helped a bit.

    Marked as helpful
    1
  • Rashi•165
    @shangumSubmitted about 3 years ago

    1. When using responsive css units is it common to begin using them from the beginning in design or do most people start with pixels and then convert those pixel values to responsive units?

    2. I was a little paranoid about getting the hue and brightness of the image correct. It seems like mine is a little bit darker but I left it as is. At one point I was playing around with the idea of having a white/gray div overlay with a super low opacity. My thought was that would make the body background as well as the image purple a tad lighter. Is this approach common or should I be more concerned with properly setting the "mix-blend-mode" and playing with the opacity of the color behind the image?

    3. I added the css rules targeting a tablet of size 768px as a bonus. When designing for the 3 main screen sizes ( Desktop, Tablet, and Mobile) what are the general rules of thumb that are used when doing these layouts. Aka what are the screen sizes or constraints that you usually start out with? (Note: it wasn't to bad for me during this challenge since the style guide said to target 1440px and 375px)

    Feel free to dish out design pattern critiques or thoughts/meditations.

    Thanks

    Stats preview card component using flexbox mobile first design pattern

    2
    Rashi•165
    @shangumPosted about 3 years ago

    Hey @pikamart . Thank you for the information. It was beyond useful. Currently I am currently in the beginning phase of another challenge and will make sure to implement it in the manner you suggested.

    Right after I will update the code for this project in an attempt to cement the concepts.

    Wish me luck as I now need to take the Sass leap of faith.

    Thank you again for taking the time to review my submission!

    0