Certification project (survey form)

HTML-CSS
1

I have completed all the tasks and now am trying to style my terrible looking survey form with css and nothing seems to work or make any difference in the appearance whatsoever. any ideas why? I have also tried adding an image in the html code and that doesn’t work either.

<body>
      <img src="![peanuts](https://github.com/cswaldron2/Image-hosting-/assets/103364939/ca3a426f-3985-4ce0-91cf-129f594b8b9e)" />
      <h1 id="title">
Do you like peanuts?
      </h1>
      <p id="description">

and here is the css

input, textearea, select, {
  margin: 10px;
  width: 100%;
  min-height: 2em;
} 
body {
  backgroun-image: url(![peanuts](https://github.com/cswaldron2/Image-hosting-/assets/103364939/ca3a426f-3985-4ce0-91cf-129f594b8b9e);
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #DE891A;
}
2

Just tried restarting the browser, didn’t do anything…

3

Hello @taktilemechanic1 !

Is there more to the html file?

If this was completed in Code-Pen or GitHub, there may be parts of code that are not coming over to fCC on the browser here.,

Based only on what I can see, I would suggest the completed html starter boilerplate is missing.

HTML Starter Boiler Template

This is where the link to the css files to allow the styles to connect and work for styling the document with css,

" Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS"

I am not seeing much of what is required for the survey. But, as I said, if it is completed on one of the above, I do not have those editors set up.

Congratulations on getting this far.

May your coding journey take you to the goal you have set.

4

The code is complete I just didn’t post all of it because I thought it was overkill but here you go. And yeah thanks I am actually having fun with this, its so cool to experience computers being demystified before my eyes. Coding is not as difficult or scary as I always imagined it would be haha

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width-initial-scale=1.0" />
    <title>Survey Form</title>
    <link href="style.css" rel="style sheet" />
    <body>
      <img src="![peanuts](https://github.com/cswaldron2/Image-hosting-/assets/103364939/ca3a426f-3985-4ce0-91cf-129f594b8b9e)" />
      <h1 id="title">
Do you like peanuts?
      </h1>
      <p id="description">
A survey for the people of peanut land 
      </p>
      <form id="survey-form">
<label for="survey-form" id="name-label">name<input id="name" type="text" placeholder="enter your name" required /></label>
<label for="survey-form" id="email-label">email<input id="email" placeholder="enter your email" type="email" required></label>
<label id="number-label" for="survey-form">number<input id="number" type="number" min="13" max="120" placeholder="please enter #" /></label>
<label for="dropdown-label"><select id="dropdown">
  <option value="">select a peanut</option>
  <option value="1">roasted</option>
  <option value="2">salted</option>
  <option value="3">both</option>
  </select></label>
  <label for="peanut-lover"><input id="peanut-lover" type="radio" name="what-do-you-love" class="inline" value="1" checked />Peanut Lover</label>
  <label for="peanut-hater"><input id="peanut-hater" type="radio" name="what-do-you-love" class="inline" value="2" />Peanut Hater</label>
  <label for="crunchy"><input class="inline" id="crunchy" type="checkbox" value="1" name="the-qualities-of-peanuts-you-love" required />crunchy</label>
  <label for="roasty"><input class="inline" id="roasty" type="checkbox" value="2" name="the-qualities-of-peanuts-you-love" required />roasty</label>
  <label for="salty"><input class="inline" id="salty" type="checkbox" value="3" name="the-qualities-of-peanuts-you-love" required />salty</label>
  <textarea placeholder="additional comments" ></textarea>
  <button id="submit" type="submit" >submit</button>
      </form>
    </body>
  </head>
</html>
5

Thank you for posting the complete code.

One of the first things I notice is a small typo that we can all make at times.

It should be “styles.css” As I say we all do it at times.

Once this is corrected, it will allow you the flexibility to style in CSS.

I do notice some other typos in the css: textarea, background-image,

This is just a quick look.

You are right about coding. It is not as scary as we thought, and is so much fun, and rewarding.

Keep posting any new questions for this code, on this post, please?

Keep up the great progress @taktilemechanic1

1 Like
6

I think the background-image may not be working properly because it is not a png, jpg, jpeg, or svg image. If you want, you could probably find a similar, or another image on a free picture, video, image site such as pexels, imgur, pixabay (to name a few).
I get mine from pexels, but I am sure they are all good.

Try the suggestions from the previous post, and see how that works for you. If you do decide to try an image from one of the above, it is right click on the image, and choose open in a new tab. Then, you should see in the address bar, the link with a jpg, png, jpeg, or svg. If any of these appear in the link, it should work, I think.

Happy coding and keep up the great progress.

1 Like
7

oh yep i do this all the time. I was once in a linguistics class where they showed how we don’t read every letter in the text we are reading. We just see the first and last letters and then assume what the word is based on the context of what we are reading. I guess this is especially true for me. Always need to slow down a bit and read every letter.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.