Business Website - Registration page for the tennis camp

[cholpoun]

This is a website for the summer camp registrations, it includes a quote from the former participant, a registraiton form, a navigation bar and grid section with other camp options.

https://66d48d6d1c630b008e16a794--heroic-kataifi-f3484c.netlify.app/

[HIPPIEKICK]

Please provide a Netlify link to your deployed site 👀

[cholpoun]

@HIPPIEKICK here it is https://66d48d6d1c630b008e16a794--heroic-kataifi-f3484c.netlify.app/

[HIPPIEKICK]

Hi Cholpoun, awesome job on your business site! 🎾🏆 Some feedback coming up.

HTML

• Your form includes multiple input types, which is perfect! Including social media buttons like “Register with Google” makes it look like a real login flow 🥳
• For the social buttons, it would be more appropriate to use links (<a>) styled as buttons, since they don’t actually submit the form. Right now, they are button type="button", but using <a> would be semantically more accurate:

<a
  href="#"
  class="btn-google">
  Register with Google
</a>

CSS

• Your CSS is well-organized, and you've made great use of classes.
• Love the styling of the form specifically, but also the whole page in general.
• There's a bit of repetitive code. To follow the DRY (Don't Repeat Yourself) principle, try grouping shared styles. Example, instead of:

.btn-create {
  width: 100%;
  padding: 15px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
}

.btn-google,
.btn-twitter {
  width: 100%;
  padding: 15px;
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-twitter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

We could use an additional class name and group it something like:

.btn {
  width: 100%;
  padding: 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-create {
  background-color: #000;
  color: #fff;
  border: none;
}

.btn-google,
.btn-twitter {
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
}

Overall, really good job with this project, it looks so good - both code wise and styling. You’re definitely on the right track! Just think about the DRY-principle going forward.

[cholpoun]

@HIPPIEKICK Thank you for the feedback ❤️

[nella-x]

Great job with the business site! I hope you find my comments useful :) /Nella

[nella-x]

Great with the comments to clarify the different sections!

[nella-x]

← this could be called a section (like your class name suggests, and then you can have the div:s inside of the section)

[nella-x]

← I would name this something like form-box or registration-box, so it's easier to understand what type of content it holds.

[nella-x]

Here I'm curious to why you have div:s around the label and input. I think you can add on to the margin-bottom for the input in the CSS, and get the same effect without the div:s.
input[type="text"], input[type="email"], input[type="password"]

[nella-x]

I think the form looks really nice! The box around could be styled differently to adjust better to the different screen sizes. (width, and maybe center it for the smaller screen sizes)

[nella-x]

I think the closing div:s could be closer to the opening div. So it’s easier to see where the div actually ends. Or maybe for example the paragraphs and the spans could have been a class instead of a div, or just styled as p and span in the CSS. I think that would look more “clean”.

[nella-x]

Nice work with the CSS grid! It works well on the different screen sizes.

[nella-x]

I like the structure here and the use of div:s!

[nella-x]

I like this part also, it looks good on all the different screen sizes when the text is centered.

[nella-x]

I like the overall design of the site, especially in the biggest screen size. I think the use of boxes is really good because it makes the site but also the code easier to overlook. I think the big image and the transparent quote-box is a nice way to combine image and text together.