My FCC project on responsive web design

HTML-CSS
#1

Tell us what’s happening:

i am currently building a survey form in the FCC projects on responsive web design.i am at the stage where i have to add my radio buttons,my problem is not the addition of the buttons,but any writeup i put in the body of my editor would not reflect when i try to run the code on chrome any other browser.i thought it was my text editor so i decided to code on codepen,the same problem is occurring,any help please.
e.g if i should add a label it won’t reflect,nothing reflect anymore in the body of my website except my previous codes,but any new code won’t show if i should run it.i already tried googling the solution no help thus far.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

Link to the challenge:

#2

link your codepen code.

#3

https://codepen.io/Geoelycom/full/rNBRgYW
this is the link please help me out i dont know what i have done wrong

#4

When you use Codepen, you do not use a head element or a body element. All CSS code should go in the CSS section. Any code you put into the HTML section gets automatically inserted by Codepen into the body element for you behind-the-scenes.

That being said, I am not understanding what you are trying to do that is not working.

#5

Hi @geolycom . Try to copy this and find a difference in code:

<!doctype html>

<head>
    <title>my survey form for freecodecamp project</title>
    <h1>survey form<h1>
            <style type="text/css">
                h1 {
                    text-align: center;
                }

                form {
                    text-align: center;
                }
            </style>
</head>

<body>
    <main>
        <p>Let us know how we can improve Nadia Restaurant </p>
        <form>

            <legend> contact details</legend>
            <label>Name:</label>
            <input type="text" name="username" value="enter your name here" required="required"
                title="please fill out this field" />
            <br />
            <label> Email:</label>
            <input type="text" name="email" value="enter your email here" required="required"
                title="please fill out this field" />
            <br />
            <label>Age:</label>
            <input type="text" name="age" value="enter your age here" required="required"
                title="please fill out this field" />

           <hr />
          <br />
          <br />
            <label>Which option best describes your current role?</label>
            <select name="activities">
                <option value="student">students </option>
                <option value="full time job"> full time job</option>
                <option value="first year student">first year student</option>
                <option value="prefer not to say">prefer not to say</option>
                <option value="other">other</option>
</select>

                <br>
                <br>
                <p>Select a maintenance drone:</p>

                <div>
                    <input type="radio" id="huey" name="drone" value="huey" checked>
                    <label for="huey">Huey</label>
                </div>

                <div>
                    <input type="radio" id="dewey" name="drone" value="dewey">
                    <label for="dewey">Dewey</label>
                </div>

                <div>
                    <input type="radio" id="louie" name="drone" value="louie">
                    <label for="louie">Louie</label>
                </div>
          





        </form>
    </main>
</body>

main tag should go under body tag, you missed closing } in style section, and closing label was also missing.

happy coding :smiley:

ps: you shoud also close select tag

#6

I am not familiar with working with Codepen,I was using Notepad++ to code but when I encountered this problem,I thought maybe it was my editor,I decided to try it on codeoen,so I copied every code on my notepad++ into my codepen to see if it will work. And it didnt. Thats why I came here looking for a solution. Thank you very much I will do as you say now and hope it works.

#7

Thank you very much. I’m going to try it right now. I will give feedbacks after!

#8

thanks very much i have seen my mistake and your code did help me,i to read every line and see where i was getting it wrong. i’m more than grateful.

1 Like
#9

thank you very much for taking out time to answer my question, i think i know how codepen works bit better now. i gave myself time to really understand how to code with it,googled some stuffs too.