[HTML/CSS] Survey Form - how to make input form sizes are same?

Project Feedback
#1

Hi, would you help me to find an error on my code?

I was reviewing my code with FCC solution and applied its CSS to mine. However, it seems the input boxes (blue arrows) are different sizes. I’d like to make them the same sizes.

I understand the class “form-control” has its style and I apply them also on the dropdown list and the same width size of the text-area and submit button.

  • Dropdown list has “form-control” class and there are no other override CSS styles, but the CSS style seems a bit off from “form-control” class like height and width.
  • Text-area and Submit Button’s width are set to 100% like others, but different width -.-;

Here is my CodePen URL and below is the screenshot:

Screen Shot 2021-01-21 at 5.01.10 PM
Screen Shot 2021-01-21 at 5.01.10 PM475×649 28.3 KB

Thank you!

#2

The HTML code is the same as the sample too, not just the CSS although you’ve neglected some selectors which is why yours does not line up correctly.

You are to make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

One thing that will help you visualize how you have your elements set up and defined is to temporarily add the following to the top of the CSS editor;

* {
  border: 1px solid black;
}
#3

I did it from the scratch and I submitted that one before… And then I wanted to learn more, so follow the FCC solution. CodePen didn’t show the changes over time like GitHub, so it looked like I just simply copied. I think that I would better to do it at a new CodePen…

Thank you for your help!

#4

The details view shows when the pen was created and when it was last updated.

Just so you know, this pen is your submitted project. If someone were to look at your projects now it will look like you have copied the sample project.
You should start another pen to play with.
Side note, the FCC samples are just that, samples. Not solutions. They just show one way the project can be completed.

1 Like
#5

Hi @boyeong.yoon!

I understand wanting to practice your skills and try rebuild the sample.

But I think a healthier learning approach would be to open a new pen and play around with the different possibilities.

For the form, you could start with the name, and email options.
Play around with the layout and don’t be afraid to break the code.

You will learn a lot through experimenting and seeing what is possible.

It is all part of the learning process. :grinning:

2 Likes
#6

Something I also thought of @boyeong.yoon.
Maybe copy the sample solution locally and then use dev tools to see how the elements have been styled.

1 Like