Skip to content
OverviewSolutions
15
Comments
11

Vishal

@vb8146649260 points

I am a web developer

Latest solutions

View more solutions

Latest comments

  • Vishal•260
    @vb8146649Posted 3 months ago

    !!!This isn't properly structured.!!!

    • use landmark tag such as main , footer , header . i.e the card should be inside a main .
    • dont use br unnecessarily , like you did in both heading and p . Make it flow naturally .
    • use h2 or lower heading since when integrating this component this wont be the main heading of a page , hence it should be h2 or lower.
    • use text-align:center in heading also .
    • I see the problem , you used width:fit-content in styling the body of the component thats why you have used br tag to mitigate the disaster . Its a bad practice dont use it like this. instead use a max-width styling that should be in rem or em , using px or vh or vw is never generally recommended .
    • No need to use flex since the tags are block and all will be displayed one after another. Using flex unnecessarily can only lead to disaster .
    • Accessibility : the image tag should have a well defined description , not like alt="image" when the image is important like a qr.
    0
  • Vishal•260
    @vb8146649Posted 3 months ago
    • Use LandMark i.e main tag in body.
    • Give alt attribute here , It conveys a important thing in the component .
    • Use width in rem rather than px in .container class .

    Rest All is Good , Great Work!!!

    Marked as helpful
    0
  • Vishal•260
    @vb8146649Posted 3 months ago

    This is very badly done .

    • I recommend you to try to make it with just html css and js , no need to use react , it will just complicate the thing .
    • Styling is bad . Needs improvement.
    0
  • Vishal•260
    @vb8146649Posted 3 months ago

    This is Good

    • Good HTMl structuring , very easy to read .
    • Dont give alt to decorative images , alt tag is used to give description of something useful , this image doesnt convey anything useful .
    • I understand that you want to give custom cursor to the .button class but it doesnt have any interactivity , this may confuse the user .

    Rest All Looks Good Great Work

    Marked as helpful
    1
  • TCHINGUÉ MAKAMTÉ Patricia Kévine•70
    @PattykevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I do my best to respect the design of the page.

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

    Represents the design of the non-numeroted and the numeroted list.

    Recipe page design

    1
    Vishal•260
    @vb8146649Posted 3 months ago

    This is not correctly done !!!

    • First you should use the colors given in the style file for background.
    • Next the <table> tag of HTML should be used for containing the nutrition class in your code .
    • <span>&nbsp;&nbsp;&nbsp;0g</span> This is a very wrong practice try using css for styling this . It isnt good when reading the page through a screen reader .
    • Use <footer> tag for landmark the attribution div element.
    • Its always a good practice to use a reset.css file to remove any inbuilt browser css style that will be applied to the webpage.
    • You have used too many divs without any purpose . Always try to make the structure of the html easy to navigate through and understandable .
    <div class="container">
      <div class="container-elements">
    • Dont use px unit in max-width or padding always use rem or em since , many devices have different base font size and your site should be adaptive to these font sizes .
        max-width: 1200px;
    • The Most Imp Thing site isnt responsive , the img doesnt take the full width of the screen in mobile devices .
    • Use padding on the body tag to keep the container from touching the screen .
    Marked as helpful
    0
  • CoolNight99•350
    @CoolNight99Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I think I got the functionality correct but the design is slightly inaccurate to what was given despite my many attempts to fix it.

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

    Besides the design, I mainly encountered challenges with getting the active states for the rating buttons to work properly but I was able to do it with some trial and error.

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

    How to make the design match the given design.

    Interactive rating component

    1
    Vishal•260
    @vb8146649Posted 3 months ago

    Its nicely done , Only thing that I could think of that could make it better would be to use radio inputs , since you can choose only one of them and it is also better understandable . It would also make your code better readable for people with disabilities . Other than that all looks good .

    0
View more comments