P
Marc Francis• 520
@marcfranciss
Submitted
P
Ian Parker
@i-prkr
All comments
- PIan Parker• 180
@i-prkr
Posted
I really enjoyed looking at your solution! It was interesting to see the jQuery approach, and the form looks really nice, I especially like the debounced input!!
One suggestion I had was to help make the images responsive with media queries, using the
<picture>element and providing the two different sized images. I found the web dev article really helpful for these: https://web.dev/learn/design/responsive-images. I think possibly theobject-fitproperty could also be used here to help keep the sizing consistent between screen sizes.Thanks for your solution, I hope this might be of some help!
Happy coding :)
Marked as helpful
0 - PVictorGerfaud• 210
@JamesLaviron
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of the way I decided to fully commit on mobile first. I'm also porud of my use of media queries combined with flexbox/grid layout.
What challenges did you encounter, and how did you overcome them?
I encountered challenges in order to separate which CSS had to go in which class. I tried to keep generic and specific css separated in order to make easily reusable.
What specific areas of your project would you like help with?
I'd like help with the use of
@useinstead of@import. If you got some improvements on images management, don't hesitate also :)PIan Parker• 180@i-prkr
Posted
This is a great solution!! I enjoyed looking at it and it looks very good.
I am not familiar with Vue projects yet so I am not sure what to suggest, but it appears as though
<header-content>images are not changing for smaller devices and is still showing the 'left' and 'right' images meant for desktop. I can see in Vue.app where the isDesktop() function is being used to change the image but it might not be working correctly? I've tried it on chrome and firefox.Also with regards to using
@useand@forwardfor sass, I found a video on youtube really helpful, by Kevin Powell. https://www.youtube.com/watch?v=CR-a8upNjJ0Great solution!
Marked as helpful
0 @Cosaldi
Submitted
What are you most proud of, and what would you do differently next time?
This is my first time using javascript, the code is not perfect enough but yeah i have to read about DOM and other things.
What specific areas of your project would you like help with?
any feedback are welcome.
PIan Parker• 180@i-prkr
Posted
Great job on the solution, I enjoyed looking at it and liked how you've structured things! It made me consider improvements for my own solution.
I'm still learning and understanding best practices, but I found this article and used it to try to make the share icon links more accessible. You might find it helpful, I used the method of inserting an invisible screen reader only
<span>with each link that can be read by screen readers for improved accessibility. (https://urm.wwu.edu/accessibility/guide/graphics-used-links-and-buttons-need-accessible-names.Also I noticed that your font family doesn't have the 'sans-serif' modifier when declared, doing this should help to make the solution look a bit more like the design.
Nice work!!
0- Pwebdevbynight• 240
@webdevbynight
Submitted
What are you most proud of, and what would you do differently next time?
I learnt the
image-set()CSS function to serve several resolutions of a same background image. For the next time, I will try to create a mixin or a Sass function to manage theimage-set()content to avoid some repetitions.What challenges did you encounter, and how did you overcome them?
The Figma file does not separate the green filter from the background image on the footer. I overcame by using the image located in the starting folder and applying a background colour on a pseudo-element covering that image.
What specific areas of your project would you like help with?
No particular help requested.
PIan Parker• 180@i-prkr
Posted
Thanks for your solution! I enjoyed looking into your Sass implementation and different approach, the solution looks really nice. Getting more familiar working with images it was helpful to see how you have inserted the images in the solution. I took the chance to look into
image-set()so thanks for that!I noticed that the images in the photo gallery zoom in and change shape particularly in the larger medium screen sizes, was this intentional? I think it still looks great - but for my own undestanding is this coming from using
block-sizeandobject-positionon the images to make them uniform given they are different sizes and shapes? Rather than letting the grid size them automatically?0 - PSergei Borja• 700
@wonderlust101
Submitted
What are you most proud of, and what would you do differently next time?
Proud of my uses of mixins and made my site more accessible.
What challenges did you encounter, and how did you overcome them?
The design is rather inconsistent which caused me to create more styles than usual.
What specific areas of your project would you like help with?
None.
PIan Parker• 180@i-prkr
Posted
This is a great solution and I have enjoyed looking at how you have used Sass and BEM, as I begin to get familiar with them myself. I was quickly able to see how mine could be improved so thank you!
I cannot think of anything that I would suggest to change, however I did notice in the medium screen size layout the bottom card has a large amount of space on the bottom. I tried applying
display: flexandjustify-content: space-aroundorjustify-content: space-betweenon the.testimonialclass. It helped correct the space but does alter the look of the cards a little - what do you think? Is there another approach you would take instead?I also when doing this challenge came across this article that I used to help apply the different background colours: https://blog.favouritejome.dev/lets-build-a-multi-coloured-card-component-using-sass. I'm curious as to what you think! Particularly as while this solution may mean there is less code, I really like how your solution is very easy to read according to the BEM methodology.
Thanks for a great solution I really enjoyed looking at it!
0 - PRastislav Hepner• 180
@raswonders
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of finishing some grid theory before starting challenge.
What challenges did you encounter, and how did you overcome them?
Applying different bg color on card stripes was little awkward on dynamically created elements, but I've managed with use of array of predefined tw classes. Also realizing that i can center grid elements easier with odd: tw modifier was cool.
What specific areas of your project would you like help with?
Anything really. Something is inaccessible? Weird or clunky? Let me know. Thx 🙏
PIan Parker• 180@i-prkr
Posted
This was a great solution to look at, and interesting to see the use of React and Tailwind for it! The only suggestion that came to mind was that while doing this solution I discovered the element
<hgroup>and found this a good use case for it. Thanks for the solution!1 - Adrian Albino• 100
@adrianalbino
Submitted
PIan Parker• 180@i-prkr
Posted
Thanks for the solution, and the typography looks great and the html looks very clean. To help with the responsive design try using the <picture> element, and swapping out the mobile image with the desktop image using <source>. Applying block-size: auto should also help the image maintain its correct sizing. To help with the responsive design try experimenting with the clamp() function for font-size, defining it in the html element in CSS. The web.dev link for responsive design given in the learning path had great explanations of these.
0 - PJose Sebastian• 270
@wolf2lyon
Submitted
PIan Parker• 180@i-prkr
Posted
Thank you for your solution to look at, it looks great. I found it helpful to see and you have well structured css and html. One suggestion I would have is to examine the spacing around elements, the padding around the edge of the card could be bigger, and alignment of the content in the table to make the solution more exact.
0 - Emir Can BULDU• 110
@canbld
Submitted
PIan Parker• 180@i-prkr
Posted
This design looks exactly correct and I have enjoyed how your code is minimal and very clean. It has helped me to consider how my own code could be more concise. I couldn't find anything I would suggest to improve, well done 👏
1 - P
@mickoymouse
Submitted
What are you most proud of, and what would you do differently next time?
Got to learn about some things about hierarchy selectors. Will definitely try to learn more about them.
What challenges did you encounter, and how did you overcome them?
Not being able to select some elements/classes. Turns out I was doing it wrong since I didn't even consider the dom structure.
What specific areas of your project would you like help with?
As usual, mark ups and whatnot.
I used an article since I thought this can be put in any website as a standalone component. Not sure if my assumption is right but from what I've learned so far it should be. Please let me know otherwise.
Feedbacks are greatly appreciated!
PIan Parker• 180@i-prkr
Posted
I really liked your solution and how you have used pure css and particularly variables for really clean and well-structured code,. It has helped me to see how I can be writing better css for my own projects!
The layout looks great on all screen sizes and spot on with the design, well done.
It looked like there was extra spacing on the right side of the card, and possibly cutting a bit of the right side of the image and preventing the corners being rounded correctly. Adding align-self: center; to the image appeared to correct this. Interested to see what you think - I believe your skills are a bit above my own!
Thanks for a nice solution.
1 - daniel22s• 40
@daniel22s
Submitted
What are you most proud of, and what would you do differently next time?
Que estoy logrando memorizar cosas de css que no conocia
What challenges did you encounter, and how did you overcome them?
los div para centrar y hacerlo responsive
What specific areas of your project would you like help with?
a
PIan Parker• 180@i-prkr
Posted
The solution is very close! Using flex boxes may have made the centring of the component and sizing easier rather than absolute, try updating the wrapping div's with display: flex, and for example setting the image width as 100% and setting some padding around it to centre it in the top of the card.
The responsiveness is great and works really well, and the mobile version looks great too. Your structure in css is clear and great use of px and em. The HTML could be tidied a little with large gaps but indented correctly and easily readable. The image is missing an 'alt' for accessibility (I also forgot to add that).
Nice work!!
Marked as helpful
0
