Skip to content
Submitted over 1 year ago

Responsive landing page using Grid, Flex, CSS, Javascript

JWord•140
@jwren4170
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I had difficulty with the mobile menu. I think I should have done mobile first approach instead of desktop first. Also think I could have done a better job creating my own menu icons instead of using the svg's supplied, but wanted to use them because they were part of the challenge I suppose.

Anyway, html setup and css could definitely be better, but not bad for a weekend hobbyist I think!

Community feedback

  • Dylan Heslop•1,570
    @dylan-dot-cPosted over 1 year ago

    Not a bad attempt I have checked the website but not ur code as yet...

    But here are a few things that can make yours better

    1. Use google fonts and import them into your css file
    2. The website shouldn't be taking up full width - padding... it should be a whole container that has a certain max width like 1000px or so and have it centered.
    3. Responsive layout: there is too much padding for the mobile layout... at this breakpoint you could take up full width with some padding
    4. Responsive Navbar: The navbar isn't too bad but could use some fixing

    Overall not a bad attempt, you did well Just keep practicing and getting the designs straight and youll be good

    Marked as helpful
    1
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    iMAGE ALT TEXT 📸:

    • This homepage involves the header image, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with Image is not even explaining for what the image need to be used.
    • So update the alt with meaningful text which explains like Web3 Illustration
    • Example: <img src="./assets/images/image-web-3-desktop.jpg" alt="Web3 Illustration">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    1
    JWord•140
    @jwren4170Posted over 1 year ago

    Yeah, I forgot about that. Thanks. @0xAbdulKhalid

    0
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    @jwren4170 Glad you found it helpful ! 🤠

    0

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