Skip to content
Submitted over 3 years ago

Responsive Website Using HTML, CSS, and Vanilla JavaScript

Kyle•155
@kyle4real
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blogr landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

How does it look? Question: I added the dropdown event listeners to the nav link divs, and even though the chevron elements are children of the nav link divs, when you click directly on them, the event doesn't trigger.. how do I fix this?

Community feedback

  • Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi @kyle4real!

    I think you really nailed most part of the implementation. Although, there are some small, but noticeable features you can adjust:

    1. The image assets you used for the mobile view are the desktop versions. In the images folder two different image designs were provided for each screen size. You can switch them using media queries.
    2. You forgot to make the footer menu "clickable links". Try wrapping them with an a tag.
    3. The SVG background in the "State of the Art Infrastructure" is not aligned properly on mobile. You might want to adjust this using media queries. Although, your implementations don't have to be pixel perfect, but features like that seem aesthetically important.
    4. If you try viewing the page on very large screen sizes like 5000px, you will notice that the page is not responsive. You can solve this by wrapping and centering the main content of the page.
    5. Also, whenever you submit your work, try clearing all the HTML and Accessibility errors on the page by clicking on "View Report".

    Overall, you did a really cool job. I love the mobile menu drop-down and sleek finish.

    Keep coding! 😎

    1
    Kyle•155
    @kyle4realPosted over 3 years ago

    hello @folathecoder, Thank you for the compliment and feedback! The list of features you provided is great, most of them completely slipped my mind. I'll go ahead and implement what I can - thanks again.

    0
  • Account deleted

    Hey @kyle4real,

    Your solution looks awesome. I really like the way the dropdown menu slowly fades in when resizing from desktop view to mobile view.

    Regarding your chevron issue, I would recommend going through each iteration of event listener you added and check if everything is working the way you wanted to.

    Another thing is that I don't seem to see any reference to the chevron icons in your script. Maybe the solution could be to just add an event listener to document.getElementsByClassName('.fa-chevron-down')

    Hope that helps

    //Kenny

    0
    Kyle•155
    @kyle4realPosted over 3 years ago

    yo @ktra99, thank you for the compliment and feedback, much appreciated!

    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