Traiing review #11
Traiing review #11
Conversation
There was a problem hiding this comment.
STATUS: REQUIRED CHANGES ♻️♻️
Hi @joskalenda
Good job so far! I know you worked hard to implement this project, I really appreciate the effort you put in! But there are some issues that you still need to work on to go to the next project, but you are almost there!
To highlight 🍾
- All linters are passing ✔️
- Good commit history ✔️
- Your design looks good 💯 ✔️
- Good PR description ✔️
- Follow GitHub flow ✔️
Required changes ♻️ ♻️
- This branch has some conflicts, kindly solve them.
- Check the comments under the review.
Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please ping me @tresorsawasawa when you comment so I can receive the notification or use slack with the same name.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
| <div class="nav-overlay off-display"> | ||
| <div class="nav-mobile-container"> | ||
| <div class="xicon-image"><img src="/assets/icons/xicon.png" alt="Exit Icon"></div> | ||
| <ul class="overlay-menu d-flex"> |
There was a problem hiding this comment.
- Well that with your project, however the link you are using to the image does not exit. It could be better if you attach to the image an existing path to the image 👍
| <div class="nav-overlay off-display"> | ||
| <div class="nav-mobile-container"> | ||
| <div class="xicon-image"><img src="/assets/icons/xicon.png" alt="Exit Icon"></div> | ||
| <ul class="overlay-menu d-flex"> | ||
| <li class="overlay-link"><a href="#works">Portoflio</a></li> | ||
| <li class="overlay-link"><a href="#about">About</a></li> | ||
| <li class="overlay-link"><a href="#contact">Contact</a></li> | ||
| </ul> | ||
| </div> |
There was a problem hiding this comment.
- Good job with your styling 👍 . However, I have noticed that your design is a bit different from the Figma design. According to the requirement your design must stick the Figma design 😄
Kindly review the following points: border-bottomto the<li>in theoverlay-menu d-flexclass.- The background colour of the menu
| </ul> | ||
| </nav> | ||
| <span class= "nav-humburger" id="humburger"><i class="fa humburger fa-bars"></i></span> | ||
| </header> |
There was a problem hiding this comment.
- The mobile version of your app is well-built, but when you are in the desktop version, the hamburger menu button should be
invisible.
I will suggest you to use the following syntax in the desktop version 👂
.nav-humburger {
display: none;
}
There was a problem hiding this comment.
Hi @joskalenda :wave,
Great work on making the changes requested by a previous reviewer 👏
You've done well implementing some of the requested changes, but there are still some which aren't addressed yet.
Highlights
✔️ Quick response in making changes 🏅
✔️ Meaningful commit message 🏅
Required Changes ♻️
- I suggest you resolve the merge conflict so you can update your base branch
Check the comments under the review.
Optional suggestions
Check the comments under the review.
Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
| </footer> | ||
| <div class="nav-overlay off-display"> | ||
| <div class="nav-mobile-container"> | ||
| <div class="xicon-image"><img src="/media/png/xicon.png" alt="Exit Icon"></div> |
There was a problem hiding this comment.
Nice of you to attempt to fix the issue with the broken link as requested by the previous reviewer but on the client side, I am still seeing that this issue is not yet resolved.
Kindly resolve this broken link issue as it is necessary for providing a solid 💪 user experience.
| <ul class="overlay-menu d-flex"> | ||
| <li class="overlay-link"><a href="#works">Portoflio</a></li> | ||
| <li class="overlay-link"><a href="#about">About</a></li> | ||
| <li class="overlay-link"><a href="#contact">Contact</a></li> | ||
| </ul> |
There was a problem hiding this comment.
[OPTIONAL] Since a ul tag doesn't have a focus state which helps for accessibility, to make this hamburger icon accessible I suggest you add a tab-index attribute so users who rely on the keyboard can highlight it by pressing the tab key. Also, consider adding the aria-controls attribute to make it even more accessible to users that depend on screen readers
| <li><a class="nav-link" href="#projects">Portoflio</a></li> | ||
| <li><a class="nav-link" href="#about-me">About</a></li> | ||
| <li> | ||
| <a href="https://www.twitter.com/in/joskalenda"> | ||
| <img src="./assets/icons/twitter.png" alt="twitter account"> | ||
| </a> | ||
| <a class="nav-link" href="#contact" | ||
| >Contact <i class="far fa-envelope"></i | ||
| ></a> | ||
| </li> |
There was a problem hiding this comment.
As requested by the previous reviewer, it is vital to at least make a copy of your website look like the Figma design to improve the UI, consider adding the bottom borders on each nav links.
| <nav id="desktop-nav"> | ||
| <ul> | ||
| <li><a class="nav-link" href="#projects">Portoflio</a></li> | ||
| <li><a class="nav-link" href="#about-me">About</a></li> | ||
| <li> | ||
| <a href="https://www.twitter.com/in/joskalenda"> | ||
| <img src="./assets/icons/twitter.png" alt="twitter account"> | ||
| </a> | ||
| <a class="nav-link" href="#contact" | ||
| >Contact <i class="far fa-envelope"></i | ||
| ></a> | ||
| </li> |
There was a problem hiding this comment.
[OPTIONAL] As per the requirements, the nav links are supposed to link to their respective parts and a click on them should close the menu.
I suggest you implement this feature as it was in the requirement with the intent of providing a good UX
Mobile menu
Features ✅