All solutions

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

I am proud of creating a nice looking and responsive design for all screen sizes. After finishing the mobile design and then the desktop design, I noticed the sizes between mobile and desktop looked really awkward, so I made my own tablet design to account for those sizes and I think it turned out well. I do think it could be improved on next time and my code could be optimized, but I did spend some time organizing and structuring it so that not too many areas were repeated. This was a great project to practice CSS grid and I hope to explore more features about grid in future projects.

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

I had some issues figuring out Grid and having it do what I wanted to, but using Chrome dev tools really helped and by just playing around with it, I was able to figure it out. I also notice that I spend way too much time obsessing over making the design look pixel perfect from these images and my code ends up having unnecessary spaces in each card and .5rem font-size changes just so the text lines up exactly like the images. In the end, I deleted all that just so the code is cleaner and accepted that without knowing the exact measurements of everything from the design, it's not worth the effort of guessing and checking and creating the perfect design.

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

I came across this issue when creating the tablet view for this project. I don't think it's very noticeable unless there's a device with a really weird dimension, but I would like to understand what's happening.

For the desktop view, I have:

body { height: 100vh; }

because I wanted the content to be vertically centered. However, for mobile, I didn't need this and everything is scrollable and works great. Once I started making a tablet version, I noticed that at longer device heights, the content wouldn't be vertically centered, so I added the body height of 100vh, so it would be. But now, when I decrease the height, it cuts my content off at the top and isn't scrollable all the way anymore. Why does it do that? When I change the screen height, shouldn't the vh change to match and the content remain visible and scrollable? How would I be able to keep things vertically aligned at larger device heights but scrollable and visible at smaller ones?

Thank you to anyone who can help and I hope that explanation made sense.

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

I'm proud that I found this challenge to be pretty easy and it allowed me to understand CSS Grid better.

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

I encountered some challenges with styling the box shadow as many details weren't provided like the color and blur radius, but I just played around with the values till it looked right. It was also a bit challenging switching from flexbox to grid and understanding how both work.

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

After researching a bit on best practices, I assumed that the images used for this particular challenge were more decorative and I ended up having empty alt values for them. However, I was just wondering if others did the same or if I should still included some text that described the icons such as "lightbulb icon" or "magnifying glass with eye".

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

I am most proud of being able to incorporate responsive images and CSS Grid in this project. Both topics are fairly new to me, as I've only dealt with the basic media queries and making layout/ text content responsive, but haven't really applied that to images. I also have always used Flexbox for everything, and I think that understanding Grid provides another amazing option to formatting layouts.

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

I encountered challenges with having the browser choose the right image to display at different screen sizes. I started off using srcset and the sizes attribute to set the widths of both images, but I think that both images being so similar in width, and actually having the smaller, mobile image (686px) have a larger width than the desktop image (600px) was confusing for the browser. I later found out about the picture element where you can specify multiple sources for different media conditions, which ended up being the exact solution I was searching for.

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

I read on stackoverflow that you have to add the class on the img tag to style it, I was wondering how come adding it to the picture element doesn't work?

 //why not this?
   
   
    

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

I'm proud of taking a mobile-first approach to this challenge and having a responsive solution for different screen sizes. I was also able to learn a lot about the list marker pseudo-element and how to use pseudo-classes when styling the nutrition table.

I think some things are easier to do in a Figma design file than to implement with CSS. Next time, I would try not to spend too much time getting every little thing exactly right, especially if it's a feature that doesn't have any significance to the functionality of the website, and very little impact on the page's overall look.

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

A challenge I encountered was trying to vertically center-align the bullet points for the unordered lists, particularly when the text wraps onto multiple lines. I found out that the pseudo-element :marker has limited CSS properties to modify, and some suggested using :before for a more customizable marker. However, when I tried this method, I realized that it required significantly more code (for example, I had to specify width, height and border radius just to create a circle shape, when the default marker is already a dot, and I had to use flexbox to format each list element to achieve the center alignment I wanted). I also came across a weird bug where certain longer list elements would cause the marker to warp from a circle into an oval, despite the width and height being the same. In the end, I was unable to figure out what was causing this warping, and given that using :before required significantly more code than using :marker, I chose to revert back to using :marker and just accepting that the bullet points wouldn't be vertically center-aligned.

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

