@heisemmanuell
Latest solutions
Latest comments
- @andrushchenkoo
Overall, it looks good, although there are some minor discrepancies with the design — the layout doesn't fully match in some places, but it's not critical. I really liked the implementation of the button that reveals social media links when clicked — it looks stylish and functional!
Marked as helpful - @Cegt25What are you most proud of, and what would you do differently next time?
I have made progress in CSS, positioning, styles, width, and height of page elements.
What specific areas of your project would you like help with?in CSS
@andrushchenkoo- Media queries take up a lot of space in the code, so an alternative solution is to use the clamp() function. It simplifies writing code and makes it less bulky.
- Using position: absolute; on the .layout container can cause issues when the content height changes, especially on mobile devices.
- Also, if I were you, I would extract the colors into separate variables. First, you get autocomplete, and second, if a color changes, you only need to replace it in one place.
- @Sarah-okoloWhat are you most proud of, and what would you do differently next time?
I am glad I finally understood the BEM notation, the
clamp()CSS function, and the@font-faceCSS rule so I could use them in a project.@andrushchenkooYour work looks very good: neat HTML structure with proper semantics, clean CSS styles using variables, modern properties like clamp() and grid, as well as custom fonts via @font-face. This shows that you are familiar with modern layout techniques. It's great that you considered visual hierarchy, hover effects, adaptive block width, and proper class organization.
However, there are a few areas for improvement. There is no transition, so the color change on buttons appears abrupt — add a smooth transition for background-color and color to improve the user experience. It's also worth adding :focus styles for better keyboard accessibility, and for links, use aria-label if the content is not descriptive enough. As for the avatar — it’s better to use object-fit: cover instead of contain to avoid image distortion.
- @1253PUJITHWhat are you most proud of, and what would you do differently next time?
I'm most proud of how I was able to structure the card layout using clean HTML and responsive CSS. This was one of my first times focusing on both desktop and mobile views, and I successfully made the layout look consistent across screen sizes. I also explored using Google Fonts and added shadows and spacing to improve the card's visual appeal.
Next time, I would pay more attention to small design details from the Figma file, like exact paddings, spacing, and font weights. I also want to organize my CSS better and possibly try using utility-first CSS like Tailwind for faster prototyping. Additionally, I would make sure to test more screen sizes (like tablets) to improve overall responsiveness.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was deploying the project on GitHub Pages. Even though my code was working perfectly in VS Code, the live site initially showed a 404 error. After some debugging, I realized that either the index.html file was missing or incorrectly placed, and I had to ensure the file structure matched GitHub Pages requirements.
Another challenge was understanding the difference between mobile and desktop layouts. At first, I was confused about how to implement responsiveness and set default views. After reviewing the design guide and experimenting with media queries, I was able to structure my CSS so the layout looked good across screen sizes.
I also struggled with aligning elements (like centering the text background box), but I practiced using flexbox and margin adjustments until I achieved the desired layout.
What specific areas of your project would you like help with?I would like help with improving the responsiveness of the layout, especially when switching between mobile and desktop views. I’m still learning how to structure media queries efficiently without repeating too much code.
Another area I’d appreciate feedback on is my CSS organization — I’m not sure if I’m following best practices, especially when it comes to naming classes and keeping the code clean.
Lastly, I’d like suggestions on how to optimize the design further or add subtle animations or interactions that would make the card feel more polished and modern.
@andrushchenkooEverything looks really great — nicely structured layout, pleasant font choice, and overall a clean and tidy implementation! In my opinion, it would be good to pay a bit more attention to the small details, as there are some minor deviations from the design that are noticeable. This is totally normal when you're learning, but with experience, you start to catch these things right away.
I also recommend using a CSS reset or normalize — this helps remove the default styles applied by the browser and allows you to build from a clean slate, which makes it much easier to match the design precisely.
Regarding semantic tags like <footer>, I think they’re not really necessary in this context — after all, this is just a card component that's part of a larger website. Having multiple footers on the same page could be confusing, so using a regular <div> here is perfectly fine.
You might also consider moving your colors into CSS variables — it’s super convenient, especially if you need to quickly change the color scheme later on. And don’t forget to include a README file and a link to your project — it makes it easier for others to review and understand your work.
- @joe4334EWhat are you most proud of, and what would you do differently next time?
DESCRIPCION
@andrushchenkooYour CSS code is neatly written and well-structured. It's divided into logical sections with clear comments, which makes navigation and reading easier. However, there are a few aspects that could be improved.
Variable names like --bold--font or --regular--font can be misleading: they sound like they describe font weight, but in reality they refer to size. It would be clearer to rename them to something like --font-size-lg and --font-size-md.
Also, consider revising the width: clamp(375px, 100%, 1200px) rule applied to body and html: it's better to set such constraints on the main container (e.g., .content) rather than the entire page. Otherwise, you may lose layout flexibility.
