Kikino02• 160
@Kikino02
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
Saeed Bin Mizan
@BluffSet7340
All comments
- Saeed Bin Mizan• 80
@BluffSet7340
Posted
Hey your solution looks really good. It closely resembles the original screenshot, the only difference being in the text in your solution being a little bit more bolder than usual. I also notice that your box shadows are darker but I guess it comes down to personal preference. Keep up the good work!
Marked as helpful
0 - Dmytro• 70
@alkersan
Submitted
Saeed Bin Mizan• 80@BluffSet7340
Posted
So your solution seems to tick all the boxes of an ideal solution. The layouts at different screen sizes are readable. I see that you've made use of Vite, React, and Styled Components for the Frontend, something that I have yet to do. Pretty good.
0 - Linda Jensen• 80
@lindajensen
Submitted
What are you most proud of, and what would you do differently next time?
I'm not sure I'm proud of anything in this project. I struggled a lot and I couldn't even get it right. I mean it looks fine I think, but it doesn't look 100% the way it's suppose to in mobile view (the image isn't right) and the table isn't completely right either. But this was my first time working with tables and like I'm guessing that's what it was suppose to be because it says "The table below shows [...]", but I couldn't get it to look just right.
I hadto redo the challenge because the first time I created it desktop-first but that did not pan out so I guess if I was to redo it I would have followed my gut and used a mobile-first workflow to begin with.
What challenges did you encounter, and how did you overcome them?
I encountered a lot and it really made me feel like I'm not good enough and that maybe I should do something else with my time. Sometimes I'm kind of hard on myself and I mean I haven't even been coding for more than 9 months. But the first challenge I encountered was making the site responsive when going from desktop-first so I just commented out all my CSS and did it mobile-first and then reusing the code that still worked.
The second issue was the image in mobile view. No matter what I did I couldn't get it right. I didn't really overcome it. I just decided that I needed to move on. Looking back at it I'm realizing that I could have posted a question on Discord so I think that's what I'll do next time.
The third challenge was the table. And I didn't overcome that either. I mean I think made it look alright but it's not 100% accurate. So same thing here, next time I'll post and ask about it on Discord.
What specific areas of your project would you like help with?
-
The image: What was the HTML and CSS suppose to look like? How could I have made it look the way it does in the design?
-
The table at the bottom of the page: Was it suppose to be a table? I'm thinking yes because of the use of semantic HTML, but is that correct? Could I have styled it differently? Where did I go wrong?
Saeed Bin Mizan• 80@BluffSet7340
Posted
- I did my solution desktop-first then mobile. So my feedback is given from a desktop-first perspective, then adding media queries for mobile screen sizes.
-
The left and right paddings affect the image as well. A not-pseudo selector that exludes the images from being affected should work well.
-
Use a media query to get rid of the top margin for the image.
-
Super minor but you can reduce the font-weights for the titles in nutmeg (Ingredients, Instructions, Nutrition).
-
For the screen size 320px, I noticed that by reducing the padding-left of the .raspberry selector fixes the issue of the table going out of bounds. It feels like a dirty solution but seems to work.
-
You'll have to repeat the above steps for various mobile screen sizes.
-
Also minor but you could increase the padding of the "card" <div> element to make it look more like the original
-
That's all the feedback I have, everything else matches the original quite well.
-
In my social media links solution, the best feedback I got was being told that rather than focusing on the exactness of the solution, it's better to focus on responsiveness, the value of certain units, and differing layout mechanisms. I think this applies here as well.
Hope the above is helpful!
0 -
- Christian Totaro• 70
@totarochristian
Submitted
What are you most proud of, and what would you do differently next time?
I am very satisfied with the final result! I think next time I might use frameworks like bootstrap to reduce the time.
What challenges did you encounter, and how did you overcome them?
I didn't have any particular difficulties while carrying out this challenge.
What specific areas of your project would you like help with?
Again, I think I should delve deeper into the ARIA rules.
Saeed Bin Mizan• 80@BluffSet7340
Posted
Hey your solution is pretty close to the original design! I think the way you structured your CSS code is pretty neat, something that I'm working on. Regarding accessbility features, a quick Google search should give you useful results. Since I have yet to implement Bootstrap, I can't give you any advice regarding it.
0 - joacomenda• 170
@joacomenda
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of how it ended up looking in desktop, I would try and intregrate more media queries so I can make it more responsive to mobile devices
What challenges did you encounter, and how did you overcome them?
I found difficult to center the container of all the card content to the center of the page, I contained everything into a section element, then I gave it height. Then I styled it using CSS, adding a flexbox to align it horizontally and vertically.
What specific areas of your project would you like help with?
I'm still finding another to put the container in the center of the page, if you have another way, plase share it.
Also, what is the best practice to make a responsive design, to make it look good on mobile
Saeed Bin Mizan• 80@BluffSet7340
Posted
Your method of using the section and styling it accordingly works just as well. But if you want another way, you could try and place the image, the body, and the avatar and author name into 3 separate div elemtents and then add the CSS properties on the body element. That will target all the div elements inside of the body and center the content horizontally and vertically.
For responsive design, it depends. Some people like to start with a mobile first workflow, where they design the webpage for mobile devices first and then use media queries to adjust for desktop sizes. What I did was design it for desktop first and then reduced the width accordingly when the screen width was reduced to that of mobile devices
0 - IAmOrale• 60
@IAmOrale
Submitted
What are you most proud of, and what would you do differently next time?
I started learning HTML & CSS on my own not long ago, in preprations for a 4 month fullstack bootcamp starting soon. This is my 1st project here, I'm proud I was able to get it done, and that it looks pretty similar
What challenges did you encounter, and how did you overcome them?
It was pretty straight forward
What specific areas of your project would you like help with?
I think I'm lacking in the resposivness part of the project, would love to get some pointers threre, I'm assuming I should use some sort of @media, but I haven't really gotten to that part in my studies.
I'd also like to know if I have any lines of code which are redundant, so I can improve on slimming down my code (E.G - a few lines of code which can be replaced by just one that does the same thing)
Saeed Bin Mizan• 80@BluffSet7340
Posted
Looking at the side by side comparison, your solution is basically perfect. Regarding the responsive touch, there's no need to add it as even when you trim the screen size to phone width your solution should fit well. But if you had to, maybe a media query that scales down the container that houses the qr code and text itself, possibly making it easier to scan?
0
