@uixcem
Latest solutions
Article page
Submitted 4 months agoWell this project i would like everyone to review and leave feedback regarding how code can be shorter especially the css and how should i aprroach future projects and i want to ask people if i can be a good dev with my current skills in the near future. And how to position the social container down when in mobile layout. Any other thing that i may have overlooked is welcome in feedback im open to all types of feedbacks.
Testimonial grid
Submitted 4 months agoWell i would love for other to review my work and give me effective feedback, mostly that only.
Four Card Page
Submitted 4 months agoMaybe postioning of bottom elements exactly the same as the material provided.
Product Review page
Submitted 4 months agoI need help review how i could think of better solution when approachihng this kind of problem, how to use different images for different screen sizes and other clenaer methods of styling that i may need to revise.
Recipe Card
Submitted 5 months agoWell the table part how to have accurate gapping and maybe keep responsive without making the elements going on different lines, nevertheless my confidence improved.
Latest comments
- @demon2316slayer
Overall the solution is good you used sass which i honestly havent used yet maybe ill take inspiration form you. for the hover effect of image you could use filter property, when hovering in the share button I think your js code could be a little simpler over im impressed. Keep going , you've motivated me to improve.
- @njmoon21What are you most proud of, and what would you do differently next time?
I am most proud of being able to quickly set up the sections/articles and divs and format all of them together. I'm also subtlety proud of inserting the background image on the first testimony card, as that was my first time ever implementing a background image.
What challenges did you encounter, and how did you overcome them?Despite setting up the grid layout for the testimonies, I STILL had a hard time trying to line up the image, author name, captions, and quotes properly like in the example images. Although the span of the testimonies are correct, their exact widths and heights aren't spot on...
What specific areas of your project would you like help with?I still need much more practice with grids, because I believe there are still many ways to set up grid layouts. I heard something about no worrying about creating rows UNLESS you need to format something very specific in your grid (Heard from YouTuber Kevin Powell). I'd like to seek some confirmation on whether that is good advice.
@demon2316slayerWow this is spot on. Really impressive i was not able to add the qoute backgorund in the purple card. Your code is clean and its perfect.
- @devdrivenaiWhat are you most proud of, and what would you do differently next time?
This has been the best challenge I've encountered so far.
Was a great opportunity to dive deeper than before and learn further nuances in a few aspects. I will now mention some:
-
Had to dig way deeper into implicit and explicit grid, since I was really trying to make it the "all-implicit-grid" solution work. Even though that doesn't seem possible, I now feel much more comfortable with them and with the decision process. Next time can only feel better now that this is clearer and not anymore a hurdle as before.
-
Been wanting to put to use the container queries and I found this was a pretty good opportunity, not only for the features section inline size to determine the cards grid, but also for each card's size to determine the size of its image. This, in turn also allowed me to use container units (cqi) and container queries with logical properties instead of physical ones, as suggested in this great article and also found in the standards here. All of this was really exciting, too!
-
Finally (and almost as a funny aside), in the last project I had already decided (and stated in my self-feedback) that I was going to tackle the next one first with a minimal reproducible example in CodePen where I would experiment, and then once I had the main ideas in place I would get to code the actual one. Well, guess what, I spent many hours struggling to understand some weird behavior with my pen where things were going tiny upon me resizing viewport UNTIL... I realized how `` tags get reset in CodePen and how you can actually include any meta tag you want there (lesson learned: read the docs, read the docs, ALWAYS read the docs! :) )
Overall, this was a great project and some of the things I learned and/or became more comfortable with will accompany in the coming ones (together with any feedback I receive, of course!).
What challenges did you encounter, and how did you overcome them?Challenges: as mentioned above. How did I solve them? By researching, studying, experimenting with the knowledge and troubleshooting.
For example, my biggest challenge was the decision process for using implicit grid vs grid areas for the layout desired. I studied both deeper and experimented in CodePen with both approaches until I concluded a combination of both through container queries would render that result.
What specific areas of your project would you like help with?I would love to know if it was possible at all to actually do the whole thing just with an implicit grid. I honestly feel like that wasn't possible, which is why I ended up using container queries an creating grid areas for larger screens, which allowed me to set the cards 2 and 3 in the same column.
But is there a way? Or any other suggestion or feedback is welcome, especially with regards to CSS layout and responsiveness which is my main focus right now.
TIA!
@demon2316slayerthis code what can i say is impeccable there is just no way i could think like you. the website is true to the original design provided,now i realize there are people that know so much and so many ways to think and attempt a project.
-
- @AndresOreVelWhat are you most proud of, and what would you do differently next time?
I'm very proud to have been able to make it responsive. I'm very happy with the result. Maybe I'll figure out a different way to do it next time.
What challenges did you encounter, and how did you overcome them?In general terms I would say that it was a bit difficult for me to position both parts, there were moments at the beginning when both elements were out of alignment within the same card.
What specific areas of your project would you like help with?If it were possible with other variants to do the same, but simpler
@demon2316slayerVery well made solution but can improve it by also minimizing the use of height attribute. perfect use of media query. This is very close to design.
- @Majdhorow@demon2316slayer
your website design is good this reflects that you have a taste for designing using html and css. I have to acknowledge that this solution is better than what I submitted I think, it is responsive, but i have one advice to give when writing codes like this make sure to have separate code files so that it is easier to read. Practice more and you'll surely improve.
- @Umar-shah-sys@demon2316slayer
Code is well written and organize and hover effect is cool. Clear understanding of concepts can be seen. Your solution is closer to layout.
