Trbute page help

Hello,

I made a start on the “Build A Tribute Page” section of the course and I wanted to know what people thought of my code. I’ll be honest, I tried my best but I just want to get some opinions on where I’m going wrong /correct.

Here’s a link to my code so far: https://codepen.io/pr-pixel/pen/RwrrNBm

Hello @geog,

Welcome to the forum.

It is a good start. I would recommend a few improvements:

  1. Make the image responsive.
  2. I also see that in your code you have added text-align: center; to both your h1 and p element at the top. However, they are both not centered in the body element as they should be. It is so because the center attribute is being applied to these elements and not their container. You may try looking into how to center align these.

Also I have added the testing link “” at the top of your code. On running it, 1 test is being passed. So you may try to passing all the 17 tests. In case you have any concerns, we are here to help you out.

I hope you find my reviews useful. In case of any concerns, please let us know here at the forum. We are here to help you. Keep up. :slightly_smiling_face:

First things first, delete the <style> elements from the CSS window in CodePen. It won’t read anything between those elements. Those elements are included if you wanted to keep your HTML and CSS in the same HTML document.

In addition to the comments above by Kamalpreet I would suggest taking a look at your paragraph elements again. They should not be named <p1> and <p2> etc. And don’t forget to add an alt attribute within your img element.

Also, if you want to push yourself see if you can remove the <br>'s and add to your CSS to format the page how you want it. You can style the page using CSS instead of breaks and I promise you’ll be happy that you did as you progress.

You are just starting out so don’t beat yourself up. You’ve built a page, which most people can’t do so that’s an accomplishment in itself. With a few teaks it will be even better. Keep at it and like Kamalpreet said, we’re all here to help you.

1 Like

This is really amazing. Great information about blog

So should I put my CSS code within my HTML code? Because I learnt that it’s best to keep them both separate or is it just for this case that I put them together?

Also, do I need to indent in HTML? Before this I was learning Python so I’m unsure about indentation as it wasn’t really covered in the FCC course material.

Another thing: I have so many questions as I go along.

So I know that I can put an ‘alt’ attribute within my img element but then why would FCC ask for me to put a separate “id=img-caption”.

My understanding is that these “id=img-caption” or so and so are declarations that I’m going to put a certain element or section in. It’s actually making me confused as to why I’m putting these id’s in the first place.

hi @geog,

as far that im understand, is something like this:

  • alt atrributes is needed to make the image have accessibility option for screen reader.
  • the id you placed is for easier styling in css, as id which is # in css would overides any selector styling.

sorry if i make you more confused. thats just my thought.

Yeah I think I get it now. So the ‘alt’ attribute is a backup for screen readers but it won’t show on the page preview.

Yes, it’s best to keep them separate. I was just mentioning that <style> is used in HTML documents IF you choose to keep them together.

Yes, you should use indent HTML. Your page will still work without proper indentation, but proper indentation makes it easier to review, debug and collaborate with others. Check out this HTML Style Guide. I think it will help.

@sobadrdb’s explanation of alt and id is correct. According to the rules of HTML alt is needed. Don’t pay too much attention to figuring out why the FCC assignments ask for specific element names. It’s only because their testing script looks out for those specific names.

Often times I develop my pages without looking at the naming requirements of FCC. Then, when I’m done I go back and update my code. I do this because I don’t often name things with the same naming convention as FCC and if I try to pass my code with id=“caption” vs id=“img-caption” the test would fail.

With that being said, as @sobadrdb said, the names make it easier to style (if you choose to apply styling later).

Yup, that is correct

Hello Kamalpreet,

So I tried to make the image responsive but I don’t know whether I did it correctly. Since I need max-width and min-width, I don’t know what figures to put since I don’t really know the viewport size.

Or am I just doing this the wrong way? I’ve tried resizing the preview panel but the image doesn’t seem to change.

Hey,

So in the end I didn’t do the line breaks because in the viewer it already has spaces between each line. Having looked online, it says I’m supposed to add a “span” property in order to put line breaks.

Also I’ve tried to make the image responsive, but since I don’t really know what max-width and min-width to specify, I just took an online example. Where I’m confused is that, if I need to specify the max-width and min-width in a @media query for the image to respond to different viewports, how am I supposed to know those parameters? Where I can I find those out?

^Additionally, I’ve realised that my image doesn’t change size when I adjust the preview, which I don’t seem to understand why that’s happening?

Also, I think I may have over-complicated things but I added more id’s e.g. id=tribute-info-title as a means of being able to edit the style of that element instead of having all the tribute elements in one id. (Don’t know if a professional would do this)

If you set your image width to 100% (if you want it to span the entire browser). Responsive just means that the element will adjust when the browser is resized.

You don’t necesaarily use min-width, max-width, min-height, max-height, etc. unless you have a set reason to use them. Let’s say for example I have two pictures… One is 500px x 500px and the other is is 2500px x 2500px. I might use the max-width property in a media query to switch the images (because a picture with a 500px width would not scale up nicely without being distorted).

I use Chrome when I’m developing and usually I go into Settings > More Tools > Development Options --> Then ou can select the little icon that looks like a cellphone and tablet and you’ll be able to see how your page looks on different devices (see the picture below).

You can also see the usual breakpoints on this webpage.

Regarding your ids, I’ve actually seen ids like on professional websites. I think it’s all about what makes it easier for you and your development.

One other thing I’ve noticed in your new page is that your <style> element(s) are placed in your HTML fille incorrectly.

If you choose to include your CSS within your HTML file all of your CSS rules/declarations should be above your <body>. There shouldn’t be a new <style> for each element you want to style.

For example this code

<html>
<body>
  <style>
    body {
      background-color: #dfe6e0;
    }
  </style>
<div id="main">
<div id="title"> 
	<h1>Dr. Norman Borlaug</h1>
  <style>
    #title {
      font-family: sans-serif;
      text-align: center;
      font-size: 30px;
    }
  </style>

would be revised to

<html>
<style>
body {
      background-color: #dfe6e0;
    }
#title {
      font-family: sans-serif;
      text-align: center;
      font-size: 30px;
    }
</style>
<body>
<div id="main">
  <div id="title"> 
	<h1>Dr. Norman Borlaug</h1>
  </div>
</div>

I forgot to mention your image doesn’t resize because this is in your code.

@media screen and (min-width: 1025px) and (max-width: 1280px) {
  img.responsive {width: 300px;}
  }

This states when the screen size is between 1025px and 1280px make the image width 300px.

@geog, I think you’ve gotten confused with all the things you’ve been told here so let’s start at the beginning.

  • 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 7/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • 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.
    • All of you CSS code belongs in the CSS section. And within the CSS section of codepen you do NOT use the style element.

It’s recommended when creating pages that the HTML code be one page and CSS be another. This is commonly called external styling. When doing external styling, the style element is NOT included in the CSS page.
If you were going to do internal styling (not recommended) then all of the CSS code would be in one style element and that element would be in the head element.

I’d recommend you start your tribute page over from a blank page. You shouldn’t copy the sample FCC page. The projects say to make it “functionally similar” and “give it your own personal style”. Come up with a person you like, an author, a music group, etc and create a tribute page from there.

I don’t want to overwhelm you but if you’d like to know more about the basic boilerplate tags used when creating an HTML page you can read about it here. Again, codepen provides all of this for you behind the scenes so all you need to do is put in the code that the browser renders and that’s the code that goes in the body element.

For further info regarding codepen, read their official documentation

2 Likes