Skip to content
OverviewSolutions
8
Comments
7
P

Sagi

@ratsagiWarsaw , Poland150 points

Computer Engineering MA

Latest solutions

View more solutions

Latest comments

  • Chinedu Daniel Okeke•340
    @Sage-25
    What are you most proud of, and what would you do differently next time?

    I am not really proud of this implementation, I tried everything to ensure the right container stretches at the rate at which the left container did but all to no avail.

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

    Trying to figure out how flex works and tweaking continuously to ensure it fit's different screen sizes when in responsive view.

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

    How I could have made it look better compared to how it currently looks at the moment, I tried restricting myself from using a fixed width so it flows well when different breakpoints are touched.

    Implementation for testimonial grid

    #accessibility
    1
    P
    Sagi•150
    @ratsagi

    Hello,Congrats that you completed this challenge. I noticed that you completed only the mobile layout. You should also do desktop and tablet versions. Furthermore, this challenge recommended to use grid instead of flex. You should use meaningful html markup instead of divs. For example it is recommended to use figure figcaption and blockquote for this challenge. It's not allowed to have multiple h1 elements on web page. They are all paragraphs. I suggest you to start from the begining of the learning path and don't skip the fundamentals.

  • Gabriel Schaal•120
    @Fayhild
    What are you most proud of, and what would you do differently next time?

    I did it fast but could be better, however too lazy to make it look exactly like the in the mockups :p

    simple static flexbox solution

    1
    P
    Sagi•150
    @ratsagi

    Hello, I see you made only mobile version of the site you should also create for desktop. I noticed that in small screen sizes you have an overflow probably you used fixed pixel sizes. It is hard to review your code because your repository link seems broken. I couldn't find it. Overall looks good.

  • Csaba Hell•220
    @hellcsaba
    What are you most proud of, and what would you do differently next time?

    This is my first project where I used Block Element Modifier (BEM) convention and Mobile-first workflow. In my opinion, the project was too small for experience the benefits of BEM but it was a good opportunity to get familiar with the concept.

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

    In desktop view at the bottom of the image I could see 4pixels of the background. After some research I managed to resolve it by setting the display to block. Moreover, previously I followed desktop-workflow and now it was more difficult to do the other way around, especially the alignment of the screen sizes.

    Responsive product preview card using BEM convention

    #bem
    1
    P
    Sagi•150
    @ratsagi

    Hello there,

    Congrats on completing this chellenge!

    I have some suggestions to improve your solution:

    • I noticed that you named main landmark as a product actually it is not correct because product card is a small part of it. this main landmark might have multiple of them so the correct way to use article or just a div therefore it should be h2 not h1 more details you can find here
    • Vertical alignment doesn't work on mobile version because you have forgotten to provide the min-height: 100svh for the body.

    Overall solution is good!

    Hope you find this feedback helpful!

    Good luck!

    Marked as helpful
  • Adrian Rangel•620
    @radriann21
    What are you most proud of, and what would you do differently next time?

    Proud to complete the project and that i was able to do it easier than i thought. It really was a fun and satisfying project, and I loved the use of tables for the nutrition chart!

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

    Remember to use tables, they really are a headache

    Responsive Recipe Page Basic

    #bem#accessibility
    1
    P
    Sagi•150
    @ratsagi

    Hello, Adrian, By looking at your solution I noticed some issues:

    • Use semantic html instead of div and span because they have a special meaning in html structure or you need to assign it manually for each div element the role for example:
    <div role="banner">
</banner>
<div role="main">
</div>
<div role="footer">
</div>

    I noticed that you used article landmark to wrap as a container. However, it is not appropriate one because it is a main content of the page . In every website one main landmark must exist. I also noticed you used span to make some words to look bold but instead I recommend to use strong element to make words bold it is semantically correct way. at the end you used footer but forgot to change closing tag to it it is still div element. It is important for screen readers.

    • In terms of css, I have noticed you tried to use relative unit like rem it is a good practice for accesibility but you need to be consistent. Avoid using absolute units for example pixels. In some places you used them change pixels to rems. Also don't forget to remove the last border-bottom of table header and body.

    Overall Good job

    Marked as helpful
  • Mohammed Majd•120
    @MajdMohammed
    What are you most proud of, and what would you do differently next time?

    I am proud that i made many mistakes so i could learn from them Thanks to frontendmentor team ! next time i will respect the accesibility and i will use proper font size and width for the design.

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

    I was confusing between what technics should I use to get a responsive design, and also what type of units should I use for font size and width etc... But thanks to the team members of frontendmentor I could get a useful feedback which helped alot on my research to fix all the mistakes.

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

    The areas i need help with HTML/CSS structures, using proper CSS units in the right place, get good score in the lighthouse, responsive designs. I think All I need is tones of practice on different type of projects.

    Simple Responsive Design

    #accessibility
    1
    P
    Sagi•150
    @ratsagi

    Greetings Mohammed. Good job on completing the challenge!

    I have some suggestions for you to improve your solution.

    • You don't have to wrap your image with div to center it because you already did it with "main-container".
    • for qoutes there is a special tag like "blockquote" use it instead of paragraph. This helps screen readers to recognize "Front-end Developer and avid reader." this sentence is actually a quote not a paragraph.
    • in main-content you used to center vertically by using flexbox property "align-items: center" but to center horizontally you choose to use "margin: 0 auto" instead of it you could use "justify-content: center" By looking at your solution I find out the difference between them. If you use margin it automatically assigns margin to the main-content however if you use justify content it does not so I think the best way to center horizontally is justify-content for your solution. -From the responsive point of you, avoid using fixed units like px instead use rem. I noticed that you used them but try to be consistent because if you don't in small sceen sizes you notice unreadable content. I think for font-sizes clamp is not necessary just rem is enough.

    I hope you find it useful!

    Happy coding!

  • Lucas Costa•50
    @lucasgcosta1
    What are you most proud of, and what would you do differently next time?

    I'm happy that I was able to do it alone and have a result that was very close to what I expected.

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

    the main challenge for me was positioning the avatar image and the name side by side.

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

    I couldn't leave the paragraph in the same way as in the design, if anyone knows, give me a hand

    Blog preview card

    1
    P
    Sagi•150
    @ratsagi

    Greetings, Lucas!

    Good job on compliting this challenge! I have some suggestions about your code that might interest you:

    1. Try to use html 5 semantic landmarks like "main" "section" "article" "footer" instead of div or give the div the role like "main" or "banner" navigation and so on. It is important for screen readers.
    2. Try to use relative units instead of absolute for instance rem for fonts and em for padding and margin. It is important because if you change font size of your browser settings it is difficult to read. The text and other things must be responsive for all screen sizes.
    3. Use css custom property. it is important for maintainability for example, if you want to modify something you change the property value in one thing as a result you change it everywhere it needs to be. You save your time if you use it.

    I think the solustion that you are seeking is line-height. If you apply it, the paragraph of your body should look similar to design.

    Marked as helpful
View more comments