Most proud of getting the email validation through thinking on my own
What challenges did you encounter, and how did you overcome them?some padding and margin issues
colors are just a little bit off but the design looks about pixel-perfect to the design guide. super clean and easy to understand JS.
Centering the card vertically proves to be challenging even when using the display:flex, i couldn't use it here because it just messed up my entire code when i tried so I had to eyeball it.
What specific areas of your project would you like help with?Centering it. I'm never able to make it work.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container >> great resource for centering a div with flexbox, both horizontally and vertically. I basically never do anything else now.
I'm most proud of creating a component that works well across different screen sizes with distinct behaviors appropriate to each. The way the share functionality adapts between mobile and desktop demonstrates good responsive design thinking.
Next time, I would:
Maintaining accessibility while toggling visibility - I initially struggled with properly updating aria-hidden attributes. I solved this by consistently checking the element's hidden state and setting the aria attribute accordingly.
Different behaviors across screen sizes - The mobile vs. desktop layout required different behaviors for the same components. I implemented conditional logic based on screen width to handle these differences.
Positioning issues with the toast component - I had challenges with the toast being cut off by overflow settings. I had to carefully balance maintaining border-radius on images while allowing the toast to be fully visible. Because I had overflow: hidden set on the article initially, the toast pop-up on larger devices was getting cut off. When I updated my stylesheet to have overflow: visible at larger devices, my border-radius on the image disappeared. I solved that by manually adding the border-radius to both the top-left and bottom-left corners of the image. This allowed me to have the toast visible while maintaining the border-radius on the image.
Focus management - The button staying in focus state after closing the toast was confusing. I learned to use the blur() method to programmatically remove focus when appropriate.
Creating a more elegant solution for the speech bubble styling that works well across all screen sizes
Improving my CSS Grid implementation to better handle complex layouts
Implementing smooth transitions/animations when toggling the visibility of elements
Developing a more comprehensive focus management system for better keyboard accessibility
Looks great visually, well done! A couple pieces of feedback-
if you click "share" in mobile, the author section disappears. you'd want to toggle between the author info and share buttons.
the user can't dismiss the share popup in desktop. you can fix with javascript!
I'm most proud of how it looks responsively. I would try to not use !important next time and make the CSS cleaner, and use <picture> for images in different viewport sizes. I would also try to start with the mobile version first.
What challenges did you encounter, and how did you overcome them?The biggest challenge were positioning the little numbers accurately and making the page mobile responsive.
What specific areas of your project would you like help with?How to do mobile-first design effectively.
Thanks I thought that was the case, I tried to fix and recommitted. Appreciate it!
I'm honestly floored by how precise this is to the mock. I have a lot to learn lol. Just wanted to say kudos and hope I can get on your level eventually!
using grid in general
What specific areas of your project would you like help with?i would like to know how i can improve my code, especially how can i position content in .container better without using .container-outer with flex positioning
I did this on the <body> to center my grid rather than using flexbox. Pretty similar to what you did, really:
display: grid; align-items: center;
Of understanding Grid and the command position, were super helpful with the icons
What challenges did you encounter, and how did you overcome them?To the desktop version, i didn't knew how to adjust the boxes, and i searched a lot. I just put 4 rows, instead of two, and use grid-area to move them
Looks good! I think for desktop, you may want to apply a max-width for the cards so they don't continue to stretch out in wider viewports. I would also add padding to the cards to match the design a little better. Mobile looks solid!
Super close to the design, great work! The word breaks are a little different in desktop. I work in ecommerce and annoyingly this can matter to your stakeholders. Truly just about perfect though.
Creating a solution that fits the brief and is responsive on smaller screens. Next time I would probably use Flexbox instead of relying on margins and padding to create a more uniform responsive solution.
What challenges did you encounter, and how did you overcome them?Trying to get the solution to look as close to the design without the Figma file.
What specific areas of your project would you like help with?I think my CSS nesting is ok as it's now supported natively in most browsers but if it's bad practice or anything let me know!
This is spot-on to me, great work. only little thing is the top margin seems to be a bit much, but very much nitpicking.
I appreciate the addition of the icons and it looks spot on to the design. very comprehensive with media queries and solidly coded. My only real critique is the card blends with the background so i'd make it so you can discern the card from the background. excellent work overall.
Code looks great! It's difficult but I would take a closer look at the design provided to make sure the dimensions are closer. the padding around "learning" looks a bit funky and author img a little large. Good job overall.
I am proud of to implement my learning of flexbox and grid for styling a responsive design. I got to know how to import custom fonts and use them in styling also how to host a website on Netlify. Next time i want to add dynamic interactions using javaScript as well.
What challenges did you encounter, and how did you overcome them?I encounter challenges when importing custom fonts then i googled up and resolved those issues. I also faced issue centering the Qr- code and resolved it using flex,grid and top margin. Although i think there might be a better approach to get it done more easily. i will look for other methods as well.
What specific areas of your project would you like help with?Looks good to me! I think you probably just could use flexbox for this, grid is great for more complex layouts from what i've heard. I just realized there's a box shadow on the QR box I forgot on mine too ><; Great work!
