Things in particular for feedback that would be greatly appreciated:
I would really appreciate any feedback, but particularly would love to know if the BEM method has been implemented effectively. Particularly working between .card and .card-success classes as the success card had a slightly different layout.
I would also grealt appreciate any improvements on my sass code, I am enjoying working with Sass/BEM and am keen to keep improving.
Thanks for looking at my solution!
I would greatly appreciate some help with two things:
The CSS transition is not working correctly on the live site, but it works fine in the dev environment with parcel and I don't know why. On the live site, the position of the share bar before being opened is defaulting to the wrong location, so the transition is starting from the wrong place. In the large layout, it should start just below where it appears, but instead is starting from the middle of the card. In the small layout, it should scale up from the share button location. I don't know why it only works in local, I have tried using both the scss and css file for the parcel dev environment and both work fine, until it is deployed.
When I use a screen reader it won't read out anything more than the level on heading of 'article preview component', and I'm not sure why as I think I have my HTML structured correctly. Any suggestions to improve accessibility would be great too.
Any help would be greatly appreciated thank you for looking at my solution!
I would love to ask for feedback on two things in particular:
Thank you for looking at my solution!
I would love to ask for feedback and help on two things in particular:
My solution looks a lot bigger than the design in the screenshot. The style guide specifies a font size of 13px, but if I set this then the font does not appear as nicely on the design even though it is the correct size overall. So I kept it with the nicer font size, does that matter?
Any feedback on my implementation of Sass and BEM would be awesome!!
Thanks for looking at my solution!!
I would love to know answers to these questions I have after finishing the solution:
Is it bad to be using flex boxes in different places just for centring elements? I'm using it to centre the CSS grid container and the SVG icons on the cards.
I've used a media query breakpoint based on card design rather than the standard mobile breakpoint, is that bad practice?
Any other tips, thanks!
Finishing the project. This is the first time I have worked with json files and it was interesting!
What challenges did you encounter, and how did you overcome them?I had some problems in properly accessing the correct key and its value but using console.log() I was able to figure out how to use them correctly.
What specific areas of your project would you like help with?Any advice is welcome!
I really enjoyed looking at your solution!!
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.
Thanks for your solution and nicely done!!
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!
Happy coding :)
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 solution!
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.
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!!
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.
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.
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?
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.
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!
