Skip to content
OverviewSolutions
23
Comments
290

Agata Liberska

@AgataLiberskaRedditch, UK4,075 points

Hi, I'm Agata, good to see you! If you have a moment, please have a look at my solutions, any feedback is welcome! Thanks!

Latest solutions

View more solutions

Latest comments

  • Luís Felipe Passamani Santos•10
    @passamanii
    What are you most proud of, and what would you do differently next time?

    I've made it.

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

    I really strugled to finish this project, even that this is a Newbie diffuculty one. I'm happy to say that despite the challenges and the over time spent, you can learn new things and get better every single day. Believe in yourself. And count on some other people to help you through the way. Peace.

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

    Html and mostly Css learning and developing.

    Simple Recipe Page

    1
    Agata Liberska•4,075
    @AgataLiberska

    Hi, I think visually your solution looks pretty good but I think things could be improved in your HTML and css. Firstly, your recipe card shouldn't really be using <main> as the wrapper, you should have an <article> tag in there (inside the <main>, not instead of it). You could also use <section> tags inside the article for the ingredients list, instructions etc.

    With your CSS, with your next challenge, I would start with looking over the design to see what styles are repeated throughout.

    For example, here we have a <h2> which is used 3 times and they visually look the same, but you're removing the default margins in your reset and apply different padding-bottom to each of them to make them look the same. Also we have two <hr> which have different styles - again to make them look the same. These are just examples but it overall seems like a chunk of your styles is just overriding the styles you set earlier and it's just unnecessary I think - have a look over to see if you can simplify things. Don't worry though, this is something that definitely comes with practice!

    Marked as helpful
  • Dorm-24•310
    @Dorm-24
    What specific areas of your project would you like help with?

    None, I just want people to see my solution and tell me what their opinion is.

    Solution

    1
    Agata Liberska•4,075
    @AgataLiberska

    Hi, your solution looks great! The only thing I noticed is that at a certain width the card stretches from edge to edge in the viewport, would be nice to have some space around it. It should also definitely be wrapped in an <article> tag rather than just using <main> as the container for it. I'd also consider some more semantic classes than .container1 and .container1 (even something very simple like .img-wrapper and .content-wrapper, because then just looking at the class I can guess what they will be).

  • Moundjid Machghour•500
    @PxMach
    What are you most proud of, and what would you do differently next time?

    I'm proud to have done this project. If I had to improve anything else, I'd work on : Dynamic formatting so that the display changes visually when a value is updated.

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

    Dynamic updating of values. Problem: Initially, tipAmount and totalAmount were not linked to the DOM, so their values were not displayed.

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

    If you have any suggestions, I'd love to hear from you.

    Frontend-Mentor-Tip-calculator-app

    1
    Agata Liberska•4,075
    @AgataLiberska

    Hi, your solution looks good visually but I don't think it full works as intended. If I pass the total bill amount in the first input, the tip amount gets split per person but the total doesn't, so that would be something good to fix.

    Some other improvements that you could do:

    • your inputs could use some hidden labels
    • also would be good to have a min value set on them so that I can't put a negative value in, you check for this in your js which is good, but there is no feedback to the user about this being incorrect input
    • I'm also thinking the buttons you have could maybe be radio inputs rather than buttons, and then they could be wrapped in a fieldset to have a semantic link between them in html

    I would say there is nothing really wrong with your js other than it may be a bit heard to read by a person, maybe in your next challenge before you start writing actual js, you could start some pseudocode, write down what needs to happen in each step so you can logically separate them. For example here, it would be nice to see functions called something like calculateTipPerPerson(rather than just 'tip') or calculateTotalPerPerson - when you work in a team it's important for everyone to be able to follow the logic you followed :) hope this helps!

    Marked as helpful
  • One nne•50
    @Onenne1
    What are you most proud of, and what would you do differently next time?

    The use of custom CSS properties

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

    Trying to vertically align the maker on the <ul> to always be at the middle of the text

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

    Trying to vertically align the maker on the <ul> to always be at the middle of the text

    Frontend Mentor | Recipe page

    2
    Agata Liberska•4,075
    @AgataLiberska

    Hi, the styling options for ::marker are quite limited, if you want it aligned vertically with the text, I'd just remove it and add a ::before instead, and use flex etc.

    Wondering why there's an empty paragraph at the bottom, after the article?

  • uptown_girl•480
    @uptowngirl757
    What are you most proud of, and what would you do differently next time?

    I'm glad I was able to troubleshoot and fix the issue with the disappearing SVG background while positioning the image. It took some research, but thanks to the internet, I found the solution!

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

    I'd love a clear explanation on how to make an <hr> really thin—height: 1px doesn’t seem to be enough. Also, I need a better understanding of positioning SVGs. The SVG in my background doesn’t quite match the target design. How can I achieve the exact look I want?

    Product preview card using SCSS

    1
    Agata Liberska•4,075
    @AgataLiberska

    Hi, the card looks great, but I think rather than having the .profile class on main, it would be good to use a semantic element like article for the card itself, and just use main as the container. I see you're using article for the stats, I think this could just be a ul with list items. Article would be used as a container for a content piece that is a thing on its own, and the profile stats don't make sense outside of the content of the whole card. Also be careful about section tags, they mostly make sense in slightly larger projects. Think of them like sections of the page. For example, when you're looking at this page, the whole "community feedback" could be a section, it has a heading and some content. That's not necessarily the only use but I think it makes more sense that way :) Also sections should always have headings.

    To answer your questions, you would need to use background-repeat: no-repeat and then background-position to push the circles into the two corners. As you're using two background-images, you can pass separate position values, just separate them with a comma like background-position: -50% -50%, 20% 30%;

    And for the hr,I'd just lower the opacity on it, that should make it look like it's a bit thinner :)

    Marked as helpful
  • Agata Liberska•4,075
    @AgataLiberska

    Hi Ricardo, visually your solution is nice, doesn't overflow on smaller viewports which is probably the most likely issue on cards like this. However, you could definitely simplify your html here, at the moment pretty much every element like a heading or a paragraph is wrapped in a separate div and that's really not necessary. You're also missing the <main> landmark and the card could really be an <article>, that's the element that components like this tend to match the best.

    For your scores, you're using input type="button" which also isn't the best option. Buttons and button type inputs should be used to perform an action, for example favouriting a page, or adding a bookmark. Here, we're selecting one of 5 options - and if you have a number of options and have to only select one, this really calls for radio inputs.

    I would also treat this as a form and use a submit event to update the selected score.

    Hope this helps :)

    Marked as helpful
View more comments