Complete mobile version Portfolio #2
Conversation
There was a problem hiding this comment.
Hi @iambenkis 👋 ,
Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!
Highlights
✔️ Good use of Github flow
✔️ Linters setup correctly
✔️ Nice UI design
✔️ Organized and clean code
✔️ Good use of Grid and FlexBox
Required Changes ♻️
Check the comments under the review.
-
Kindly use a more descriptive pull request title. For example, you can say
Mobile Version: Add Works and About Sections. A descriptive pull request title gives an idea about what changes are included in the pull request.
-
Kindly use descriptive pull request summary. Similar to the pull request title, a descriptive pull request summary gives list of changes included in the pull request briefly. For example,
In this pull request, I have:
- added the works section mobile version HTML skeleton
- added the about section mobile version HTML Skeleton
- added styling both to works section and about section as per Figma design
- etc
- It is recommended to make frequent commits to capture changes in a meaningful way. You can make commits after finishing a unit of task. If are not able to come up with a short commit messages to describe the changes, it high probably that the commit is not small enough.
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.
You can also consider:
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.
index.html
Outdated
| <div class="project"> | ||
| <img src="./images/project1.png" class="project-img" alt=""> | ||
| <div class="project-txt"> | ||
| <h1 class="project-title">Tonic</h1> |
There was a problem hiding this comment.
- You should use only one
<h1>in an HTML page for semantic reasons. This will help for SEO and screen readers. It has to be assigned to the most important heading in the page.
h1
h2
h3
h3
h4
h4
h5
h5
h6
h2
index.html
Outdated
| <div class="project"> | ||
| <img src="./images/project2.png" class="project-img" alt=""> | ||
| <div class="project-txt"> | ||
| <h1 class="project-title">Multi-Post Stories</h1> |
There was a problem hiding this comment.
- Same as the previous comment about headings.
index.html
Outdated
| </div> | ||
| </div> | ||
| <div class="project"> | ||
| <img src="./images/project3.png" class="project-img" alt=""> |
There was a problem hiding this comment.
- Kindly add meaningful
altto your images so that your page becomes more accessible by screen readers.
index.html
Outdated
| <div class="caption"> | ||
| <h3 class="canopy">CANOPY</h3> | ||
| <img src="./images/Counter.png" alt=""> | ||
| <h3>Back end dev</h3> |
There was a problem hiding this comment.
- I believe these are not headings. Therefore, it would be semantically appropriate to use tags such as
<p>orspanfor that matter.
index.html
Outdated
| <ul class="icons"> | ||
| <li class="icon"><img src="./images/twitter.png" alt=""></li> | ||
| <li class="icon"><img src="./images/Linkedin-icon.png" alt=""></li> | ||
| <li class="icon"><img src="./images/github.png" alt=""></li> | ||
| <li class="icon"><img src="./images/angellist.png" alt=""></li> | ||
| <li class="icon"><img src="./images/medium.png" alt=""></li> | ||
| </ul> |
There was a problem hiding this comment.
- It is good that you used
- here. But, would it not be even better to add tags to wrap the images so that the page's visitors would click them to go to your social media profiles?
<ul> <li class="icon"> <a href="your social meida link"> <img src="./images/twitter.png" alt=""> </a> </li> </ul>
index.html
Outdated
| <!-- About section --> | ||
| <section class="about"> | ||
| <div class="about-content"> | ||
| <h1 class="about-title">About <br> Myself</h1> |
There was a problem hiding this comment.
- Similar to the comment about heading above, kindly change this to
<h2>to<h6>. I would recommend<h2>since this heading is second level heading next to the<h1>heading in the headline.
index.html
Outdated
| <ul> | ||
| <li> | ||
| <img src="./images/js.png" alt=""> | ||
| <h3>Javascript</h3> |
There was a problem hiding this comment.
- I believe this is not a heading and it semantically more appropriate to use other tags such as
pin here.
There was a problem hiding this comment.
Hi @iambenkis,
Good job so far!
May I highlight the following:
- The repo looks professional.:heavy_check_mark:
- There are no linter errors:heavy_check_mark:
- You have descriptive PR:heavy_check_mark:
- Your project looks good:heavy_check_mark:
STATUS: APPROVED 💪👏
Congratulations! 🎉
Your project is complete! It's time to merge it 
Great work on implementing the changes requested by the previous TSE
Optional suggestions
- Please check the comment 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, 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.
Checklist