All solutions

Note: This is a resubmission with my live site url now moved to Vercel (thank you @Remus432) .. 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

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

Hi, For this challenge I was practicing with CSS Grid but am still new. Any thoughts on the way I decided to structure the grids would be helpful. I want to make sure that my CSS design patterns are heading in the right direction (as opposed to leaning towards bad habits). I used grids to layout certain sections instead of creating an encapsulating mega grid. The three major grids were the 6 celled one directly beneath the header section, the client testimonials section, and the pseudo image gallery near the bottom.

Also, I used “@media screen” media queries for the different screen sizes. They apply themselves correctly when I use Chrome Dev Tools to change to different screen sizes. I would also like to be able to apply these rules when a desktop user manually resizes their browser window. Is this possible using only Sass/CSS or would I need to handle this with JavaScript?

If any other things stand out that I could improve on, don’t hesitate to let me know.

I know it can be a bit time consuming to review someone else’s code and work so thanks to anyone who gave it a look (both now and in the past).

Thanks

Hello, This was my first time ever using CSS Grid. Any thoughts, meditations, or critiques are welcome. If you would've approached this grid in a different way feel free to let me know. I am looking forward to utilizing the "repeat()" function with the "fr" units in the future but I guess I should just take things one step at a time.

Thanks for the help that everyone has provided me thus far.

Just getting metaphorical reps to stay in the habit of incorporating Sass into my workflow, using more responsive units, and general layout practice.

Any and all comments, critiques, recommendations etc are welcome.

Thanks. And a big thanks to all who've helped me so far!

Hello Everyone,

Any thoughts, meditations, or critiques are welcome.

1. I used jQuery to handle the accordion scripting. If you think there is a more concise way to achieve the effect feel free to let me know.

2. Getting the box to float above the image of the woman was tricky but I think I got it. I'm open to critique or alternate ways of approaching this. To clarify, getting the image to appear correctly on a static page was not to bad. I ran into trouble when resizing the window. When doing so the box would not remain lined up. I may have got it done but I not sure I approached it efficiently.

Again, if something stands out to you that I could improve on feel free to let me know.

Thanks

Hello, For this project I aimed to utilize more responsive units (rems in this case).

I am calculating them on the fly using a Sass function. If you notice any improvements that could have been made in regards to Sass and responsive units feel free to let me know.

This time I also developed in the order of Mobile -> Tablet -> Desktop with more of an emphasis on making sure the design remained acceptable during resizes etc. If you have any design approach suggestions I am all ears.

Also anything else that stands out don't hesitate to point it out. I'd really appreciate it.

Thanks everyone

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

Hello all,

I ended up setting max-width values in the individual cards (colored sections). I didn't know if that approach was warranted or if I should have relied more on percent based sizing (this also pertains to padding as well).

Any thoughts or meditations are welcome.

Thanks

1. Creating the section that contains the music icon, the annual plan text, and the price was a bit tricky for me. I ended up getting that left side done using floats and vertical-align top for the text elements. I was wondering if there was a more efficient way of doing that. Soon I'll be doing some research on css grid to see if I can find alternative means.

2. The way I separated the main top image from the (card) body below seems hacky. But who knows. I was trying to mimic the way bootstrap cards have a header/body/footer area. Any approaches I should investigate?

3. I didn't know if I efficiently included the various ttf files. Is there a catch all method that can grab all of the ttf's for a given font family given a folder? As seen in my css file I used multiple @font-face references.

Any and all feedback or thoughts would be much appreciated.

Thanks Rashid