Asking for feedback on my first handful of projects, you can be direct as possbile!

Claimed my first certificate last night. I have a feeling there will be a lot of “what the?” coming from anyone who takes the time to look over my code, but I am in dire need of real criticism. The code itself and how I presented it worries me. I want it to be clean as hell before I move onto JavaScript.

Note: I need to change a TON of p tags into h tags… but in due time. I did this for quick design purposes.

Princess Mononoke Tribute
Final Fantasy VII Survey

May I ask why you are using p1, p2, p3… instead of classes and ID’s to make changes in CSS?

1 Like

Nice design for both pages.
However, some important things are missing in the HTML code:

  • On the tribute page, the code is not embeded in and + tags are missing.

  • Same thing on the survey page, and in addition you forgot to state the doctype.

For the rest, I think everything is OK.

Keep it up, and good luck :wink:

1 Like

@dvassart You don’t actually need anything except the inner HTML of the body on Codepen.

@VedaDev27 The pages look pretty good.

  1. You have invalid HTML in both projects. Press the down arrow to the right of the HTML code box and select “Analyze HTML”, do the same with the CSS.

  2. In your .form-group selector you are missing the unit on the top margin, you have this margin: 2 auto 1.25rem auto.

  3. For the tribute page, you are repeating a lot of styles that do not need to be repeated.

  4. The legibility on the tribute page is not great, even with the text shadow. Make sure you have good contrast between text and background.

  5. For the surveyor form project I feel like there is too much copying of code from the example project. You can look to get help and inspiration but try not to just copy the code too much.

1 Like

@lasjorg Thanks for the hint, I didn’t know that :wink:
Having that said, I think that always putting these elements regardless of the environment is good practice, especially for the beginners, so they never forget it afterwards.

@dvassart I guess. But I would find it really tedious with Codepen if I had to do that manually every time. Although, because Codepen is using Emmet you can just do ! + Tab to get the base HTML setup.

I did this for quick design purposes, but I will be going back and renaming my stupid p tags to h tags. I was honestly just being too lazy. I now realize how dumb it was.

@ADean I did this for quick design purposes, but I will be going back and renaming my stupid p tags to h tags. I was honestly just being too lazy. I now realize how dumb it was.

@dvassart Appreciate the feedback. I’ll fit that right away! Mind telling me what to change or fix in the other two projects? FCC won’t let me link it to you but it should be linked through my profile. It’ll be called Part 2.

@lasjorg Thanks! I’ll look into 1-3 today. I definitely agree with part 4 and part 5. My tribute page is hard to read and my survey form needs more personal flair. Also do you mind critiquing my other two projects as well? Should be linked under my profile as Part 2. If not, don’t sweat it!

I totally understand, getting things down as quick as possible so that you can see whats going on can really help the creative flow. But, in the long run you could end up having bad code slip through the cracks and cause you a lot of headache in the future trying to find all the things that are causing problems for you.

1 Like

You mean the portfolio and landing page? I didn’t really go through them but just from a quick look here are some thoughts.

For the landing page, it feels chaotic. There are a lot of different colors and the elements are tightly packed. I also think the background image is distracting.

For the portfolio page, I kind of like the vibe of the page I just don’t think it fits with a portfolio. I’d also say you might want to chill a little with the text shadow (just saying).

Also, they both have the same invalid HTML as the other two projects.

1 Like