I'd like to know if there are a better way for me to use classes to apply things such as colours and borders. Any general feedback or advice would be greatly appreciated!
I would appreciate any advice. I would like to know if there's anything I can do to improve using semantic elements or best practices that I'm not doing in general.
The sizing of my project isn't as accurate and I can't figure out why. Any ideas?
I'd like to know if there is a better way to choose elements in my html.
Somehow the size of my project is scaled down. I'm still trying to figure out why this is.
The dimensions of my component aren't quite right. Is there an easier way to compare my live site preview to the Figma file?
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 🤗
Looks very close to the original, amazing work!
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%.
