What are you most proud of, and what would you do differently next time?
I was glad to get a chance to use the picture element for this project, as it's a method I hadn't utilised before.
What challenges did you encounter, and how did you overcome them?
I didn't have the design file, so my challenge was getting the max-width of the card correct. I seemed to have issues with whitespace under the image when making the content too tall - presumable because of the limitation of the project image size. I had to play around with the sizes until it was right.
What are you most proud of, and what would you do differently next time?
I didn't have the Figma file, so I am pleased with matching as close as I could to the design.
The mobile reference image was different to the Desktop design, so I managed to tweak the code to match the mobile view
I used semantic html reasonably well, and made the table more accessible with the scope attribute.
What challenges did you encounter, and how did you overcome them?
I noticed these differences between the desktop and mobile design:
No rounded corners on the article or image on mobile view
Image takes up full width of its container on mobile view
No margin (background colour not visible) on mobile
I solved that with media queries, but I wonder if there was a simpler or more dynamic way with clamp or calc or something...
My ruleset organisation continues to feel messy or overly complex for a simple challenge. I know with practise I will work out a system and start to code and organise more efficiently.
What specific areas of your project would you like help with?
Using BEM is still a challenge, I can't figure out what to do when there are lots of repetitive styles in different blocks. Utility classes, or multiple selectors for a ruleset?
How to achieve the mobile design differences without a media query?
What are you most proud of, and what would you do differently next time?
I didn't have access to the design file, so I am pleased with how close I got eye-balling the design images.
I experimented with the clamp()calc() functions for the first time - I am not sure if it was necessary to use them, but it seems to have made the design more responsive without needing a media query.
What challenges did you encounter, and how did you overcome them?
As always, I find it challenging to match the widths and spacing to the design. The desktop design image seems to be wider than the mobile, and I am not sure how the designer would expect that to be achieved by the dev without declaring a width.
At first, I did not include a width property at all for my .social-card, but then it did not match the desktop designs width relying solely on its content and some padding. I hope by using max-width and rem units, it is a little better than fixed pixels?
What specific areas of your project would you like help with?
I would love to know any other way of achieving the wider desktop width shown in the design image without declaring a width.
I would like to know if my semantic html was overkill or not enough!
My custom properties are based on eye-balling the design, so may be incorrect. Let me know if there were simpler spacing solutions! I applied them to margins; if there was a better approach, please let me know.
Any accessibility tips, as I have not yet learnt much about it.
What are you most proud of, and what would you do differently next time?
I am happy with my structured HTML, BEM-inspired class names and use of semantic markup. Next time, I will plan and name my custom properties a little better.
What challenges did you encounter, and how did you overcome them?
Matching the spacing to the design is always a challenge, despite having the values in Figma, it was still a little off. I methodically went through the design file sizing, adding my custom properties to try to match the design..
What specific areas of your project would you like help with?
