Feedback please!SURVEY FORM PROJECT., I'm confused?

HTML-CSS
1

Can anybody please review my project? :sweat_smile:I would like some insight.I passed all the tests but I want to make it more aesthetically pleasing. I want to reduce the opacity of the container. Also make the textarea bigger.Also my code seems to be a little messy, so any tips on organizing it better? :thinking:
Thank you! :blush:

here’s the link

https://codepen.io/ziana109/pen/RwjJgMv?editors=1000

2

First of all, I love how you use a pastel blue colour for background of the form. It suits well with the yellow you have chosen for input [text].

One thing you can do with textarea element: you can use ‘min-height’ in CSS which allows textarea to be vertically resize.

After you are comfortable with basic CSS, you should try to use media query to make your website responsive!

Well done!

1 Like
3

Hi @turbo-giggle,

If you want more replies, maybe you should post your project in the #project-feedback subform.

So, about the organisation my advices are:

  • Always read your code few times, to see the possible tags mistake for example.
  • You can use the webiste: https://validator.w3.org/. It will allow you to debug your HTML code. You can also use a CodePen feature to debug:
    Screenshot 2022-02-23 at 13.10.52
    Screenshot 2022-02-23 at 13.10.521920×579 88.2 KB
  • In your code, the first lines and tags make part of the metadata of your page. They should be nested into a head tag:
<title>Beach-bum Survey form</title>
<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=Roboto:wght@100&display=swap" rel="stylesheet">
<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=Indie+Flower&display=swap" rel="stylesheet">
<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=Asap&display=swap" rel="stylesheet">
  • It brings me at the structure topic. As you are starting your journey HTML/CSS, I advice you to always write correctly the structure, even it is CodePen and that you don’t need it. You are using CodePen to make the tests for freeCodeCamp, but later, for personal/professional projects, you will need a good structure. Example:
<!DOCTYPE html>
<html>
  <head>
    <!-- metadata -->
  </head>
  <body>
    <!-- Code, things visible on the page -->
  </body>
<html>
  • Intend your code. It will be easier to read yourself again and maybe find little mistakes.
  • Try to keep the styling for the CSS. Example in your code (I put comments inside):
<! it is good to use the for property for label tags, to connect them with their input: <label for="same_id_input"></label> -->
<label id="number-label">Age:
  <!-- You can define the size on elements into CSS with properties such has width, min-width etc -->
  <input id="number" type="number" min="10"  max="120" placeholder="Your Age" required>
</label>

Now about the opacity of your container. I think your are talking about the principal one. There is RGBA (Red Green Blue Alpha) color values you can use. The alpha value is between 0 (full transparent) to 1 (full opaque).

.container {
  background-color: rgba(red, green, blue, alpha);
}

Finally, about the textarea, you can use CSS to change its size, with the properties height and width

Hope it answers your questions! Know that your page looks good and colourful, I like it. I guess it makes part of your first projects with these languages, so great job!

1 Like
4

Thank you so much for the feedback! It means a lot to me :heart: And I’m new here so I’m still figuring things out. Next time i’ll post my project on the subform for sure! Thank you for clearing a lot of my doubts! :slight_smile:

1 Like
5

@sulsoyy Thank you !! I used the min-height property and that was it! :heart:

6

You’re welcome @turbo-giggle, good luck for the next projects!

7

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