The implementation of the solution with a mixture of Grid for macro layout and flexbox for micro layout
What challenges did you encounter, and how did you overcome them?Implementing the banner layout was a bit of a hack at first but I figured Grid layout gives me the flexibility I was looking for.
What specific areas of your project would you like help with?none
This helped me a lot to compare it to my own attempt! Great job!
Wow! 🤩I am thrilled to have completed this challenge. Although the design may not look exactly like the original design (in terms of typography and color palette), I am happy that I was able to make the layout as close as possible to the original.
Through this process, I learned several valuable lessons, including:
I faced a major obstacle🙃 during this project while making the grid responsive. However, I found a solution after reading an article on the mobile-first approach https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe. Initially, I tried the desktop-first approach and completed it within 30 minutes. But when I tried to make it mobile-friendly, it turned out to be a nightmare🤣. On the other hand, starting with mobile and then moving to desktop made the process easier. I hope to become comfortable with both approaches soon.
What specific areas of your project would you like help with?Any feedback is greatly appreciated! I am here to learn. I also wish to do this project in React, any suggestions are 🤗
Implementing everything I've learned about HTML and CSS to accurately replicate the four card feature section.
What challenges did you encounter, and how did you overcome them?Ensuring that the design is implemented in a responsive manner; hence, use the browser developer tools to confirm responsiveness.
What specific areas of your project would you like help with?Nothing specific, but any feedback is highly appreciated.
Looks great! You could look into adjusting the background colour to fit the initial design.
Am proud i was able to this off Cause it was my first css design
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
Great job! Something to consider for the future might be looking at the small details such as font size and colour
The project was really challenging without the figma file but I was able to complete it.
What challenges did you encounter, and how did you overcome them?trying to get almost exact measurement of the margin, padding and other essential measurement of the project with the figma template
What specific areas of your project would you like help with?none for now
Nice! Even without the figma file you could get the colours from using a colour picker tool.
Laying out the project first, then styling section by section
What challenges did you encounter, and how did you overcome them?I struggled with the buttons/links. I couldn't get the active state to work correctly. I moved the button tag inside of the anchor tag and readjusted the css.
What specific areas of your project would you like help with?How is the desktop design. I opted to go mobile first, but didn't change anything for the desktop version.f
Looking good! The gap at the bottom of your card seems to be from setting your height of your .container class to 80%.
I am very proud that i learnt some new ways to make my pages more responsive for different screen sizes.
What challenges did you encounter, and how did you overcome them?The challenge was to make the page responsive and consistent across all screen sizes. With the help of rem and css grid properties i have achieved that.
What specific areas of your project would you like help with?Open for your suggestions...
Looking good! Maybe look into centering the card vertically.
Working through the CSS and digging into learning Flexbox.
What challenges did you encounter, and how did you overcome them?Stacking the QR and text on top of each other. Flexbox was a huge help with setting the flex-direction to column and align-items to center.
What specific areas of your project would you like help with?I still struggle with Flexbox. I wish I could find a good resource that really dumb downs the principles behind Flexbox. It still seems as complex as the box model.
Used flexbox for layout. Card colour still doesn't seem correct.
I think my card design might be bigger than that of the preview.
Overall a fun project. 130+ line of CSS seem excessive. My target is refactor and see if I can reduce the number of overall selectors.
The colour along with other details is in the style-guide file!
