Skip to content
OverviewSolutions
7
Comments
8
Ahmed
@Ahmed-l2

All comments

  • Ahmed•80
    @Ahmed-l2Posted 5 months ago

    Great job!

    0
  • Ahmed•80
    @Ahmed-l2Posted 5 months ago

    Looks great and almost identical!

    0
  • Arthur•70
    @drk-ArthurSubmitted 5 months ago
    What specific areas of your project would you like help with?

    I have no idea how to make the mobile design.

    Recipe Page Challenge

    1
    Ahmed•80
    @Ahmed-l2Posted 5 months ago

    For the mobile design, you can use CSS Media Queries, it will only take you a few minutes to understand how it works. CSS Media Queries allow you to apply different styles for different screen sizes, making your web design responsive and adaptable to various devices.

    Here's an example:

    Desktop Styles

    main {
    margin-top: 100px;
    margin-bottom: 50px;
    border-radius: 20px;
    padding: 40px;
    background-color: lightblue;
}

    Mobile Styles with Media Queries

    To change the main element's style for screens that are 768px wide or less, use the following Media Query:

    @media (max-width: 768px) {
    main {
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 0;
        padding: 10px;
        background-color: lightcoral;
    }
}

    This Media Query modifies the main element's styling specifically for smaller screens.

    I hope this was clear enough for you to understand :)

    0
  • Control222•210
    @Control222Submitted 5 months ago
    What challenges did you encounter, and how did you overcome them?

    Difficulty with list marker. First changed list-style-position inside, but then could not make any gap between the marker and the text, so needed to change and find another method. Thankfully with margin and padding on ul and li elements it was doable

    Recipe page

    1
    Ahmed•80
    @Ahmed-l2Posted 5 months ago

    Looks great and almost identical to the original design!

    0
  • Ejiofor John•450
    @echocode1Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of designing it even when I know it lacks a lot

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

    the colors giving seems a bit different from the starter designs i saw .had to generate some random color which took a whole lot of time

    What specific areas of your project would you like help with?

    how to blend the mobile view to the desktop view though they look same to me.

    social link profile 1st attempt

    1
    Ahmed•80
    @Ahmed-l2Posted 5 months ago

    Looks pretty good, something things I could point out that you're missing is the color change to green when hovering over the buttons and all the colors you need are provided in the style-guide.md.

    Marked as helpful
    0
  • Ahmed•80
    @Ahmed-l2Posted 5 months ago

    Looks good, maybe just a few touchups can be done and it will match the original design, like the bottom spacing, and the size of the avatar, along with the use of the correct weights for the texts.

    0
  • Koda👹•3,830
    @kodan96Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • SCSS 🖌️
    • JS 🤖
    • mobile-first approach 📲📲
    • autoprefixer for browser compatibility 🧭
    • minified files for better performance 🚀

    Chat App CSS Mockup 💬💬 w/ HTML & CSS

    3
    Ahmed•80
    @Ahmed-l2Posted 5 months ago

    The design looks great, and the inclusion of camera holes is a subtle yet creative touch.

    2
  • Ahmed•80
    @Ahmed-l2Posted 6 months ago

    Overall looks good but if you want it to be as close to the design, you need to add some padding to the elements and use the font colors provided in the project files along with the weights.

    0