What are you most proud of, and what would you do differently next time?
I proud to feel as though I am getting a handle on Sass and BEM. I still need to spend more time looking at the design and thinking how to structure the code to make it the most DRY.
What challenges did you encounter, and how did you overcome them?
I found it challenging working out how best to structure my .card component css, to make it as clean and as DRY as I could. I tried a couple of different ways using BEM, and decided to keep all css for both the signup and success card under the one class.
What specific areas of your project would you like help with?
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.
What are you most proud of, and what would you do differently next time?
I am glad that I was able to making the interaction more enjoyable with CSS transitions, and also that I am beginning to understand accessibility better and how to make solutions more accessible. Next time I need to make sure that I consider the build out for both size designs before structuring the HTML, I had to make some large changes part way through to make the layout change correctly.
What challenges did you encounter, and how did you overcome them?
I had some challenges with the layout of the footer between the open and closed sharebar, wanting to make sure the share bar position did not move to make it appear cleaner. I had to play around with the HTML structure and padding on different elements until the content was aligned on the card footer and the share bar.
What specific areas of your project would you like help with?
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!
What are you most proud of, and what would you do differently next time?
I'm glad to have continued working with Sass and BEM (and am enjoying it!), and feel I'm getting more comfortable and familiar with how to implement them together. I feel as though I'm getting much faster and more familiar with layouts in general and working with flexbox and elements such as `````` for good responsive design.
Next time I would consider using grid more instead of flex everywhere, it is probably my default preference. I would also spend a little more time planning out the layout and solution before beginning coding as I ended up changing the Sass structure a few times.
What challenges did you encounter, and how did you overcome them?
It took me some time to get the image correct for the footer! I was playing around with it for a long time because of my lack of understanding of the position property, and the stacking context, things I'm probably still not fully understanding. I found a helpful digital ocean tutorial (linked in the readme), and just kept trying different things until it was correct. Working with images is something I'm still getting better at.
What specific areas of your project would you like help with?
I would love to ask for feedback on two things in particular:
How I have used Sass and BEM in the project
Whether the pictures in the solution should have been done in a different way. Particularly things like the mobile footer picture looks zoomed in compared to the design.
What are you most proud of, and what would you do differently next time?
I'm really happy with having spent the time to try to learn Sass properly, and implement it with the folder structure using partials. As well as this, to use Sass functions, maps and loops to be able to apply styling to the cards and change the grid based on media breakpoints. I also began to start using BEM which I plan to continue with.
What challenges did you encounter, and how did you overcome them?
I found it challenging understanding the best way to implement breakpoints in Sass, and it lead me to some great articles as linked in the readme that helped me understand a few Sass features.
What specific areas of your project would you like help with?
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!!
What are you most proud of, and what would you do differently next time?
I'm glad that I was much quicker putting this design together, and was able to work out the responsive elements of the design more easily and it has turned out well. Also based on feedback from previous solutions I think that I have written better semantic HTML.
What challenges did you encounter, and how did you overcome them?
I didn't face a lot of challenge in this solution, however I did need to explore CSS grid more to have it acting correctly and particularly to ensure content stayed aligned as the screen size got larger.
What specific areas of your project would you like help with?
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?
What are you most proud of, and what would you do differently next time?
I am really glad that I think the design is properly responsive, as I'm still getting comfortable with responsive design elements. I was able to successfully use the grid system with media queries along with the clamp() for font sizing.
What challenges did you encounter, and how did you overcome them?
Initially I had chosen to use flexbox for the responsive design, but found it difficult to create the component correctly according to the design. The design was responsive but I was having difficulty getting the correct sizing for the larger screens. Using the grid system I was able to better halve the card for the image and product info.
What specific areas of your project would you like help with?
I would really like feedback on whether the solution correctly implements responsive design, particularly whether my font sizing is good practice using the clamp function. Any tips on better practice would be greatly appreciated.
What are you most proud of, and what would you do differently next time?
I am proud that I was able to develop mobile first and that the solution is I think correctly responsive.
What challenges did you encounter, and how did you overcome them?
I had to refresh setting global css settings using * and root, and styling particular elements such as lists and tables to have the design exact. For the table I thought it may have been easier not to use table elements but believed it would be better for semantic html and accessibility.
What specific areas of your project would you like help with?
I would really appreciate feedback on whether the semantic html is correct and the correct elements have been used. I would also really appreciate feedback on whether the responsive design has been implemented well and any improvements on the structure of my css code.
What are you most proud of, and what would you do differently next time?
Glad to be getting more comfortable with CSS and using variables to make it a bit cleaner. I'm proud that the design looks correct and also being able to add some simple transition animation for a nice effect.
What challenges did you encounter, and how did you overcome them?
No real challenges on this solution. If anything just still getting quicker working with flex boxes and using margins and padding to achieve the correct layout and sizing of elements.
What specific areas of your project would you like help with?
Still having trouble sometimes and taking a while to get the layout exact. In my ".card" class in the stylesheet, lines 73-83 I had to specify the padding-inline, padding-top and padding-bottom to get the padding correct. I wanted to just use the shorthand "padding" but it would make the top and bottom padding bigger than the sides each time I tried. I am unsure why, and where the extra padding on the top and bottom was coming from.
I also would greatly appreciate any feedback particularly on the CSS, whether variables have been used effectively and what can be improved.
What are you most proud of, and what would you do differently next time?
I'm really glad that I think I've been able to reproduce the design satisfactorily. I wanted to be creating using CSS grid as I expect to be doing that in the future against Figma templates, and so I'm really glad that I could get practice doing this even if I haven't achieved the perfect solution. I'm feeling more confident in working with CSS grid and also how to be working towards good responsiveness between different devices.
Next time I would probably focus earlier on getting the correct layout and responsiveness before going in to depth with styling, to ensure that it is all functioning correctly first. I think this would also be considered a better workflow.
What challenges did you encounter, and how did you overcome them?
I had difficulties working between the CSS grid and getting the correct responsiveness for different devices sizes. I had trouble in understanding how to best have the card keep the correct shape and keep it within its bounds correctly on the grid when changing to suit the screen. With this, not letting content spill out of the card but style them correctly and have them become smaller instead as the card shrinks. I found and read some articles online and kept experimenting with the media queries and browser tools, until I think I managed to have a satisfactory solution and it appeared to be working correctly.
I also had a bit of difficulty with the layout of elements inside the card - particularly with the avatar's spacing at the bottom. I set some fixed heights for smaller screens to prevent the large spacing, and corrected the size of some gaps for the content to be spaced adequately in the desktop view.
What specific areas of your project would you like help with?
I would really like to know whether I have correctly applied responsive behaviour to the card in the best way, and what should have been done differently to the card's elements to make it more naturally responsive. I'm not sure I should have been manually setting the card max-height for smaller screens.
Also have I correctly created the component restricting it to the modules that it occupies and not letting it grow to the size of the content? I had some trouble getting the spacing around the avatar at the bottom in the desktop view.
What are you most proud of, and what would you do differently next time?
Proud of:
I think that it looks correct! It has been a while since putting styling and front end work into practice so I'm happy that it turned out ok.
Next time:
Next time I would try organising the CSS a bit better, likely using a different CSS framework.
What challenges did you encounter, and how did you overcome them?
Challenges:
It was only a very simple project so there wasn't much challenge apart from my memory failing with some things and needing to be reminded of how to properly use flex boxes and layouts.
What specific areas of your project would you like help with?
I would like to know if my CSS could be written more elegantly, or in a particular way so as to scale better for larger projects.
I was also unsure if more should have been added for the desktop & mobile specs - both looked correct in chrome dev tools.
