I have some questions. Can someone help?

HTML-CSS
1

I was trying to copy the freeCodeCamp Survey Form just for fun and for the challenge. But, in the meantime, I had some trouble with adjusting some details.

One of them, was the borders. If you compare my Survey Form and the Original, mine has some borders in the inputs, checkboxes, textboxes, that I can’t get rid off.

The second one was the different text like in the label for age “(optional)”, I tryed to style it with span, but nothing happened.

The third one was to align the input type radio with the label. I tryed some margins and paddings but nothing happened.

So, can anyone help me? Pardon me for the not so good english, I’m a brazillian!

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;1,200&display=swap"
        rel="stylesheet">
</head>
<style>
* {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: #f3f3f3;
}

body {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

h1, p {
    text-align: center;
    margin-bottom: 0.5rem;
}

h1 {
    display: block;
    font-size: 2em;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: #f3f3f3;
    padding-top: 50px;
}

p {
    font-style: italic;
    font-weight: 200;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);
    font-size: 1.125rem;
    margin-bottom: 30px;
}

form {
    width: 720px;
    margin: 0 auto;
    background-color: rgba(27, 27, 50, 0.8);
    border-radius: 0.25rem;
    padding: 2.0rem;
    padding-top: 2.4rem;
    padding-bottom: 60px;
}

fieldset {
    border: none;
}

.firstpart {
    display: block;
    color: #495057;
    padding: 12px;
    border-radius: 0.3rem;
    width: 630px;
    height: 38px;
    margin-top: 8px;
    border-color: white;
    margin-bottom: 28px;
}

label {
    display: block;
    font-size: 18px;
    font-weight: 400;
}

select {
    display: block;
    color: #495057;
    border-radius: 0.3rem;
    width: 630px;
    height: 38px;
    margin-top: 8px;
    border-color: white;
    margin-bottom: 28px;
    padding-left: 12px;
    padding-top: 2px;
}

option {
    color: #495057;
}

#labelmargin {
    margin-top: -16px;
}

.radio {
    display: inline-block;
    margin-right: 0.625rem;
    min-height: 1.25rem;
    min-width: 1.25rem;
    margin-top: 10px;
    vertical-align: middle;
}

.extratext {
    font-size: 5px;
}

.checkboxes {
    transform: scale(1.6);
    border: 0px solid black;
    margin: 10px;
    margin-right: 15px;
}

#labelmargin2 {
    margin-top: -16px;
}

#lastlabel {
    margin-top: 15px;
}

textarea {
    margin-top: 9px;
    margin-bottom: 22px;
    display: block;
    padding: 12px;
}

#submitbutton {
    background-color: #37af65;
    margin-left: 12px;
    width: 636px;
    height: 46px;
    border-radius: 0.1rem;
    border-color: #37af65;
}

.labelmargin3 {}
</style>

<body>
    <header>
        <h1>freeCodeCamp Survey Form</h1>
        <p>Thank you for taking the time to help us improve the platform</p>
    </header>
    <main>
        <form action href="#">
            <fieldset>
                <label>Name<input class="firstpart" type="text" value="Enter your name" name="name" /></label>
                <label>Email<input class="firstpart" type="email" value="Enter your email" name="email" /></label>
                <label>Age (optional)</span><input class="firstpart" type="number" value="age" name="age"
                        placeholder="Age" /></label>
                <label>Which option best describes your current role?
                    <select>
                        <option>Select current role</option>
                        <option>Student</option>
                        <option>Full Time Job</option>
                        <option>Full Time Learner</option>
                        <option>Prefer not to say</option>
                        <option>Other</option>
                    </select>
                </label>
            </fieldset>
            <fieldset>
                <label id="labelmargin">Would you recommend freeCodeCamp to a friend?
                    <label class="labelmargin3"><input class="radio" type="radio" value="definitely"
                            name="recommend" />Definitely</label>
                    <label class="labelmargin3"><input class="radio" type="radio" value="maybe"
                            name="recommend" />Maybe</label>
                    <label class="labelmargin3"><input class="radio" type="radio" value="notsure" name="recommend" />Not
                        sure</label>
                </label>
            </fieldset>
            <fieldset>
                <label>What's your favorite feature of freeCodeCamp
                    <select>
                        <option>Select an option</option>
                        <option>Challenges</option>
                        <option>Projects</option>
                        <option>Community</option>
                        <option>Open Source</option>
                    </select>
                </label>
            </fieldset>
            <fieldset>
                <label id="labelmargin2">What would you like to see improved? (Check all that apply)
                    <label><input class="checkboxes" type="checkbox" value="front-end-projects"
                            name="front-end-projects">Front End Projects</label>
                    <label><input class="checkboxes" type="checkbox" value="back-end-projects"
                            name="back-end-projects">Back End Projects</label>
                    <label><input class="checkboxes" type="checkbox" value="data-visualization"
                            name="data-visualization">Data Visualization</label>
                    <label><input class="checkboxes" type="checkbox" value="challenges"
                            name="challenges">Challenges</label>
                    <label><input class="checkboxes" type="checkbox" value="open-source-community"
                            name="open-source-community">Open Source Community</label>
                    <label><input class="checkboxes" type="checkbox" value="gitter-help-rooms"
                            name="gitter-help-rooms">Gitter Help Rooms</label>
                    <label><input class="checkboxes" type="checkbox" value="videos" name="videos">Videos</label>
                    <label><input class="checkboxes" type="checkbox" value="city-meetups" name="city-meetups">City
                        Meetups</label>
                    <label><input class="checkboxes" type="checkbox" value="wiki" name="wiki">Wiki</label>
                    <label><input class="checkboxes" type="checkbox" value="forum" name="forum">Forum</label>
                    <label><input class="checkboxes" type="checkbox" value="additional-courses"
                            name="additional-courses">Additional Courses</label>
                </label>
            </fieldset>
            <fieldset>
                <label id="lastlabel">Any comments or suggestions?
                    <textarea rows="4" cols="74" placeholder="Enter your comment here..."></textarea>
                </label>
            </fieldset>
            <input id="submitbutton" type="submit" value="Submit">
        </form>
    </main>
