Feedback on survey form and tribute page

Code Feedback
1

survey form: https://codepen.io/weikeong/full/bGdmmRY
tribute page: https://codepen.io/weikeong/full/xxGyaNM

I appreciate any feedback, suggestions or thoughts on my first html/css project. This is my first time learning it so there’s lots to learn and I would love to know how to code better and effectively.

Tribute page
[SOLVED: delete ‘width: 100%’ that’s causing the problem] Question: I added a responsive design to react to viewport < 700 px. When viewport < 700px, I don’t understand why the width of ‘.biblo-section’ exceeds the div container even though it was set to 100%

Thank you everyone!

2

Hello weikeong! I really enjoyed your portfolio page. The colors are really easy on the eyes and give the page an old time feel. I also liked they layout of the page. One issue I did notice was the words seemed a little crammed into their space. Maybe you should try (I think it makes the whole page look nicer… imho):

#tribute-info {
  padding: 25px;
}

Really great job though!

3

Hi jstewart8053, thank you for your feedback!

I have updated. Yes, it does look better after adding padding: 25px. But it also creates an issue that I do not understand what’s causing it. I have added a light background to see the problem better. Why is the width exceeding the div container on the right?

https://codepen.io/weikeong/full/xxGyaNM

I must have misunderstood some of the fundamentals. Thank you all for your help!

5

Take the width out completely. Try this :slight_smile:

#tribute-info {
  background-color: rgba(0, 0, 100, 0.1);
  padding: 25px;
}

Let me know if there is anything else you need help with. Again, I think you have done a really great job!

6

Thank you so much jstewart8053! You have helped me a lot!

1 Like
7

Hi @weikeong, some things to revisit;
tribute page

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioned because codepen provides the boilerplate template. Where you have <body> </body> tags is incorrect
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • Errors and typo’s to fix.

survey form

  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • Errors you need to clean up
  • Change the cursor to a pointer when hovering over the submit button