Completed my first 2 projects after 1 week of coding. Any feedback?

Code Feedback
1

Hi All,

I have now completed my first 2 projects after starting 1 week ago with basically no coding experience so would appreciate any feedback.

I know my code might not be the cleanest, I am working on this. Are there any tips you would suggest?

Tribute page

Survey form

Thanks everyone.

Luke

2 Likes
2

Hey Luke,

First of all, I like what you did with your Tribute page. But, I got a few comments:

  • You have used photocap for two images id on your page, which is not correct. If you are going to use the same style for several items on your page. You should be using class instead of id. So, id must be unique.

  • Your article part is missing the header h2-h6, it’s not the best practice using article tags in this way.

  • Your tribute page’s HTML is having several errors and warnings in W3C validations, you may want to check it too. Here is the link for the W3C validator, you should copy&paste your HTML code for validation. The tool is handy; you should consider using it. (This applies for both of your pages)

Cheers,
Yigit

2 Likes
3

Hi Yigit,

Thank you for your feedback,

I have adjusted all of the IDs that were duplicated and this makes sense now.

I have also changed the article.

I am using the validator you recommended but i keep getting the same errors which i cant fix. it might be something really obvious haha. :

Error 1 :

Element head is missing a required instance of child element title .

From line 3, column 17; to line 4, column 3

lang="en">↩ (<scrip

Error 2:

Fatal Error : Cannot recover after last error. Any further errors will be ignored.

From line 10, column 1; to line 10, column 16

</head>↩<body id="main">↩↩ <b

Do you know how i can fix this?

Thank you,

Luke

4

Hey Luke,

Sorry, I forgot to mention that you should ignore those errors since you are working on codepen and copy&pasting your code from there. You should ignore the first warning and the first two errors of the validation.

5

Hi Yigit,

No worries :), thank you for having a look at my projects. Im trying to aim for a different design and make something that looks good.

Im not too happy with my survey form but i might go back to it in the future. Well onto the product page now.

Thanks,

Luke

1 Like
6

Your pages look good @LukePixel. Some things to revisit;
Use the W3C validator mentioned in the previous post.
tribute page

  • When using codepen it 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.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • Mentioning because codepen provides the boilerplate for you. And while you may copy/paste from another source into codepen there are errors. Google ‘boilerplate template’
  • Your page passes 9/10 user stories.
    • Perhaps when you were cleaning up duplicate id's you removed one that the user stories require.
  • Don’t use the <br> element to force spacing. Use margin and/or padding in CSS.
  • Review the lesson about giving meaningful text to links.

survey form

  • same thing regarding codepen usage
  • Again, don’t use the <br> tag to force spacing.
  • The font you’re using ‘The Girl Next Door’ only has one style (one weight) that’s why nothing happens when you give it a font weight of 900. Look at the Roboto font that you link to (but you only linked to a font weight of 300, norm is 400) and you’ll see there are various weights you can link to and use.
  • Make the cursor a pointer when hovering over the submit button
1 Like
7

Hi Roma,

Thank you for your notes, it certainly gives me something to fix haha.

I have started trying to avoid putting fonts etc in the html section and I have used the settings box on my newest project :

*EDIT: I have used br on this new one but I will go back through and fix.

Product landing page

Although I haven’t finished that project yet.

I will have a full look through all the info you have provided, thank you for taking the time to look through it.

Luke