Is there a simple way to vertically center-align the list marker?

Although it's not noticeable when the list text is only one line, when the list text wraps onto multiple lines, the list marker is always aligned with the first line of text. Is it possible to have it align with the middle of the list text? Would it require using :before and flexbox or is there a better/alternative method?

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

Since there was no design file provided this time, I'm proud that I was still able to recreate the design and have it look pretty close to the final images. I was also able to complete this project much faster, implementing the subtle mobile vs desktop changes accordingly and using responsive units from the start. I have been using Flexbox a lot in these challenges, so maybe next time I would try to practice using Grid.

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

I struggled a bit with getting every unit close to the final design images. I actually ended up changing a few of the values from the original. I noticed the values from the style-guide didn't quite match the design images, so I decided to follow the images rather than sticking to the values given in the style guide. For example, the style guide gave the text-weights: 400, 600 and 700 but I ended up using 300, 500 and 600.

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

I'm still a bit unsure when I should be using em as a responsive unit and when I should use rem. So far, I've only stuck with em and everything looks/behaves as expected, but I'm wondering if certain units should be in rem instead, like maybe layout container widths? Also, I was wondering if min-width values should be in px or some responsive unit.

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

I am proud of learning SASS for the first time and completing a project with it. Next time, I want to try to learn some frameworks like Bootstrap or Tailwind CSS.

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

I encountered many troubles with formatting/positioning. First, I learned that HTML text tags like and have default margins that always mess up my spacing ever so slightly and it drives me crazy. So now, I start with margin: 0; for my text selectors to avoid mysterious spacing issues. Second, I don't know why it's so difficult to center text in a div. Text-align: center apparently only centers it horizontally, but I spent a long time struggling to center it vertically as well. I tried with relative and absolute positioning which required translating Y 50%?!?! and then when the text is finally vertically aligned, setting the position to absolute meant that it was no longer listening to text-align: center. There were also suggestions for using vertical-align: middle, but apparently it only applies to inline and inline-block elements and it doesn't work for block elements. Finally, in the end, I just used flexbox's justify-content and align-items to center it.

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

As mentioned above in challenges faced, I'm not sure what's the best way to deal with these spacing issues. Am I supposed to always select all text elements and give them margin: 0 to avoid random spacing issues? Or is there a simple way to cancel these defaults? Also, how do people vertically center text elements in a div? I think it's pretty common to want to horizontally and vertically center something in a div, so I'm not sure why it was so difficult. Is flexbox the way to go? It feels a little weird, almost overkill, using flexbox for a simple div with only one text element, but that's the only method that has worked for me in this project. Any alternative suggestions would be helpful! Thanks.

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

I'm proud of completing my first frontend mentor challenge. Although it was a simple one and I only used HTML and CSS, I learned a lot about CSS positioning and Flexbox and I feel more confident styling HTML elements moving forward. I also recently went back and fixed up my old solution, making it responsive so I'm pretty proud of this new solution. Next time, I would try to practice using a CSS preprocessor like Sass or a framework like Bootstrap or Tailwind.

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

I've always struggled with positioning HTML elements. I understood what Flexbox is but haven't actually applied my knowledge much in practice. Originally, I thought I had to combine Flexbox with absolute and relative positioning to position elements exactly how I wanted, however I soon realized that using absolute positioning kind of messed up the behavior of the card once the screen size shrunk. I went over my old solution and was able to find a way to produce the design with only Flexbox. I realized that I had to adjust the way I was thinking about positioning to the way Flexbox worked. I was too fixated about positioning the QR code 16px from the top of the container, which is why I thought absolute positioning made sense. Instead, since things were already centered in flexbox, I just had to adjust the spacing in-between components to push it more to the top of the container.

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

I know it's ideal to not use pixel values in order to make a website responsive. However, is it ok for border-radius to be in pixels or do people usually change that to a responsive unit as well?