Skip to content
OverviewSolutions
8
Comments
8

melanielogan74

@melanielogan74140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Submitted about 1 month ago

    Testimonials Grid Section

    • HTML
    • CSS
    1

    Any recommendations on how to get the paragraph text to fill the cards, would be greatly appreciated.

  • Submitted about 2 months ago

    Four Card Feature Section

    • HTML
    • CSS
    1
  • Submitted 2 months ago

    Product Preview Card Component

    • HTML
    • CSS
    1

    I'd like to make the designs more responsive by using more automatic sizing for things like images and containers. I couldn't quite get it with the picture for this challenge. Also, I'd like to use the portrait and landscape media queries, but need help figuring out how to size for various devices.

  • Submitted 3 months ago

    Recipe Page

    • HTML
    • CSS
    1

    I'd like to hear feedback from others on the best approach for planning the layout for a project like this so that it is responsive and resizes without having to add a lot of code or use media queries.

  • Submitted 3 months ago

    Social Links Profile (Modified Design)

    • HTML
    • CSS
    1

    Any feedback that will help me improve is greatly appreciated.

  • Submitted 3 months ago

    Blog Preview Card

    • HTML
    • CSS
    2

    Thank you for previewing my attempt at this challenge. I welcome your feedback.

    I had problems trying to center the container on the page. I tried including align-items in .card to center the container horizontally and vertically, but it only centered the text and not the container. Not sure how to fix this so I used the margins with percentages.

    Also, had trouble increasing the height of the card. If I increase the height, all of the child items in the container shift down and leave a space at the top.

    Lastly, if there is any feedback that could help me with isolating/sizing the card image so that it stays in place and does not shift when I'm working with the headings and paragraph.

View more solutions

Latest comments

  • melanielogan74•140
    @melanielogan74Posted about 1 month ago

    Great job! Especially with matching up your solution to the example.

    1
  • P
    Ishmael Sunday•230
    @okayishmaelSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    See the Readme file in the github repository for all the details

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

    None

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

    N/A

    Responsive four cards feature section | htm5, css3

    1
    melanielogan74•140
    @melanielogan74Posted about 2 months ago

    Great work! Your solution is very close to the design layout. The only recommendation that I have is to use semantic html more. It is harder to review/debug because there are lots of <div> tags. Try using <section> to separate things that should be together.

    0
  • Belamana-Harshitha•150
    @Belamana-HarshithaSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    figure tags

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

    media queries and changing the positions of the image and information in mobile view

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

    media queries

    Responsive product-preview page

    1
    melanielogan74•140
    @melanielogan74Posted 2 months ago

    This was a very good attempt. Your desktop mode is very close to the challenge image.

    What would be a better way of making this semantic would be to use <picture> to size for desktop and mobile, and <section> for the content. Within the <section> you could break it down further using <div> and classes.

    When I tried viewing the page for mobile, the button was partially cut off. I believe this may be because of overflow:hidden.

    As stated, this was a very good attempt. Only a few tweaks needed. Keep up the good work!

    0
  • Ashishbauer•40
    @AshishbauerSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    the best thing is how you design and focus on each element.

    Recipe Page

    1
    melanielogan74•140
    @melanielogan74Posted 3 months ago

    This is a very good attempt at the challenge. I'd recommend using flexbox and grid to make the design more responsive. Also, for semantic html, you could use section tags to separate the content and work with it from that angle.

    0
  • melanielogan74•140
    @melanielogan74Posted 3 months ago

    Great job completing this challenge! I did not find anything amiss or areas that should be improved. The layout worked as expected in different screen sizes.

    0
  • melanielogan74•140
    @melanielogan74Posted 3 months ago

    This was a very good attempt! I broke down my feedback per file.

    HTML

    • Try to use more descriptive names for your classes. Using terms like header, textarea, text can be confused with tags and reserved words. Choose something like class="card-header" to help differentiate.
    • Also, try not to use so many div tags. This can make it hard to debug and troubleshoot any issues.
    • There's a misspelling of the word "foundations"

    CSS

    • This looks great! You organized the styling well and used some items I haven't seen anyone use (i.e. transform)
    • The image needs a border-radius
    • Learning should not have a border and should be bolded.
    • Your main header and the name should be bold text.

    Overall, great job!

    Marked as helpful
    1
View more comments