I thought your javascript was clean and concise, it helped me realise I should go back and tidy mine in a few ways!
One suggestion that came to mind looking at your source code was the 7-1 pattern for Sass that I noticed people using and found this website that was helpful: https://sass-guidelin.es/#the-7-1-pattern. Note some of the content in the site isn't up to date with recent Sass updates, but the concepts are all there. I thought it might help to make your main.scss tidier and easier to find your components scss.
The solution looks really great and love the attention to detail. I realised I missed small details such as distinguishing between 'hr' and 'hrs', etc.
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 the object-fit property 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!
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 @use instead of @import. If you got some improvements on images management, don't hesitate also :)
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 @use and @forward for sass, I found a video on youtube really helpful, by Kevin Powell. https://www.youtube.com/watch?v=CR-a8upNjJ0
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.
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 the image-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?
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-size and object-position on the images to make them uniform given they are different sizes and shapes? Rather than letting the grid size them automatically?
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: flex and justify-content: space-around or justify-content: space-between on the .testimonial class. 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!
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 🙏
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!
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.
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.
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 👏
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.
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!
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).
