Skip to content
Submitted over 2 years ago

Responsive landing page built with react, grid, html , css

vijayaā€¢240
@Vijaya03
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Please give honest feedback

Community feedback

  • Chandaā€¢800
    @Chanda-AbdulPosted over 2 years ago

    Overall, you did a really great job on this challenge!

    A few suggestions...

    • try to render your data/text dynamically. Create a separate file to store data and import that into the component, then render it dynamically. This is a standard react coding pattern, and it will be very helpful when you are working on larger react projects and need to keep your code organized. This video has a good example of this https://www.youtube.com/watch?v=E5thVref6JU

    • Also, have you tried React Styled Components to organize your CSS?

    I hope this helps!

    1
    vijayaā€¢240
    @Vijaya03Posted over 2 years ago

    @Chanda-Abdul Thanks for the suggestion. Will surely try to make seperate files to store data and then use it in components. One thing to ask here is that I have just started using react and got little bit confused over which css style to use. External file for css also works just fine. Yes I had used React Styled components couple of times but really didn't understand what exactly is the difference it makes from conventional external css apart from using React state values or any ternary operators. Thanks for your help

    0
  • Shashree Samuelā€¢9,260
    @shashreesamuelPosted over 2 years ago

    Good job on this challenge Vijaya, keep up the good work

    In terms of your accessibility errors

    • You need a <title> tag within your <head> tag to indicate a title for the document.

    • Your image tags need an alternative description, simply specify the alt attribute within the image tag and have a description of the image

    • Wrap all your content within a <main> tag to get rid of accessibility errors.

    In terms of your validation errors you are not allowed to have a style tag within the header tag, I recommend having the tag within a main tag in your body like this

        <html lang="en">
    <head></head>
    <body>
      <main></main>
    </body>
    </html>

    All other validation errors will be corrected when you fix the accessibility errors.

    I hope this helps

    Cheers, Happy coding šŸ‘

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord