What A Wild Ride!

Code Feedback
1

Here’s something I never thought I could have achieved.
I think I took the instructions a little too literally though, but by the time I realised what I’d done it was too late to turn back.
I’d appreciate your feedback so I can learn from my experience and if anyone out there can tell me how to centre justify the last line it would be icing on the cake.
Actually I’ve just checked this on my mobile phone and it’s a dogs breakfast, all over the place so feedback/advice is absolutely required :slight_smile:
https://codepen.io/lunny67/full/GRpWjMe
Thank you, Darren.

2

My advice would be to narrow your browser as small as it will go and style the page so it looks good. This will be your base CSS. Then slowly widen your browser and make sure everything continues to look nice. If you need to set media query break points then it will be for wider viewports (i.e. you will use @media screen and (min-width: XXem)).

3

Thanks bbsmooth, I’ve tried that and it’s still not working. I’ll keep searching for the answer :slight_smile:

4

Hi @darrenlunny. Some things to revisit about your page;
Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).

  • Your page passes 9/10 user stories.
  • The test script should be included, with all tests passing, when you submit your projects.
  • 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 <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Since you never correctly close the body tag, just change the opening one to a div and keep the id. Don’t forget to close the div at the end
  • 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 coding errors you need to address.
  • Not sure why you’ve done this to your tribute-info id;
    • left:900px; <-- Do you understand what this is doing?
  • As an aside, the projects instructions say “functionally similar” and “give it your own personal style”. You don’t have to make a duplicate of the example project.
5

Hi Roma,
Thanks for taking a look at my code.
There are a couple of things I’m still not quite clear on - apologies, I’m a complete novice when it comes to this and so some clarification would be really valuable.

  • When I clicked Run Test I got a pass, but you say my page passes only 9/10 user stories, are we talking about the same thing here or is passing the test different to the USer Stories?

  • The Objective page lists 9 User Stories, what is the 10th?

  • What do you mean by including the Test Script? I cut and paste my code into the box on the objective page, was that not the right way to do it?

  • Can you explain what you mean re the boilerplate comment? Are you saying I put all of my tags in the stuff for ‘x’ box? Or the code, or both?

  • If I change the opening tag to a div, where would the closing div tag sit?

  • I was trying to place the tribute info in the centre of the screen and this was the only way I could work out how to do it

  • Yes, I realised that it had to be functionally similar, not identical but by the time I realised that I was too far down the road

Agreed, there are coding errors I need to fix, my challenge is to know what to take out/what to replace it with.

I also have issues with mobile responsiveness which is why I’ve put several media queries through the CSS but it’s all over the place, I really don’t know what/why I’m placing the queries where I have.

Maybe start again?

Thanks again for your feedback.

Cheers,
Darren

6

Let’s take these three points together because we’re not talking about the same thing. Cutting & pasting the URL is just submitting your finished product, no tests are run.
The snippet I included in my previous post is the for the test scripts. Paste that into the HTML section of your code, you’ll see a hamburger menu in the upper left. Expand it, select the appropriate project and run the test. If any fail, click on the red button to see which test failed and read why it failed. It will help you to resolve it.

Codepen providing the boilerplate template for you means you don’t have to include the html , head, title and body elements. You just need to type in what would go into the body element. You can read codepen’s official documentation.
Currently your opening tag is body but you never closed it. Where should you close it?

You’re making your page huge just to start. You’ve added an inline style on your image (width=“1000px”). Get rid of it.
In your tribute-link declaration you’ve added width: 1250px; and in your tribute-info declaration you’ve added left:900px;Get rid of both of them. You’re making your page unnecessarily large to start with.
And as long as you’re reproducing the sample page, why not use the same image source? Just copy/paste that.

From here follow the advice that bbsmooth gave in his post.
As an aside, don’t use fixed dimensions on elements, use max-width/height and relative units like % and vw to keep everything responsive.

7

Thanks Roma,
I’ve removed the (width=“1000px”) from the inline style but now the image is too big on the page. I have a max-width of 100% and a height of auto but obviously I’m missing something else?
I also removed the width: 1250px from the tribute-link but that sentence is across two lines instead of one and centered under the tribute info. It was never centered under the tribute info, I’ve never been able to work out how to do that.
Lastly, if I take the left: 900px from the tribute-info all of that text sits on the far left of the screen.
If you can be bothered to give me some further guidance I’d really appreciate it, otherwise I appreciate the time you’ve invested so far.

