@Siddarth-abcs
P
Jamie
@jamiethomas1All comments
- P@jamiethomas1
Nice one
- @AlexandraTndWhat are you most proud of, and what would you do differently next time?P@jamiethomas1
Good
- P@astnioWhat challenges did you encounter, and how did you overcome them?
This challenge was difficult in that I was not sure how to transition the share buttons from the mobile layout to a desktop layout. Once more, I have started from the mobile view, however I feel as though it would have been quite a challenge going from either layout to another.
It was a challenge because it is hard to decide how to manage the pop-up. Starting in either view is easy, as you simply base it off the parent that it may be nested under, but the location changes completely once in the other view. One solution I was thinking of was to simply have two of these, and just disable one when the layout changes. Having two of those to update seemed counter-productive, though, so I tried to keep it to juse a single one.
I was also considering using JavaScript to move the element around, as to base it on another parent per layout. That probably would have worked, but seemed overkill for this simpler project.
What I ended up doing was giving the element an absolute position, and just manually tweaking the location until it was centered where I wanted it to be. This solution does not feel great to me, as any layout change will end up messing it up, however the card has a set with at the desktop, and the mobile view is fine because it is contained within its parent anyway.
I cannot say I am really proud of the solution I came up with, but I felt as though it was the simplest to implement without going overkill on JavaScript or creating duplicate elements.
P@jamiethomas1I can see you had the same dilemmas as I did around which containing block the share div should have. I like the transitions you've added for the button & share icons. Great job
- P@astnioWhat are you most proud of, and what would you do differently next time?
Most of what I used in this project was stuff I have already known. Some new things I tried was how changing the color of the buttons on their hover and active states using filters, instead of hard-coded colors. There was also a version number in the buttons that was a slight tint of the background of each button. I thought it would save some lines of code if I just had the tint dynamically change based on the background, instead of having to manually enter a tint value. I did this by using mix-blend-mode for the text, which was something I didn't know about until this project. Using overlay with a 75% opacity really helped with this effect.
What challenges did you encounter, and how did you overcome them?I feel like I used a lot more CSS than what may have been necessary. I tried to go for a mobile-first approach again, and started with the smallest screen size design. The transition from that to tablet was actually quite easy, but from tablet to desktop became more of a challenge.
The hardest part for me was turning the single image of the circles in the header. In mobile and tablet it was quite simple, but then it splits into two different images that surround the text in desktop mode. The hard part for me was creating the transition from tablet to desktop, and then managing the look of the split images while keeping it compatible with the tablet and mobile mode. I feel like I got a working solution that looks good, but I don't know if my implementation is very effecient.
P@jamiethomas1Very good, love your take on the button effects.
- @Coder-SadikWhat are you most proud of, and what would you do differently next time?
Life becomes easy when you learn
grid-template-areas😊.P@jamiethomas1Love the extra grid layouts for in between mobile and desktop, missing the font though. Needs to be imported at the top of the CSS file.
Marked as helpful - @dhiaa-zerP@jamiethomas1
yes
- @MosacdWhat are you most proud of, and what would you do differently next time?
I think I should learn grid and use percentage values for fonts
What challenges did you encounter, and how did you overcome them?I had a little trouble dividing up space between the given picture and the text article for the desktop version. I just set max width for the article to 300px and it worked I guess.
What specific areas of your project would you like help with?I have a little trouble on deciding where to set break points and I'm still wondering how responsive it is supposed to be. This version looks normal for desktop and intended phone version, but I don't like the way it looks on different types of screen sizes when it comes to phones and tablets (since they mostly have different size ratios and zoom). Writing media queries for each of these seems a bit excessive. (next Time I'll just try to fit it on tablet too I guess).
P@jamiethomas1yes
- P@dantviWhat are you most proud of, and what would you do differently next time?
Completing the challenge.
What challenges did you encounter, and how did you overcome them?I had some trouble with the nutrition table. At first, I used the HTML table but it was really difficult to style. Then I changed it to CSS Grid instead and it became much easier.
What specific areas of your project would you like help with?Any feedback would be appreciated.
P@jamiethomas1yes
- @aliaboelhassenP@jamiethomas1
yes
- @YOmnAA98P@jamiethomas1
Yes
- P@jamiethomas1P@jamiethomas1
sorry i know this isn't the task, it's just silly that you can't complete a challenge without giving out links and setting up hosting, i'm not going to do that. i don't want feedback and i don't want to give feedback. i'll happily pay for pro but i'll use the features i want to use and not the ones i feel forced on me
- @SyedKazmi28P@jamiethomas1
Yes
