Hey guys! I am Iftekhar Riyad. I’ve just finished my Portfolio. It’ll be great if you give a review. Thanks in advance.
3 Likes
its-a-bit-boring-also-m’aybe-use-a-shadow-or-2
You have a few errors in your code (click on the menu in the top right corner of the HTML/CSS panel in CodePen and choose ‘Analyze HTML/CSS’ and you should see them), so try to fix that. And I think your page looks way too similar to what they gave us as an example for the assignment (I’m referring to this one). While there’s nothing wrong with studying their code and looking at the examples, the point of these projects is to get practice and start coding independently, so don’t be afraid to play around with your own ideas. Even you fail a couple of times, you’ll learn a bunch in the process 
I made this similar to the example that is given to us because I like that design and didn’t have any idea at that time. I’ll change it along the way of learning more stuff. Thanks for your review. I can’t find the"Analyze HTML/CSS" button you told me.
Thanks for your review.
It’s right there (and then the same for CSS):
Hi @riyadif7, your page looks okay. Some things to revisit;
- Keep the test script when forking the pen (
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 10/12 user stories. - Make it so that when a user clicks on any of your projects it opens in a new tab.
- You have a lot of typo’s in HTML. Some of which will show with ‘Analyze’, some are careless typo’s such as this from line 40;
<p><span class="code"><</span>Tribute page<span class="code">/></span></p>- There are a few similar lines so carefully review your code.
It looks okay.
Two of these font-awesome inclusions - those that are pointing to local files and /path/to/ (which comes across as copy/paste without understanding) - cannot be resolved by a client. A local path never makes sense, and a relative path when you don’t have any control over the files on the server makes very little sense.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/16a5f55265.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="file:///E:/Web%20dev/projects/portofolio/fontawesome-free-5.11.2-web/fontawesome-free-5.11.2-web/css/all.css">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
The Show All button could use a little more description or a github icon. My expectation when reading “Show All” is that the gallery I’m currently looking at will show me additional items, not that I’ll be shuffled offsite to github. Maybe that’s just me.
The “How do you take you coffee” line seems a bit random. There’s nothing else coffee related, imo. Links to your digital presence on the web don’t suggest to me that we’re going to have coffee or in any other way meet in the physical world. To me, the line just doesn’t fit anything else on the page.
The other issues (typos, missing quotes, failing tests etc) have already been noted by others.
Oh! thanks! I’ve analyzed and fixed some problems . 
1 Like
I can’t find anything wrong with line 40 . can you please be more specific
Thanks for your review!!
My apologies, I read through your code fast and my editor flagged this;
<p><span class="code"><</span>Tribute page<span class="code">/></span></p>
I see what you’re doing now. It’s a nit but it reads better and nothing flagged when changed to this;
<p><span class="code"><</span>Tribute page<span class="code">/></span></p>
I like it. I would suggest you also create some hover effect on your projects (.proj-cell) as well as the responsiveness of the page’s padding-bottom.
Wow! impressive job!
I love your layout and color. Your animations are smooth and pleasing, too.
Your font really matches your coding style. Great job on that.
I think responsive pages are okay and no padding-bottom needed. But if you find somewhere(at a secific screen size) in my design where needed some padding please tell me!
Well, I’m new to coding but I would add these to #contact in CSS:
max-height: 50rem; height:100%;
and use this on #footer :
height:3rem ;
use “rem” instead of “vh”