Having trouble with first ever project

I have figured it out but if you want to laugh at some code (and maybe give some advice) you’re more than welcome

i’ve started on the freecodecamp’s first project and have a very messy code and boring site, but i’m happy because its the first i’ve done!

I’m having trouble because i’m not sure what to do with this error *1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.* and thought id see if someone could help, and possibly look at my basic code and give me some tips on things i’ve done wrong.

If you’re up to help that would be amazing! Im supply the link if you’re interested. Again i’ve only been coding for about a week but exited to learn!

https://codepen.io/adam-dodson/pen/XWWZGOK

Few things here, look at the screen capture below:

  1. For websites; I personally change the view to code on left, preview on right (click change view then editor layout). This gives you the gray bar in the middle to pull side to side to see how the site reacts to changes in screen size.

  2. Notice how I made the Display width small (like a tablet/phone) and the picture is still full size.

  3. Put all your <style> into the CSS section. It makes it easier to separate the HTML & CSS ( & JS too in the future)

  1. Once you get your styles into the CSS, review the code you have for #image. The max-width you want is 100%. But you might also want to give it a container width and some margins (you want it centered for the other test)

  2. Make sure your id='image' is inside the right tag:

<a id="image">
<img src="https://c2..._b.jpg" alt="Dr. Norman Borlaug...hunger.">
</a>

(The anchor tags are not needed.)

  1. When I drag the screen smaller all the text jumps way right (off the screen)

(this won’t fail the tests but just a note)

This is after I edited a few of the above:

Overall you are off to a great start! I only learned HTML/CSS a month ago so I am in no way a pro, just keep practicing, breaking things and fixing them.

1 Like

Thanks so much for spending the time on this it really means a lot and gives me hope about this community.

I will definitely use your tips in the future!

1 Like