8

Hi @darrenlunny. It can be tough when you mess up the first time and don’t want to start all over again. If i were you, i would do the following:

  1. Remove everything else inside #img-div and replace it with;
#img-div {
               width: 80%;
               margin: auto;
}

The above will enable you remove padding: 20px; from img element because it is preventing you from passing a certain test.
2. In the img element, remove padding: 20px;so that you are left with

  img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;

}
  1. You have defined the following media query three times in your code. Remove some because they are not necessary. Since they are exactly the same (defined with @media (max-width: 460px) ), transfer your code from the other two to only one of them.
   @media (max-width: 460px) {  }
  1. In the #tribute-info element, i suggest you remove everything else and replace with:
#tribute-info {
  list-style: outside;
  font-size: 20px;
  margin: 0 auto;
  width: 600px;
  font-family: Arial;  
 }

The above will center your code
5. Apply id="tribute-link" on the a element not on h3

I hope that helps.

9

That’s generous of you nibble, thanks! I’ll change it now.

10

Hi Nibble,

I have lost the light grey background for some reason.
And in terms of the @media queries - they each have different titles (#body/title/#img-caption) are you advising that I place all of the code across three queries into one of those queries? If so, and I placed it in the #body query for e.g., how do I make sure that the code from the other two queries impacts the title and #img-caption info? Or have I got this all arse about?
The image caption/tribute-title/tribute-info is all a bit bunched up now, what’s the cleanest way of giving that a bit of space?
Also, what code do I need to input to have the tribute link to run across one line and be centered under the tribute info?
Thanks again for the feedback, really appreciate your help.

11

I assume by ‘title’ you are referring to element, id, class selectors such as body, #title, #img-caption etc. Yes you can. Provided they all have the same mediatype and ( expressions ) like @media screen (max-width: 460px). The reason for applying a media query is for responsiveness. The code inside the media query is executed when the screen size of the user is 460px and below. Therefore there is no point in splitting the media query if mediatype and ( expressions ) are the same.
NOTE: You have forgotten the mediatype in your code

You can give the respective elements padding. The code below adds padding to the #img-caption element. Do the same for the other elements you feel are ‘bunched up’ (I hope i have understood that statement.

#img-caption {
      padding: 1em;
}

Apply display: block on the tribute-link outside a media query like

#tribute-link{
  display: block;
  text-align: center;
}

EDIT:

Just check for the element to which you applied the light grey background and apply it again. Probably it was removed by mistake. However i remember you applied a color property to the img container which was redundant because the image scales with its container.

13

Hi Nibble,

Found the div element, it had actually expanded over the top of the white background so in fact I’d lost the white background, not the grey div. Anyway, all good.
The last instruction to fix the tribute link - I tried inputting that code but this is what I get when I do that.

Screen Shot 2020-05-18 at 3.55.15 pm

And this is the CSS code for the tribute-link.

Screen Shot 2020-05-18 at 3.56.28 pm

It looks like the tribute link text is sitting in some sort of block that it can expand beyond?

14

@darrenlunny, it’s doing that because in your tribute-link declaration you have display: block;. Why?
As an aside,

15

Thanks Roma, there are a lot of things that I’ve done, yet don’t know why. That is the point of this exercise I guess, to learn. There a more things I don’t know than things you do know. Hopefully one day I’ll reverse that :slight_smile:
I was advised to place display: block into the tribute link by another user, @nibble. I ran my code through W3C and it passed. The Wikipedia link works for me.
Cheers,
Darren

16

Accessible does not mean you cannot reach the link. Read the articles.

I see coding errors which is why I mentioned it. Did you create a new pen instead of editing the one you posted in your initial post. If so, you need to provide the new link.

17

I used the same pen. I installed the code you suggested that gave me the little hamburger on the left and ran the code and it passed 10/10.
When you say there are errors, do you mean there are mistakes or just bad coding?

18

I meant there are mistakes in your code that you will see if you run your code through the W3C validator.

As an aside, get rid of the parens around the script element.
Also, click on the ‘Settings’ button and in ‘Stuff for <head>’, get rid of the word ‘meta’ that you typed in and click the button below it to add the common meta tag.