@Siddarth-abcsSubmitted about 1 year ago
Latest solutions
Time tracking dashboard
PSubmitted 6 months agoI am always on the lookout for things I could do to make my code more responsive and/or accessible.
Meet landing page
PSubmitted 7 months agoSomething I was wondering about towards the end of this project is how properties should be changed in media queries. There are two ways I can think of: re-assigning the properties directly, or initially setting up the properties to use global custom properties which can then be re-assigned in media queries. I think I've seen both done, but I opted for the former. Interested to know what other people have done.
Testimonials page using CSS Grid
PSubmitted 7 months agoInterested to know if there's a better way I could've handled the grid in terms of responsive design. I felt I had to use a media query, but I wouldn't be surprised if there's a way this could be done without one.
Latest comments
- @AlexandraTndSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
- P@astnioSubmitted 7 months agoWhat 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@jamiethomas1Posted 7 months agoI 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
0 - P@astnioSubmitted 7 months agoWhat 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.
- @Coder-SadikSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Life becomes easy when you learn
grid-template-areas😊.P@jamiethomas1Posted 7 months agoLove 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 helpful0 - @dhiaa-zerSubmitted 7 months ago
