Skip to content
OverviewSolutions
15
Comments
18
Md Abid Hussain
@md-abid-hussain

All comments

  • ijohnst•230
    @ijohnstSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Getting it done and including a table, its been years since using one

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

    Mostly getting the card and top image to take up the whole screen on mobile and have space around it on desktop. I overcame it with wrappers and media queries

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

    Not sure this looks great on every screen size, so more tips on how to make it look like the desktop and mobile pictures in the file

    Recipe Page HTML/CSS

    1
    Md Abid Hussain•400
    @md-abid-hussainPosted 6 months ago

    Congratulations on completing the challenge. Your solution looks really good.

    I have a suggestion for writing css. Instead of writingmargin:0 or padding:0 to all selectors, you can simply put it in css reset

    *{
    margin:0;
    padding:0;
    // rest of the reset
}
    0
  • Md Abid Hussain•400
    @md-abid-hussainPosted 9 months ago

    There are a few points I would like to point out to improve your solution:

    • Try using semantic HTML: Instead of div you can use section or main as it makes HTML more comprehensible by better defining the different sections and layout of web pages. Also, your page should include one h1 heading tag.
    • Separating CSS and HTML: It is always good to separate the styles in a CSS file.
    0
  • Md Abid Hussain•400
    @md-abid-hussainPosted 10 months ago

    Congratulations on completing your first challenge

    However your paragraph is overflowing from container.

    This can happen if you set the height to the value lower than required. If you don't set the height property it will be set to the max content.

    Also align-items and justify-content is property related to flex box and have no meaning if not used with flex box

    As a new frontend developer i would suggest you to stick to given design as much as possible because it can help you to understand the basic of css and later on you can style as per you desire.

    Below are the resources which helped me in learning css

    Web.dev

    Dave gray CSS playlist

    And feel free to ask whatever doubt you have there are many awesome people on this platform who will help you.

    Marked as helpful
    0
  • Mevindu-Dev•10
    @Mevindu-DevSubmitted 10 months ago

    Whats a easier way to get positioning of elements rather than messing around with px?

    Html and Css

    3
    Md Abid Hussain•400
    @md-abid-hussainPosted 10 months ago

    There are many ways to position an element. If you want tp add space between the content you can use padding or margin. Both have different use cases.

    I think you are asking for the way to center the content on screen.

    Easier way is to use either flex box or grid as display property.

    Resource 1 - docs

    Resource 2 - videos

    These resources helped me in learning css. I hove this can help you as well.

    Marked as helpful
    2
  • Md Abid Hussain•400
    @md-abid-hussainPosted 10 months ago

    Great job completing this challenge but it will be great if you can load and show an advice as the page load. It only fetch the advice when button is clicked otherwise it will show blank box.

    0
  • Md Abid Hussain•400
    @md-abid-hussainPosted about 1 year ago

    Congratulations for completing the challenge

    Your implementation is almost similar to suggested design, however it is missing shadows.

    Apart from this I can suggest you writing more semantic html tags i.e tags that define the meaning of the content they contain. Example <main>, <section>, <header>.....

    [Why semantic HTML]https://www.thoughtco.com/why-use-semantic-html-3468271)

    Also

    • You can center item using grid.
    • Add a max width to image so that it fit into the available space
    Marked as helpful
    0
  • Md Abid Hussain•400
    @md-abid-hussainPosted over 1 year ago

    Your solution is great. HTML and CSS are well written. Instead of writting svg directly in html it will be good to separate it.

    You can start learning javascript or you can also learn css framework like bootstrap or tailwind.

    Best of luck for you future learning

    Marked as helpful
    1
  • Md Abid Hussain•400
    @md-abid-hussainPosted over 1 year ago

    Congratulations ✨✨ on completing your first challenge on frontendmentor.

    I have few suggestion to improve design and accessibility

    • There is an issue with the break point of the media query : Try applying the break point when the window size reaches the width of the component. In your case it break when width of browser is equal smaller than the width of component and which causes vertical scroll bar.
    • Using semantic HTML : Semantic html is helpful in defining sections of your web page. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.
    • You can make the body cover the whole screen by applying min height in style

    There are few resources that may help you:

    Marked as helpful
    1
  • Md Abid Hussain•400
    @md-abid-hussainPosted over 1 year ago

    I need help with applying tint to the image

    0
  • Md Abid Hussain•400
    @md-abid-hussainPosted over 1 year ago

    Congratulations on completing this challenge

    However there are few suggestion that I want to offer:

    1. Using semantic HTML : Semantic HTML element can provide meaning to the structure of your web page and it can help assistive technology to navigate through your page. Tags like div and span has no meaning. Instead of div you can use main, header, footer and many more.
    2. By default body take full available width of the device and it automatically change as the size of the screen changes. By specifying width you take away this feature and due to this vertical bar appear in screen whose width is lower than specified width. You should remove the width from the body style and then your solution will be perfect.

    Now responding to your question

    What is the best practice for media queries? First you need to understand the meaning of responsiveness. Media query is just a small part of it. I would like to suggest the tutorial which help me understanding the responsive design:

    1. Conquering Responsive Layouts - By Kevin Powell : It is by far one of the best tutorial to understand responsive design and how it get affect by applying different styles to your page.
    2. Dave Gray - CSS tutorial

    Understanding responsive design and media query can be challenging. Keep working hard and you will get through it. Best of luck

    0
  • Md Abid Hussain•400
    @md-abid-hussainPosted over 1 year ago

    Congratulations on completing the challenge

    However there are many issues in your solution

    • The size of component is very small which make it difficult to read and see even for normal person.

    • You are not using semantic HTML. It is not mandatory but using it is good practice and can help the differently abled person use, navigate and understand your site.

    I'm assuming that you made the component small in order to make it fit in smaller screen. However it is not the right way. There are few suggestions and resource I would like to provide which can help you in improving your knowledge in HTML and CSS: Suggestion:

    • Try to follow style guide as much as possible which can be found in starter files under the name style-guide.md
    • Use responsive design to make content fit and adjust as per size of screen
    • Use semantic HTML
    • Keep learning and building : It may seems difficult at first in understanding css. But by learning and practicing you can improve.
    • Ask question and seek help when stuck

    Resources

    1. Documentation resources
    2. Tutorials on youtube
    0
  • Md Abid Hussain•400
    @md-abid-hussainPosted over 1 year ago

    Congratulations on completing this challenge

    There are few improvement I would like to suggest:

    • Using semantic HTML: Semantic HTML can make your site more accessible and help the search engines and other user devices such as screen reader to determine the importance and context of web pages. Elements like div, span doesn't provide any meaning. Headings <h1> to <h6> has different meaning from paragraph element p. You can learn more about semantic HTML from Semantic HTML
    • Validating your HTML and CSS files : You can validate your HTML and CSS files from W3.org - HTML validator, W3.org - CSS validator. Validation can help to identify problems in your HTML and CSS file.

    Overall everything is good. Using semantic HTML is good practice.

    Best of luck for future challenges

    Marked as helpful
    0