FEEDBACK - First project: Tribute Page

Code Feedback
1

Hi! how are you guys?? I just finished my first project and I’m so excited to share it with you!, it’s about women who changed design in the Bauhaus but they are not famous or recognized, it would be awesome if you can check it out and give me some feedback :slight_smile:

Thanks!
I hope you have a great day!

1 Like
2

Hey Azul,

nice to meet you!

Great job so far! :clap:

My ideas:

  • great job using a media query to make it responsive!
  • the general structure of a HTML, when you do not use codepen, should be something like this:
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    your content
  </body>
</html>

You started with this:

<html>
<div class="background"> </div>
<div class="first-container">
  <body class="bgback">

I think you mixed up some stuff, but I think you are able to solve this!

  • when you use codepen, it’s good advice to only use code that belongs into the body instead of the whole HTML skeleton shown above
  • after you fixed this, you can get a code validation here by pasting your HTML code into the body
  • you can increase the readability of your code by 1. clicking on the small arrow on the right side of the code box and 2. clicking Format HTML/CSS

Keep us posted and keep up the good work!

3

Welcome to the forums @azulxc. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • As mentioned, 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.
    • You have elements out of order. Everything the browser renders should be within the body element.
  • As previously mentioned, run your HTML code through the W3C validator.
    • There are HTML coding errors you should address.
      • Remember, an id must be unique within the document.
  • Headers should be in order. It’s not a good practice to start with an h4 header, then go to h1. Start with h1 and go down
4

Hi! Thanks for the reply, I’m trying to solve everything I did wrong so I tried the test script but I can’t figure out why I can’t pass one of the user stories.

My code is:
#image {
max-width: 100%;
height: auto;
padding-top: 55px;
padding-left: 30px;
padding-right: 0px;
}
The user story I can’t pass is:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

I feel like I did that, I can’t find my mistake

UPDATE: I tried the test script on my phone and I passed all the stories, I’m not sure is something on desktop or what

5

This is from your media query. That’s not what the test is looking at. The test looks at this part of your CSS…the desktop portion;

#image {
  width: 370px;
  height: 500px;
  padding-top: 55px;
  padding-left: 55px;
  }

Hope that explains why the tests pass on phone versus failing on desktop.

6

Oh I see!
I fixed it!

Thank you for your help :raised_hands:

1 Like
7

Good job!

As mentioned previously, you have elements out of order. Everything the browser renders should be within the body element. Those three div elements should be inside the body element.

This link will help give an understanding of the tags in HTML boilerplate
But also as previously mentioned, codepen only expects the code you’d put in between the body tags.

8

I know I had those issues, I was working on them. I think I managed to fix almost everything mentioned before.
I tried to use an unique id but to pass some test I need to create differents id that are requested so I’m not really sure how to fix that and pass the users stories at the same time

9

Hi! Thank you for your feedback, I updated the code and I think I fixed it, I least I think its better now :joy:
I tried to use but CodePen showed me an error that said “Just HTML that goes in the goes here. Learn more.” so I removed it.

UPDATE: oh sorry, I thought you were mentioning to use that in CodePen, my bad! I just saw you were talking about when I don’t use CodePen

Thank you for your time! Have a great day :slightly_smiling_face:

1 Like
10

@miku86 Thank you for the code validation link. Very useful to know the missing tags, saves a time :+1:

1 Like
11

If I’m understanding you correctly, you need to have an id="tribute=link" to pass one of the user stories and you have a few tribute links. What you can do is for the first tribute add the id and a class. Something like id="tribute-link" class="tribute-link" and then for the other tribute-links that you have change the id to class. Then if you wanted to do any styling to the tribute links you would just use the class to style them all the same.

12

So, the id that needs to be unique is “tribute-link” wich I repeated a few times but I can have other id in the code, right? I’m confused here, I don’t think I undestood that very well.
Like, I can have “id=“main”” for example, its not that I need one unique id for the whole documment, right?. I feel like this is kind of dumb to ask hahah but I’m trying to make sure I understood correctly

Btw, sorry if my english is bad, it’s not my first language, I hope you can understand me!

13

That is correct. When you run your HTML code through the W3C validator you get error because id="tribute-link" is repeated. Each id within the document must be unique.

That is correct. You can have many id’s within the document as long as each one is unique.
A class name can be repeated within the document.

It’s good to ask questions. I may not explain something clearly the first time.

14

Perfect! I fixed it, thank you for your help and your time, I really appreciated it.
I hope you have an amazing week!