What are you most proud of, and what would you do differently next time?
I'm currently on the learning path of Frontend Mentor and this challenge is very good when it comes to learning CSS Grid.
I've also used lighthouse and got 100/100 overall score.
What challenges did you encounter, and how did you overcome them?
The actual challenge was to figure out how to set the values of grid-column and grid-row correctly, it took me a bit of time but after few adjustments everything was good.
What are you most proud of, and what would you do differently next time?
I've already done this challenge before, but I did again because it's included in the learning path so all good. I've used this time sass and lighthouse which I didn't last time.
What challenges did you encounter, and how did you overcome them?
I tried to do it using CSS grid and not adding the .column and .column-2 classes but I failed, I'm curious to know if that's possible.
What are you most proud of, and what would you do differently next time?
I took way more time than needed on this challenge, so inshallah I'll try to be faster next time.
What challenges did you encounter, and how did you overcome them?
This was a good challenge, as it differs from the other challenges from the learning path with the presence of two images one for desktop and another for mobile. It took me some time to figure out how to make it work when I deployed it on GitHub.
First, as I've been using the mobile-first design I put the mobile image on the HTML with the `` tag and then changed it with a media query, it did work locally but not on deployment.
So to make it work, I've put both the desktop and mobile images on the html file, and using the media query I've changed the display property from "none" to "block" and vice versa and that resolved the problem.
What specific areas of your project would you like help with?
I've got a problem concerning the performance of this page on mobile devices as I couldn't surpass 93/100 score on Lighthouse. I tried to change the image format from .jpg to .webp which dropped the image size by nearly 50%, and I also changed the fetchpriority attribute of the images using both values "low" and "high" but it didn't work.
I would love to get some help from you guys on that.
What are you most proud of, and what would you do differently next time?
I'm proud of the overall result. But what I would do differently next time is to focus more time on analysing the design before making the html mark-up, because it took me a lot of time to correct it when you already settled all the styles.
What challenges did you encounter, and how did you overcome them?
Of course when there is no Figma file, it's a bit difficult to guess to sizes.
For me the challenge was that I need to figure out a way to change how the image looks like switching from desktop to mobile, but I've done it by splitting the recipe element (which contains that white card) into two divs, one for the image and the other for the text, and with media query I've managed to make it look similar the the design.
What specific areas of your project would you like help with?
I would like to know if I used the correct html element for this challenge.
I welcome any of your feedbacks.😊
What are you most proud of, and what would you do differently next time?
I'm currently learning SASS, so I started to implement it bit by bit on Frontend Mentor challenges. So, I've added partials which improves modularity and reusability, this is a small project so its benefits are not that noticeable.
What challenges did you encounter, and how did you overcome them?
The biggest challenge on this project was that they didn't provide the Figma file, so it's a bit difficult to be accurate with widths and font sizes.
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
I've just done this challenge and I'm very proud of it, I added a bit of animation on hovering the card, it looks nice. I also did got 100% overall on Lighhouse both for desktop and mobile devices. I've also used SASS, but I'm still learning how to use it.
What challenges did you encounter, and how did you overcome them?
One of the problems I encountered (I'm not sure if it is on topic) is that I took time figuring out why the font didn't work when I deployed my code on Github but the solution was that I should've inserted that path this way ../assets/fonts/ not this way /assets/fonts because when the sass get compiled the URL becomes https://aymaneonline.github.io/assets/fonts/ which is not where it is suppose to be.
Other than that, the only difficult thing was to use SASS as I'm currently learning it as I mentioned.
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
I've done this challenge as it was part of the Frontend Mentor learning path.
I've used SASS for the first time and also Lighthouse extension which I've got a score of 100% overall for desktop devices.
Please if you've got any remarks or mistake to point out don't hesitate.
What challenges did you encounter, and how did you overcome them?
The only for me challenge was to implement SASS into my solution, as it was the first time I'm using it.
What specific areas of your project would you like help with?
The most difficult part for me was to add the two background images correctly to maintain responsiveness. I would like to receive some feedback guys. 🙂
The most difficult part on this project was the Javascript code, but it was good to learn.
There is one problem (I think) on my screen when I press submit without filling any of the inputs some elements go outside of the screen and cannot be visible.
If you got any solution for that, or any other things that you found not correct in my code I would like to give me some feedback. 👍
I would love to receive feedback from you guys, specially if you've done the bonus part (Using the local JSON data to dynamically populate the content)
