Definitely one of the harder challenges I encountered on Frontend Mentor, especially with the difficulties of building a multi-layout navbar (since it's my first time), so if anyone has a more concise solution or know any useful knowledge on how to achieve the same outcome with a more efficient approach, please don't hesitate to leave a comment and help me out :D Thank you very much!
Might have procrastinated on this challenge way longer than I should have to be honest, but I finally completed it! This was also the first time I worked on a Frontend Mentor project involving an entire page (not just single components), so the CSS was quite messy and long. Therefore, if anyone has suggestions/feedback to help me organize my codebase better, please don't hesitate to leave a comment to help me out :D Thank you!
First time doing a front-end challenge involving APIs and data fetching, so there were definitely struggles along the way. I really need advice/feedback on the functionalities in this project, so if anyone has suggestions on how to improve, please don't hesitate to comment on this submission. Thank you :D
Follow-up question: what do you think about the loading screen implementation I made ? (I wasn't required but I thought it was a nice way to enhance user interest)
If anyone have any suggestions on how to achieve the cross-section layout for this challenge much easier/more efficient, please don't hesitate to let me know (I struggled with this part for quite some time) :D
Hi Muneeb, it seems that your project is incomplete, as the QR image is missing from the page and only the text section is visible. Please check your code and fix any errors you may have made. Good luck!
Great work on this project Bjoern! I noticed only a single accessibility issue with your code (see the report section for more details) where your attribution <div> is not contained within any landmarks:
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">BjoernBennat</a>. </div>In order to fix this, you just need to change the <div> tag into a <footer> tag (a landmark element in HTML). Also, adding transitions to your text hover would make the aesthetics even better (by using the same transition you used for your image hover). Hope this helps and happy coding :D
Brilliant work Kent! I just noticed a single accessibility issue in the report generated by Frontend Mentor, where there is no <h1> tag in your entire document. Other than that, your solution was very close in resemblance to the original design. One suggestion that I would make is to set up all your colors as custom properties to be used widely across your stylesheet simply by calling var(--your-color).
It was probably because I didn't phrase my suggestion well enough (quite hard to do so through text-only comments!), so I will paste in the link to my solution here so you can see what I tried to explain above. Hope this clears up any confusion you may have on our issue!
https://github.com/KaydenGiang2512/Article_Preview_Component
Best of luck :D
Hi Lacey, great work on this project overall. I actually completed this project a few weeks ago so I might have a solution to your "eye image opacity" issue, which is by separating the eye-icon from the NFT image into 2 separate <div> tags. After that, create another <div> as the overlay and use position: absolute for all of these to ensure that they stack on top of one another. By putting the eye-icon in its own <div> tag, the opacity attribute from the NFT image will no longer affect it, and you can independently set the opacity of the eye to your choosing. Hope this helps and happy coding!
P.S. the image is not horizontally centered in the entire card element, so that's another thing you should look into.
