Skip to content
OverviewSolutions
4
Comments
4

amina-refik

@amina-refik80 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

Latest comments

  • pettik•600
    @pettik
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully creating a responsive recipe page using HTML and CSS. I designed the layout, incorporated fonts, and ensured it displays well on various devices.

    Next time I would like to try coding the page with Tailwind CSS. Overall, I’m proud of my achievement, but I’m always eager to learn and enhance my skills.

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

    I take pride in successfully creating a responsive recipe page using HTML and CSS. Furthermore, I intend to explore CSS preprocessors such as Sass to optimize my stylesheets and ensure easier maintenance. In summary, I feel a sense of accomplishment, yet I remain committed to continuous learning and skill improvement.

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

    If there are any opportunities to enhance the semantics of my code (such as using more appropriate HTML elements), I’d love to learn more. Also I’d like assistance in making my page more accessible. Suggestions for adding ARIA attributes, improving keyboard navigation, and enhancing alt text for images would be great.

    pettik--recipe-page

    2
    amina-refik•80
    @amina-refik

    hi,

    excellent job 👏.

    To enhance the semantics of your code, consider adding an <article> tag for your recipe. This tag defines it as "a self-contained piece of content that can be reused or distributed independently." In a web page with multiple recipes, each recipe should be enclosed within an <article> tag.

    As a suggestion to remove the last line in your table, you could use the CSS pseudo-class :not(:last-child):

    .nutrition-value:not(:last-child) p {
  border-bottom: 1px solid #ccc; /* Use the color specified in the style guide: var(--LightGrey) */
}

    Just a small detail: there are some missing word spaces.

    Keep up the good work!

    Marked as helpful
  • Dylan Molthu•70
    @dmolthu
    What are you most proud of, and what would you do differently next time?

    I'm most proud of my CSS skills developing and my understanding of certain properties is increasing. The thing that I would do differently is finding out ways to simplify my code because there probably are plenty of lines that might not have to be there.

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

    I encountered a few challenges with spacing some elements out on the screen, like the location paragraph from the bio paragraph. I figured it out by just playing around with the spacing with some of the elements parent elements and also using the margin property to space them out from the top.

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

    I would like help with getting a better understanding of spacing and how I could simplify my code by making better use of group selectors and finding out what some of the default values are to some properties.

    Social Links Profile using HTML and CSS

    1
    amina-refik•80
    @amina-refik

    Hello Dylan,

    I hope you're having a great learning experience.

    Overall, your solution looks quite similar, but it seems to have issues with responsiveness.

    As you can observe from this screenshot, when I adjusted the window size, the layout broke. This could be attributed to two main reasons you should consider:

    1. Absolute Positioning: Using position: absolute disrupts the flow of your document. Typically, you would use absolute positioning if you don't need to worry about elements overlapping.

    2. Percentage vs. Fixed Dimensions: When a parent element uses a percentage for sizing and its children use fixed dimensions, overflow issues can arise as the screen size decreases. You can address this by either hiding the overflow or adding a scrollbar if you prefer not to alter the dimensions of the child elements.

    The simplest fix I suggest (although you could explore alternative approaches) is to change the height of the card to a fixed dimension. This adjustment should resolve the overlap issue, as demonstrated in this screenshot:

    .sec-1 {
  height: 620px;
}

    Regarding spacing, I recommend using the design image as a background and reducing the opacity of your main element and try to align them as closely as possible.

    Lastly, don't forget to include the page icon.

    I apologize if my feedback seems lengthy, but I hope it proves helpful. Happy coding!

    Marked as helpful
  • mrbrave7•170
    @mrbrave7
    What are you most proud of, and what would you do differently next time?

    I have Used The box shadow after many times

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

    finding the exact width of card

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

    responsiveness of card

    blog-card preview

    1
    amina-refik•80
    @amina-refik

    Hello,

    I'm currently following the Getting Started on Frontend Mentor Learning Paths, and as part of that, I've been asked to review your solution. I noticed that the screenshot provided doesn't seem to correspond to the challenge, but clicking on the "View Code" button does redirect to your challenge solution. It's worth noting that displaying your solution is part of the site's guidelines for giving and receiving feedback. If you prefer to keep your solution private, you'll need to have a Pro account.

    Regarding your solution, great job! The only difference I noticed was in the active state, where they requested the title to be colored yellow. As a suggestion, you could achieve this by adding the following to your style file:

    .card-container:hover .heading {
    color: hsl(47, 88%, 63%);
}

    Thanks to reviewing your solution, I discovered that there was a requirement to enlarge the card shadow in the active state. This highlights one of the benefits of reviewing other people's solutions.

    I wish you the best of luck in finding job opportunities, and keep coding happily!

  • amina-refik•80
    @amina-refik

    Hi Gokulnathan,

    Great work on your project!

    I wanted to offer a suggestion regarding vertical centering of elements. There are several methods you can employ. For your case, one of the simplest ways is to use flexbox. By adding display: flex; to the parent element and adjusting the margins of the child element to auto:

    body {
    display: flex;
}
.container {
    margin:  auto; /*removed 6rem*/
}

    However, if you're interested in exploring other methods, : I recommend checking out this resource for more information.

    Keep up the great work!