My Personal Portfolio is done and i want to get some review before i submit

Code Feedback
1

Hello Wonderful people, I have just finished my HTML and CSS portfolio project and I would love some feedback before I make the submission.
any suggestion and scrutiny will be highly accepted and appreciated.
thanks in advance.
here is the codepen link to the project: THE CODEPEN LINK FOR THE PORTFOLIO

2

HI @Eprince!

I think your page looks great!

Just a few things I noticed.

You have one small error in your css concerning a duplicate selector. Open up the css analyzer to find and fix that.

The not yet text for the nodejs and react boxes don’t seem to line up.

Screen Shot 2021-01-18 at 7.45.33 AM
Screen Shot 2021-01-18 at 7.45.33 AM2258×704 62.3 KB

And the python one is cut off a little bit.

Screen Shot 2021-01-18 at 7.45.45 AM
Screen Shot 2021-01-18 at 7.45.45 AM1758×578 23.9 KB

On smaller devices the social media icons almost disappear.

Screen Shot 2021-01-18 at 7.47.08 AM
Screen Shot 2021-01-18 at 7.47.08 AM1012×254 44.3 KB

One optional thing you might want to add is a smooth scroll.

html {
  scroll-behavior: smooth;
}

Keep up the good work!

3

Thanks a lot for this wonderful review, i have been trying to fix this with a media query but it looks like i am messing things more up… hehehe, I will try till i fix it, i really appreciate your feedback. thanks.

4

Your page looks good @Eprince. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • The project links say “view the code” but the link is to your codepen page and then user’s have to hunt for the appropriate project

For more eyes on a better forum is “Project Feedback” (You can edit your post and change the forum)

5

@Roma Thanks a lot for your reply and insights, I appreciate your comments and I have learnt a lot from it, Thanks a lot.

6

One thing I would recommend you do with anything you build for the web is test with an increased text size. If you don’t know how to manually increase the text size, using Firefox, go to Edit->Preferences, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Your page should be able to handle a minimum of 200% increase in text size.

A lot of your issues regarding text size responsiveness can be solved by using em units instead of px for height/width.

1 Like
7

Thanks for your reply and suggestions, I will take them into account… I appreciate it.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.