Skip to content
OverviewSolutions
6
Comments
8
Lokesh
@Lokesh8055

All comments

  • k-hroma•150
    @k-hroma
    What are you most proud of, and what would you do differently next time?

    I have started working with relative units to improve scalability and flexibility of the design. Also first time working with grids.

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

    I generally find the biggest problems in finding the right measurements of paddings and margins in flexbox and grids

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

    I would like you to help me in good practice and writing of both the html code and the css code.

    Responsive Recipe Main Page using CSS, Flexbox and Grids

    #accessibility
    1
    Lokesh•110
    @Lokesh8055

    @k-hroma,

    1. The horizontal line color looks a bit off from the design provided
    2. The card size and all the content inside it gets very small when i change it to responsive mode and check for different screen sizes
    3. keep the container-title and time in a seperate section container.
    4. also use min-height and keep value to 100svh in the main tag instead of keeping it in rem value

    please check all these points

    Marked as helpful
  • Lokesh•110
    @Lokesh8055

    Got some feedbacks for this solution:

    1. Make sure that your are asking for proper feedback whenever you submit a solution to frontend mentor so that others can better help you out.

    2. get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.

    3. Look up how and when to write alt text on images. There are some great posts about this in the resources channel on discord. Remember, alt is human-readable content not code. This image is really important, so needs a proper description. It needs to say what the image is (QR code) and where it goes to in this case (to FrontendMentor.io).

    4. when building single components like this you still need to consider the context of where that component would be used in a real site. This card would never be used to serve the main heading on a page, so you know it shouldn't have a h1. Use a lower importance heading level like h2 instead.

    5. id tag should be used only once per website. if you want to select multiple elements try to use class based selector and give a proper naming convention. you can read this article(https://www.frontendmentor.io/articles/understanding-css-naming-conventions-bem-oocss-smacss-and-suit-css-V6ZZUYs1xz)

    6. make sure the component can't hit screen edges by giving a wrapping element a little padding on all sides (eg body or main in this)

    7. please updated your Readme.md file properly explaining what you have done. you can go through ReadmeTemplate.md file for better understanding

    8. Add screenshots in your code for different screens.

    9. use rem units for font sizes, width also.

    Marked as helpful
  • P
    Eric Kumasaka•180
    @emkuma
    What are you most proud of, and what would you do differently next time?

    At least I attempted to make it responsive.

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

    Brain fog, helplessness, frustration, anger, setbacks.

    Exercise, meditation, coffee.

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

    Appreciate getting newbie appropriate feedback.

    Try to be respectful.

    Thank you.

    Eric Kumasaka

    I attempted to make this design responsive.

    2
    Lokesh•110
    @Lokesh8055

    Hi @Eric Kumasaka,

    Some suggestions:

    1. There are some accessibility issue. remove challenge by text from below
    2. card width looks different in desktop. in Mobile card looks very small and it is shown above instead of center aligned
    3. Also your github link to code doesn't work.
  • Omargarcia21•410
    @Omargarcia21
    What are you most proud of, and what would you do differently next time?

    Me siento orgulloso de poder hacer este desafio y poder ver mi nivel de css mejora poco a poco.

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

    El desafio que encontre es el posicinamiento de los elementos, lo pude solucionar con css y un poco de documentación.

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

    Todo feedback es bueno, todo es aprendizaje.

    Blog-preview-card-main

    #accessibility
    1
    Lokesh•110
    @Lokesh8055

    @Omargarcia21

    Few suggestions from the screenshot provided:

    1. Card, text, spacing, background color everything completely different from original solution.
    2. please go through your code once again and make sure that you match the design provided by downloading Figma design
  • Lokesh•110
    @Lokesh8055

    Your solution looks super cool

    Keep your screenshots under a single folder

    Good Work Binyam

  • Sara-Mousa•120
    @Sarah-Mousa
    What are you most proud of, and what would you do differently next time?

    I did it in a short time , usually I used to spend many hours to finish a small project

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

    fixing the width according to the content.

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

    I need to know the method of choosing the proper font size measurement.

    QR code Preview using HTML & CSS

    #accessibility
    2
    Lokesh•110
    @Lokesh8055

    Hi Sara,

    • Please check the spacing, looks like your content is sticking on to the top
    • check the accessibility also
  • Lokesh•110
    @Lokesh8055

    Your site is showing 404 error not found.

  • Lokesh•110
    @Lokesh8055

    Hi Anosha, Site looks good just now worked on this one.