Cy499_Studios Personal portfolio Page-Feedback welcome!

Hello everyone!

This is my Personal Portfolio Page; I’ve been active in the forums lately and I realized I haven’t submitted my own Projects for review so here’s the last project to finally complete the Responsive Web Design course.

The Project

Here’s the CodePen link:
https://codepen.io/BenTechCode/pen/XWKQMPE

Feedback

Here are the main points of feedback I need work on:

  • Html structure: I ran it through W3 so there shouldn’t be any problems but if there are, I would really like to know.

  • CSS Design: So, the design itself is not final and I want to make my own design in the future, but my design would not allow me to pass FCC’s tests, so I had to suck it up and go with FCC design. I’m not good with webpage colors so if anyone has any tips about that feel free to reach out. I’ll also happily take any advice about the overall design. Also, I ran my CSS through W3 as well so there should be no syntax errors.

Thanks for reading and have a wonderful day!
Best,
Cy499_Studios

1 Like

Hey @Cy499_Studios!

The page looks good!

  • The images are going outside the title color.
1 Like

@codely, Thanks for the feedback! BTW are there any recommendations on how to fix it? I never even noticed it until now.

Best,
Cy499_Studios

Maybe using width in CSS?

true, or maybe putting a selector on the tags with the images, I’ll experiment and see what works

1 Like

Your page looks good @Cy499_Studios. 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.
    • Mentioning because there are elements that are missing from your boilerplate. You can review this for an understanding of the HTML boilerplate tags.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar. My laptop and desktop screens are not large enough to get rid of the scrollbar. And it’s there on smaller screens too. There are a couple of places where elements overflow the container one of them is the images of your projects. Not sure if you’re aware but codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
      https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
      or
      https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
      • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio

Thanks @Roma!

Yeah I’m going to change it later, also I never knew CodePen even had that feature!

Thanks for the insight!
Best, Cy499_Studios

Also thanks for the boilerplate info, I need to make that emmet shortcut LOL! Also btw I know all that stuff about CodePen not needing most of the boilerplate but I do that on purpose because I plan to upload all my projects to Github and I develop all my projects and code through VS code.

I only use CodePen because of how convenient it is to share with everyone.

Wait but what am I missing from my Html? Can you elaborate more?

If not then I’ll just have to figure it out myself :smiley:

The head element for instance. That’s where the links to the font and font awesome would be placed.
The test script, being JS would go right before the closing body tag. That element is also missing.

Ah, ok that makes sense