Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS freecodecamp project

A

AdaGenesis

New Coder
HELP NEEDED! I am brand new to programming, with about a week under my belt from beginner classes. I am trying to complete a project, and I am struggling to fulfil the last 2 reqs. They are
User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centered within its parent element.

I have pasted my work below. Any help is so appreciated!


<style>

#main {
font-size: 50px;
text-align: center;

}
#title {
font-size:30px;
text-align: center;
}

#tribute-info {
text-size: 20px;
text-align: center;
}

body {
background-image: linear-gradient(0deg, #191970 10%, #191970 25%, #ADD8E6 100%);
}
div {
<div id="container">
<img id="image"
}


h3 {text-align:center;}

<figure id="img-div">
<img
id="image"
src="https://assets.change.org/photos/9/ne/ac/voneaCqdxrMRZMk-800x450-noPad.jpg?1568387953"
alt="Zim and his companion, Gir, being curious"
/>
<figcaption id="img-caption">
Zim, on the right, rules Earth with his companion robot, Gir. Gir also has mini-moose.
</figcaption>
</figure>


</style>

<h1 id="main">
<strong>Invader Zim</strong>
</h1>
<h2 id="title">
"I am Zim!"
</h2>

<img id="image" src="https://assets.change.org/photos/9/ne/ac/voneaCqdxrMRZMk-800x450-noPad.jpg?1568387953" alt="Zim and his companion, Gir, being curious">

<h3 id="imgdesc">
Zim, on the right, rules Earth with his companion robot, Gir. Gir also has mini-moose.
</h3>
<h3 id="tribute-info">
Here is what Zim seeks!
</h3>

<h4>
<ul>
<li> Compliance
<li> Super Weapons
<li> Human Knowledge
<li> Waffles
<li> More Super Weapons
<p> Curious to find about more Irken knowledge? <a
id="tribute-link"
href="https://en.wikipedia.org/wiki/Invader_Zim"
target="_blank"
>Click here you fool!!</a
>
 
Sort by date Sort by votes
AdaGenesis you have a really bad habit about closing tags. You are going to get into trouble if you continue to not use them. Get a real coding editor to use like VScoder or NotePad++. Look them up on google.

You also have problems with CSS. I commented out what does not belong so you can see. I suggest stopping and review CSS before going any farther with your learning. You may also want to use another site like https://www.w3schools.com/ to help with retaining the knowledge.

Compare your code to this to see what I did:
Code: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Requests</title>
<style>
#main {
  font-size: 50px;
  text-align: center;
}
#title {
  font-size:30px;
  text-align: center;
}
 
#tribute-info {
  //text-size: 20px;   See next line
  font-size: 20px;
  text-align: center;
}
 
body {
  background-image: linear-gradient(0deg, #191970 10%, #191970 25%, #ADD8E6 100%);
}

/*
div {
  <div id="container">
  <img id="image"
}
  */
 
h3 {text-align:center;}
 
/*
<figure id="img-div">
<img
  id="image"
  src="https://assets.change.org/photos/9/ne/ac/voneaCqdxrMRZMk-800x450-noPad.jpg?1568387953"
  alt="Zim and his companion, Gir, being curious"
  />
  <figcaption id="img-caption">
  Zim, on the right, rules Earth with his companion robot, Gir. Gir also has mini-moose.
  </figcaption>
  </figure>
  */

#image{
  display: block;
  margin: 0 auto;
}
@media only screen and (max-width: 800px){
  #image{
    width: 100%;
  }
}
</style>
</head>

<body>
<h1 id="main"><strong>Invader Zim</strong></h1>
<h2 id="title">"I am Zim!"</h2>

<img id="image" src="https://assets.change.org/photos/9/ne/ac/voneaCqdxrMRZMk-800x450-noPad.jpg?1568387953" alt="Zim and his companion, Gir, being curious">

<h3 id="imgdesc">Zim, on the right, rules Earth with his companion robot, Gir. Gir also has mini-moose.</h3>
<h3 id="tribute-info">Here is what Zim seeks!</h3>

<h4>
<ul>
  <li> Compliance</li>
  <li> Super Weapons</li>
  <li> Human Knowledge</li>
  <li> Waffles</li>
  <li> More Super Weapons</li>
</ul>
<p> Curious to find about more Irken knowledge?
  <a id="tribute-link" href="https://en.wikipedia.org/wiki/Invader_Zim" target="_blank">Click here you fool!!></a>
</p>
</body>
</html>

If you have questions I'm normally here.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom