My first and second Project Tribute Page feedback

Code Feedback
1

Hi everyone, this is my first project. I wanted you to give me your opinions. I made it quite simple but I wanted to know if I am on the right track.
Thank you!
https://codepen.io/Emmavz/pen/LYGOxRP

Good day, I add my second project here so as not to create another post.
https://codepen.io/Emmavz/pen/QWyORLW

2 Likes
2

In terms of using plain HTML and CSS I think you did a pretty fantastic job. Its only HTML and CSS so its a very simple webpage, but as you learn javascript you can integrate that as well :smiley:

1 Like
3

Looks good for early attempts!

I would say for the tribute page consider the following:

  • Spacing between elements on the page - more ‘white space’ between elements will create more visual impact.
  • Use headers or at least bold to draw the eye more to sections.
  • Consider using different fonts (check out Google fonts and Font Awesome)

For the survey page nice and simple, resizes well etc. Improvements I would say are again in the visuals. I find the background a bit too distracting and I would maybe increase the opacity on the form itself so you can see less of the background through it!

Good luck on your journey!

4

Thank you very much for your review, these are things that I did not take into account when finishing the projects. Step by step I will improve them!
Regards!

5

Welcome to the forums @Emmavz. Your pages look good. Some things to revisit;
tribute page

survey form

  • 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.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Do not use <br> to force line breaks or spaces. That’s what CSS is for.
  • User’s should be able to click on the label to select, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
6

Hello, thank you very much for the welcome. I just fixed the marked errors, I hope they are fine. Regards!!

7

Good job cleaning things up

1 Like
8

Here’s some of my thoughts on your dedication page(I’m still working on these projects too so I may not always be right!)

  1. If you set the margins of body and #main to 0px you can have the site fill the whole page and get rid of the white border which I think looks a bit ugly, you can add more padding to #main to make adjustments afterwards.
  2. The use of the div under the image is neat, it gives it a nice border and seems like a good way to add a caption. Maybe make the image a bit smaller? One way to do this would be to set the images width to 100% and change the width of the image div.
  3. The media queries for placing the the lists on seperate rows should work for screens larger than 400px I would change it to around 700px or so? But it’s great to see you’re already using grid templates!

All the best,
Luke :smiley:

1 Like
9

Thank you very much for the review, every point of view is received. With regard to the margins, just a few days ago I understood it correctly, like many other things, incredible with the things that got me stuck these days, it is incredible the feeling you feel once the problem is solved. Regarding the media queries, what they recommend is to work for at least 2 or 3 resolutions, I will see if I can put it into practice in the next project or it could also improve the finished projects.
Let’s improve step by step !.

Happy coding!