Skip to content
OverviewSolutions
5
Comments
5
Weberowsky
@Weberowsky

All comments

  • Weberowsky•130
    @WeberowskyPosted about 1 month ago

    Your social profile card is nearly identical to the design – great work overall! Here are a few detailed suggestions to polish it even further:

    • Viewport Overflow: The site currently overflows the viewport. This might be due to the use of width: 100dvw; and height: 100dvh; on the HTML and body. These units can sometimes lead to unexpected behavior with scrollbars. Consider using 100vw/100vh or adjusting the layout so that the content naturally fits within the viewport without causing overflow.

    • Missing Hover Effects: The buttons lack the hover effects as shown in the design files (active-states.jpg). Adding CSS hover states will enhance interactivity and better align the final product with the provided design specifications.

    • CSS Organization: While embedding CSS within the HTML file is acceptable for small projects, moving your CSS to an external stylesheet is a best practice. This not only improves maintainability and readability but also allows for easier reuse of styles in larger projects.

    Keep refining these details, and your project will be even more polished and professional. Great job, and keep up the excellent work!

    Marked as helpful
    1
  • Md-Sadekur-Rahman•60
    @Md-Sadekur-RahmanSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    As I have used css flexbox in first two projects, I will use some other tactics in the next project. I am not that proud of because I am using chatgpt but I am trying to understand things at least.

    What challenges did you encounter, and how did you overcome them?

    Many things were challenging for me but I asked chatgpt and for that time being I understood. I will have to revise again and again to master the things.

    Responsive landing page using css flexbox.

    1
    Weberowsky•130
    @WeberowskyPosted about 1 month ago

    Your blog preview card looks promising!

    I noticed a few areas for improvement:

    • the main container and image have slightly less rounded corners than the original design -the container feels a bit oversized

    Also, consider moving your CSS into an external file for better maintainability. Keep experimenting with new techniques—you’re making great progress!

    Marked as helpful
    0
  • Weberowsky•130
    @WeberowskyPosted about 1 month ago

    Your project looks great!

    One small issue I noticed is that the page has a scrollbar when it should fit within the viewport. You might want to check the container's width, height, and overflow settings to ensure proper layout.

    Keep up the great work—you're on the right track! 🚀

    0
  • Weberowsky•130
    @WeberowskyPosted almost 2 years ago

    To scale the card across devices you could use vw and vh (Viewport Width, Height) or some other relative values like rem. On some bigger projects if you'd need to change position of the element when its on mobile you could use the media rule

    Marked as helpful
    1
  • Weberowsky•130
    @WeberowskyPosted almost 2 years ago

    You have the colors and fonts that you should use in the style-guide.md. Also try to use semantic HTML https://www.w3schools.com/html/html5_semantic_elements.asp

    For example you could use the <main> tag instead of <div id="container"> Also you may want to make your html and body 100vh to center your container vertically

    For the button you should use the <button> tag to make it work like a button. Later if you'd like it to do smth for example change color of the button on hover you'd need a button element, not div.

    Marked as helpful
    0