Personal Portfolio Page & (+ FCC 4 responsive projects) Feedback requested

Code Feedback
1

Hi All,
Here’s my FCC Personal Portfolio showcasing the other four FCC responsive website projects as well.

Any constructive feedback on the portfolio or on any of the other responsive websites projects linked within the portfolio would be greatly appreciated.

https://codepen.io/zenmtnbiker/full/qzdVqg

Mahalo,
Terry

2

I’ve just looked at the Portfolio Page for now. I may look at the others if I have time.

The page generally looks very good but just a few points of criticism:

  1. Your font/ font size/ font color for text describing each project is not right. It is very hard to read due to these factors in combination with the background. I think the font-size is definitely to small but I also think that font is a bit fuzzy.
  2. I presume you made this page out of CodePen and just copied and pasted it in as the code in the HTML editor should just contain what goes in the body tag of the page. The head element content goes in the corresponding section of the settings menu.
  3. You have an empty element with id contact on your page. I don’t believe it has any use so you should get rid of it.
  4. Maybe use some more media queries so your page is more responsive on smaller screens. I’m on a desktop but when I reduce the screen size many elements go off screen. Maybe try making your project-tile elements reorganise into columns if the screen is small.

That’s pretty much it. Great effort though.

1 Like
3

Hi Paladinvaan2018,

I really appreciate the feedback. You are correct, my font style selection for the project tile details was probably not the best choice. I just found the font style interesting and wanted to use it in some way. Going forward, I pulled it and made the font style more readable. I suspect the font I previously selected would be better suited to a high contrast, larger font size and limited usage presentation, probably more suited to something like a banner ad.

For item 2.
Correct, I did initially develop the portfolio in vs code and then transferred it over to codepen.
For item 3 and 4.
Removed the empty tag setup and regarding item 4. I device tested it on an iphone 7, ipad pro and chrome dev tools before submitting to FCC. All worked and rendered as expected. But correct, I could probably add in more media break points to account for user desktop resizing. I’ll do that at a later point.

Again, really appreciate the feedback and Mahalo for your time.

T-

4

Hi @Mtns2Surf, I just did a quick look. Looks okay but not responsive on smaller screens. And as mentioned, the font is hard on the eyes with the white contrasting with the white in the background.

  • there’s not four other projects. There’s only three others, don’t see the product landing page.
  • use code validators. There’s CSS and HTML errors in some of your projects.
  • the survey form falls apart on smaller screens.
5

Thanks for the feedback Roma.

Do you mind letting me know what you used for testing - browser ie, ff or chrome?
DT screen size and mobile device type.

I tested the sites in codepen debug mode using chrome dev tools for device and responsive testing and I hard tested with a ipad pro and a iphone 7. So I’m not clear on why your only seeing 3 project tiles not 4 and how the survey form falls apart on smaller screens. (smaller screens as device tested?). The html/css issues have been resolved after rechecking with codepen html and css analyzer.
Thanks again, for your time.
T-

6

@Mtns2Surf, I’m on a MacBook Pro running latest Chrome.
Kinda my bad. When I was looking at your project I was on your codepen page and it only shows four; tribute, survey, tech doc and portfolio. Indeed, the link in your portfolio does show the product landing page. Odd…following the ‘codepens’ link in your portfolio neglects to show the product landing page.

Re: the survey form, since it’s not mine I don’t have the debug option so I just shrink my browser. Not sure how to add a screenshot here but this is what I see

7

Thanks again Roma,

Found the issue with the survey form, it appears that issue was only with iphone 5se media sizing. I fixed that issue, quick fix the media query for that.
So back to the code pens. Try it now, the product image I’m using is from competitive cyclist and its my take on how that product can be presented. I thought would be fine since its just a mock of presentation and I’m just guessing that I’m breaking any copy right issues here since I’m selling the product. But if it still doesn’t render for you I can probably stick figure draw up a bike jersey image and use that instead.
However I need to get going on all the those js projects which is the real meat of FCC. :slight_smile:
Thanks again for you time.

T-

8

Wow! you did a great job on this!
The project tiles should have a bit more opacity at default and more when hovered over.
Use the border-radius css command a bit more. There are a lot of sharp corners.

9

Done! Thanks for the feedback Conner, that did make the spice up the contrast a bit better. :slight_smile:

10

Nice man! much better!