All solutions

What are you most proud of, and what would you do differently next time?

Finishing the project and getting to use js to add functionality to projects.

What challenges did you encounter, and how did you overcome them?

1. At first when I added a second event listener within an event listener both of them were being executed on single click and it wasn't working one after the other like it's supposed to chatgpt suggested using stopPropagation() and I did that.

2. I wasn't able to figure out how to do the active states for both mobile and desktop using CSS so I used JS. For JS, I went with simple innerWidth property.

What specific areas of your project would you like help with?

What would have been the best approach to deal with active states. Can it be done using CSS or is JS required?

What are you most proud of, and what would you do differently next time?

I'm happy about the banner images and how I used background properties to deal with them. Not sure if it was the best approach or I should have added them using html.

I would like to write better css next time and have a proper arrangement for scss.

What challenges did you encounter, and how did you overcome them?

I was struggling with finding out the best approach to add the banner images. I thought maybe I should add them using or maybe image-set but I wasn't sure and I wasn't able to achieve what I wanted so I just went with adding them using url() with background-image and then using media query to replace the image.

What specific areas of your project would you like help with?

I would like help with this banner project thing what would have been the best apprach. Like should i have added them in html and then used media queries or maybe use or srcset or image-set?!

What are you most proud of, and what would you do differently next time?

Completing the project.

What challenges did you encounter, and how did you overcome them?

There weren't really any challenges as I did the grid game recommended previously before starting the project so solution was pretty straightforward.

What specific areas of your project would you like help with?

I still struggle with using clamp(). I wanted to use clamp to position the background single quote but couldn't figure out correct clamp values so just went with one value that works for the desktop.

What are you most proud of, and what would you do differently next time?

I'm proud of figuring out on my own the desktop layout although I'm not sure if it's too complicated or not. I wanted to restrict myself to using flexbox only for both mobile as well as desktop and see if I could figure things out.

What challenges did you encounter, and how did you overcome them?

The desktop layout was tough to figure out (I only wanted to use flexbox for desktop as well) and I was trying out a bunch of things like align-self and stuff but nothing was working out and I didn't want to google the solution so I just kept on trying and then it suddenly came to me to use flex-wrap with max-width and here we are!

What specific areas of your project would you like help with?

I put an additional restriction on the project by using flexbox only for the desktop as well so I would like to know was my approach too complicated or is this the general approach if one wants to do the desktop layout using flexbox?

What are you most proud of, and what would you do differently next time?

Completing the project.

What challenges did you encounter, and how did you overcome them?

I found using calc(rem + vw) with clamp challenging. Like what would be the apt value for the calc was a bit tricky to figure out. I just went with instict then and just played around with diff values until i liked the font size on the 320px mobile and 1440px desktop screens.

What specific areas of your project would you like help with?

Whether my use of picture element was correct or I should have used srcset. And any help with fluid typography or any other areas of the project.

I would also like help with google fonts. Earlier they used to have a feature where you could download only font weight that you need now it seems like you have to download the whole family even though you might need only 2-3 font weights. How can I choose the specific font weights only?

What are you most proud of, and what would you do differently next time?

I think that I'm proud of getting close to the design.

What challenges did you encounter, and how did you overcome them?

I really struggled with figuring out the correct tag for preparation time section. I was thinking of using tag but thought maybe it won't be apt for this so ended up using section tag but then the heading for prepartion time was smaller compared to other hedings so had to use for that but then that would mean having an tag before so I put prepation time section in the end in html and then used css to bring it at the top.

What specific areas of your project would you like help with?

I would like help with the preparation time section how could i have done that or did I do it correctly or not?! And also the semantics of other things as well.

And also the image thing for mobile I used media query to make position absolute was that the right approach?!

What are you most proud of, and what would you do differently next time?

That I used flexbox and position to center the card but with responsive media query for smaller screen changed it so that user can scroll and so that the footer doesn't behave weirdly.

What challenges did you encounter, and how did you overcome them?

The main challenge I encountered was to do with deciding the colors of the design.

What specific areas of your project would you like help with?

I would like you to check if my html is semantic. If you have any other suggestions as well they are most welcome!

What are you most proud of, and what would you do differently next time?

I'm proud of figuring out how to use the font files given with the project and not using google fonts cdn even though it'd have been valid to do so?!

I'm not sure how good display:grid is for centering things so maybe next time I won't go for that!

What challenges did you encounter, and how did you overcome them?

I wasn't initially able to figure out how to load the fonts but I didn't want to use google fonts cdn and take the easy way out so I googled and came across font-face and voila was able to use the fonts provided!

I'm also proud of figuring out how to make fonts responsive without media queries at first I thought of using vw or vh only then I thought of minmax() and then I remembered learning about clamp() so I refreshed my memory looked up the syntax again for clamp() and got to work! I was afraid though that using clamp() was extra and most people must have figured out how to do the same without using clamp() but then I saw one other person using it so now I feel less alone!

What specific areas of your project would you like help with?

So I need help with getting rid of vertical scrollbar even though body is set to 100vh for desktops or mobile screens with enough height that can accomodate the whole thing without scrolling and yet a scrollbar comes. I tried some ways but had to let go eventually because nothing seemed to work.

What are you most proud of, and what would you do differently next time?

I'm proud of the fact that I was able to finish it in the time I estimated. I'm proud of using scss. And, I'm proud of making it fully responsive with only a few media queries.

What challenges did you encounter, and how did you overcome them?

How to connect scss file with html and how to use mixins. I googled how to do these things properly and that helped.

What specific areas of your project would you like help with?

I'd like to know how can I make this accessible!

Q: What did you find difficult while building the project? A: Figuring out how to use media queries with SCSS. I couldn't figure out the best way so I went with the basic one.

Q: Do you have any questions about best practices? A: Yep, what's the best way of writing media queries with SCSS that also follows a mobile-first approach? I was hoping to follow this approach that I found online: https://medium.com/@hallodom/the-solution-to-media-queries-in-sass-5493ebe16844 but wasn't able to do it so just went with the basic one.