My first 2 projects - Tribute page and Survey

So here are my first 2 projects for the Responsive Web Design Projects, and I would love some feedback.

There is a demand in my work for developing tech, including web stuff, and so I am taking a leap and learning HTML and CSS. I do have some knowledge in other languages but not in Front End.

tribute page

survey

thanks in advance.

These are awesome! For the survey I would suggest to wrap all the elements in a semi transparent box to give it a bit of a cleaner view and see if you can align the text to the left too! The sample survey form has it that way also:

Great job on the challenges though!

1 Like

Welcome to the forums @hlcostard. Your pages looks good. Some things to revisit;
tribute

  • 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>’
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element.
  • 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 be aware of and address.
  • Review the lesson about giving meaningful text to links.
  • there’s a duplicate #discography entry in CSS that could affect how your page displays

survey form

  • same note as above re: using codepen
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There is a small HTML coding error you should be aware of and address.
  • change the cursor to a pointer when hovering over the submit button
2 Likes

Thanks for the feedback, @ltommylel!
I wanted to do something like that at first but got fixed on the colors and ended up not doing, but I added it and it does look better!

Also thanks for the feedback, @Roma!
Followed your comments and I think the HTML code is fixed, great point about the Web Accessibility, changed to “Dio’s Wikipedia page here.”.
The duplicate discography was one of my tries of using the @media to change the layout. I actually made it work, on smaller screens, the discography goes to the bottom of the page.
I actually struggled a lot trying to make the images resize with the screen, I used min-width 1050px because the images all got distorted with lower values.
I also could not make the submit button on the survey change to a pointer.

tribute page

survey page

2 Likes