</body>

</html>

I’m accepting any other hints or tricks to better write my code or something like that!

2

You can give your input a border of none to fix that.

You tried a span element to make (optional) similar, it should have worked unless there is some other problem to your code, did you use the font-size property?

Could you explain a bit more about this?

1 Like
3

I’ve done it. But nothing happens. Including the select element, it does not remove the borders.

input {
    border: none;
}

select {
    border: none;
}

Here’s a pic of the borders in the project:

This one shows up when I click on the select element.

This one shows up when I click on the input type text elements.

And this one are on the checkboxes, without any action.

If you look closely, you can see them. Sorry for this level of detail, but I’m comparing with the original, and It doesn’t have any borders on it.

I couldn’t get to embbed the images. I’m cut to only one per post. I’ve chosen the checkboxes problem. :upside_down_face:

Thank you! I could solve it! You’re indeed right, it should have worked, but the thing is, I don’t know what it is, but sometimes, when I work with text styling like in this case, it bugs. The text doesn’t change until I change the words in it, and then, the style change. Sometimes, I figure it out by myself, and sometimes I doubt myself and I think that the code is wrong. Do you know what is causing this?

Yes! I will provide you a picture of the problem.
inputradiodisalign
You see, I can’t get them to stay on the same line.

But hey, thank you for the answer! I’m really glad that you answered me! I was not believing that someone would really answer me! :slight_smile:

4

If this problem is only happening on freeCodeCamp it could be something to do with the content not refreshing. Either way, if you refresh the tab or window it should fix it if everything is correct.

For this issue try using the vertical-align property with a value of middle. It could be applied like this:

#labelmargin {
  vertical-align: middle;
}

Your first issue I am not sure if you got it resolved or not.

5

It is happening on Visual Studio Code. I have to change the text in the html so the style in the css kick in.

Thank you. I got this solved too thanks to you!

Just one that wasn’t solved yet. It is the border issues. Even though I have changed the borders to none, they are still appearing. Here’s a pic of one of them:

checkboxesinput

You see, in the checkbox, if you look closely, it has borders inside of it. And I’ve already changed it.

* {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: #f3f3f3;
}

body {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

h1, p {
    text-align: center;
    margin-bottom: 0.5rem;
}

h1 {
    display: block;
    font-size: 2em;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: #f3f3f3;
    padding-top: 50px;
}

p {
    font-style: italic;
    font-weight: 200;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);
    font-size: 1.125rem;
    margin-bottom: 30px;
}

form {
    width: 720px;
    margin: 0 auto;
    background-color: rgba(27, 27, 50, 0.8);
    border-radius: 0.25rem;
    padding: 2.0rem;
    padding-top: 2.4rem;
    padding-bottom: 60px;
}

fieldset {
    border: none;
}

.firstpart {
    display: block;
    color: #495057;
    padding: 12px;
    border-radius: 0.3rem;
    width: 630px;
    height: 38px;
    margin-top: 8px;
    border-color: white;
    margin-bottom: 28px;
}

label {
    display: block;
    font-size: 18px;
    font-weight: 400;
    margin-right: 0;
    margin-left: 0;
}

select {
    display: block;
    color: #495057;
    border-radius: 0.3rem;
    width: 630px;
    height: 38px;
    margin-top: 8px;
    border-color: white;
    margin-bottom: 28px;
    padding-left: 12px;
    padding-top: 2px;
}

option {
    color: #495057;
}

#labelmargin {
    margin-top: -16px;
}

.radio {
    display: inline-block;
    margin-right: 0.625rem;
    min-height: 1.25rem;
    min-width: 1.25rem;
    margin-top: 10px;
    vertical-align: bottom;
}

.extratext {
    font-size: 5px;
}

.checkboxes {
    transform: scale(1.6);
    border: 0px solid black;
    margin: 10px;
    margin-right: 15px;
}

#labelmargin2 {
    margin-top: -16px;
}

#lastlabel {
    margin-top: 15px;
}

textarea {
    margin-top: 9px;
    margin-bottom: 22px;
    display: block;
    padding: 12px;
}

#submitbutton {
    background-color: #37af65;
    margin-left: 12px;
    width: 636px;
    height: 46px;
    border-radius: 0.1rem;
    border-color: #37af65;
}

input {
    border: none;
}

span {
    margin-left: 0.0rem;
    font-size: 0.9rem;
    color: #e4e4e4;
}
select {
    border: none;
}
.labelmargin3 {
    vertical-align: bottom;
}

I gave the input element the border none.

6

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