Looking for feedback on my Personal Portfolio Project

Code Feedback
1

Just finished the last web design project, any comments or advice is appreciated. https://codepen.io/M3W2/full/MWaNeLz

2

I think it looks really good. I like the green tile background.

Iā€™m a beginner, but I took a peek at your CSS, and I never saw it formatted the way you do, with all the styles for an element on one line. I think it would make it harder for others to read. It may be perfectly acceptable, I donā€™t know.

1 Like
3

Thank you for the response. Iā€™m also pretty new, I hadnā€™t coded before coming to FCC so Iā€™m not really sure if I shouldnā€™t organize it that way, itā€™s just what felt natural for me. I understand how it could be hard to read for others.

4

Welcome to the forums @m4rk. Your page looks good, 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.
    • The link to the font goes in the box labeled ā€˜Stuff for <head>ā€™
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ā€˜Analyzeā€™ link.
    • The one for HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it, thereā€™s something you may want to clean up.
  • Weā€™re not seeing the images to your project because we donā€™t have access to your google account. 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)
    and
    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
  • Side note, within the sections of codepen, click on the little down arrow in the upper right. Click on the ā€œformatā€¦ā€ button and it will format your code in the standard that people are used to seeing.
1 Like
5

Thank you for the detailed response :slightly_smiling_face: Ok, I just went through and I think fixed everything. The html errors I have left are about duplicate idā€™s. Is that normal since Iā€™m wanting to use the same idā€™s multiple times? I fixed the images, but there seems to be a problem with how a couple show up. They look fine on the codepen website so Iā€™m not sure whatā€™s wrong with them.https: //codepen.io/M3W2/pen/MWaNeLz?editors=1100