Please feedback for my project

Hi I’m Cristian from Argentina, I’m learner coding and english too :slightly_smiling_face:, please I would appreciate comments from my projects. Thanks!!
Tribute page:
https://codepen.io/Cris_22380/pen/QWLrZvP?editors=1100

Survey form:
https://codepen.io/Cris_22380/pen/BaBVXpL

Tribute page:

  • When I click the arrow on the right in the HTML section, I clicked “Analyze HTML” and these 2 errors showed up. Try it on your side and fix the errors.

    An id can’t be used more than once in an HTML document. If you want to repeat a CSS style, use a class. (Use . instead of #)
  • Your HTML is really pleasant to read.
  • I think his story should not be the full page. Make the width smaller.
  • The background color of the story line looks like a :poop: color. Not visually appealing. I commend you for making the orange work with it though. That is a sign of a good designer.
  • Make sure the dates are consistent. The last 2 dates should say “In” in the front.
  • The footer is too big. I wouldn’t design my footer to take attention away from the main content.

Overall, I think the site is very fun.

Survey form:

  • Analyze the HTML for this site as well. There are a few errors.
  • Right away I didn’t like the border shadow on the survey. It is inconsistent and it gives a prehistoric feel to it like the days of Geocities.
  • It is very hard to click on the age slider.
  • I really like the colors on this project vs the other one. The black and green give it a clean old school feel.
  • Have some fun with the title. Right now it is plain. It doesn’t go well with the rest of the content.
  • One final note: Generally a survey form is not dark. A site can control a person’s emotions by the style and colors of the layout. Color alone means a lot to your viewers and can change their mood. It can even decide whether the viewer is even motivated to do anything on the site. A survey form that is too lengthy can be seen as agitating and too short can be seen as uncaring. If you look at all the major sites, you will notice everything is bright.

Overall, the site is aesthetically pleasing but if an elderly was looking at this site, they would be flustered because they probably won’t be able to see everything with the small fonts and bright colors throughout.

On a site side, is there a website you use to get the media queries or is it all in your head?

Hello, thank you for taking the time to review my projects and for your constructive criticisms, I will take them into account to improve my projects.
As for the media queries I use Google I throw a query depending on what I need to do, I also use mdn, w3school.com and millions of other sites, I am doing trial and error experiments until I get what I am looking for, if you have a site To recommend me I thank you.
thank you for your comments!!!

1 Like

Cómo va! Acá de Argentina también, pero va en inglés por otros.

Tribute page:

For the tribute page I’d recommend first setting a max size for the main image. For a mobile looks fine but for desktop it gets too big. The custom borders look really nice!

Then I’d separate the main text into some chunks for an easier read, maybe include a quote in between some paragraphs to ease the read (this not required to pass the tests but is something widely used and IMO looks cool for a tribute page or any biography).

Survey form:

The play sports item from the checkboxes is missing a label so if you click the text it doesn’t check the box. A minor error but you might want to quickly fix it.

Then, something just related to design and my personal opinion, I’d add some padding to the form element before the textarea (the one with …options in order from most to least important for your happiness?).

Éxitos!

1 Like

Hello!! how are you? Thank you for taking the time and leaving me comments, I will take them into account!
Gracias!!

1 Like

Hello, thank you for welcom me in this projects, I’m looking for follower to devaluing it.

I’M happy to learning HTML and w3school, First you ,// start by building simple web page using HTML.