BlueWave Scuba

[Fannyhenriques]

This project was developed to create a responsive business website for BlueWave Scuba, featuring a full-width header video and a sign-up form with various inputs. The site was supposed to adapt seamlessly across devices with screen widths ranging from 320px to 1600px.

The main challenges were:

• Integrating a full-width video in the header that remains fixed and scales properly across different screen sizes.
• Building a responsive sign-up form that adapts to various device widths, from small mobile screens to large desktops.

To address the first challenge, I used a video element within the header and applied CSS properties such as object-fit: cover and position: sticky to ensure the video maintained its size and stayed fixed in the header.

For the second challenge, I employed a combination of flexible layout techniques and media queries to ensure the form's responsiveness. I started by building the form with a mobile-first approach, then added media queries to adjust the layout and styling for larger screens.

Tools and Technologies Used
Google Fonts: To enhance the typography.
Responsive Design: Utilizing media queries for a seamless experience across devices.

If I had more time, I would:

• Add a navigation bar and a logo to improve site structure and branding.
• Include additional information about what BlueWave Scuba offers to provide visitors with a clear understanding of the site's purpose.
• Add additional form validation.
• Incorporate animations to enhance user interaction.

View it live

Deployed project: https://bluewavescuba.netlify.app

[HIPPIEKICK]

Hi Fanny, fantastic job on building this website! 🎉 You've covered a lot of ground, including responsiveness, media integration, and form handling.

HTML

• Excellent use of a video in the header (<video autoplay muted loop playsinline>), it's responsive, and you included proper fallback text for older browsers.
• The input fields for "First name" and "Last name" should use the type="text" attribute instead of non-standard types like type="first-name" and type="last-name". Correct usage:

<input
  type="text"
  name="first-name"
  placeholder="First name"
/>

• When grouping form elements, it's a good practice to include a inside the for better accessibility and semantic structure. For instance, adding a legend like:

<fieldset>
  <legend>Sign up for BlueWave Scuba</legend>
  <!-- Form content -->
</fieldset>

CSS

• The use of Google Fonts gives the website a clean and professional feel. Also, the layout scales well across devices with media queries.
• You have some repeated CSS properties across media queries (like font-size, button styles). When using media queries, remember that you only have to override what's changed.

Wohoo! You’ve done a wonderful job creating a functional and visually appealing business site. The form works well, the design is responsive, and your code is structured nicely. There’s just a bit of refinement needed with the input types...

Changes Requested

• Update the inputs' type attributes

[Fannyhenriques]

Thank you so much for your feedback, @HIPPIEKICK! 😊 I really appreciate the clarity in your explanations. I believe I've updated the page according to the requested changes now, but let me know if I've missed anything!

[JennieDalgren]

All good in the hood now Fanny, it's tricky in the beginning to remember what all the attributes are about!

Keep up the good work 🚀

[Anna2024WebDev]

Overall comments on the page:

I really like your page Fanny! ✨Not least the topic (diving which Is a hobby of mine and brings back memories ☺️. ) The hero video is inviting and the video as well as the whole web page looks professional and could very well act as a real business site.

I have looked it through from top to bottom and everything seems to work well.

The layout and design is super nice and clean and the form works without any problems. It is well integrated with the rest of the page but still stands out with the white text against the black background. I also think the size of the form is perfect compared to the video.

The code is clean and easy to read. Good job on that as well! ✨

Areas of improvement:

I just had some responsiveness comments that I think could improve the page even more. And as you know, only my thoughts and comments no request to change if you don´t agree.

CSS:

I noticed that when looking at the responsiveness of your page it was lacking somewhat for the footer/byline when looking at it on a tablet- ipad air or Asus Zenbook fold for example. The footer seems to float up to the form content.

I had the same problem with my footer at first and fixed it by putting all the main content such as hero video + hero text and form to the main section in HTML. Then in CSS I set the main to flex-grow: 1, which makes the main section take up most space and keeps the footer at the bottom.

Like this: main {
flex-grow: 1;
}

See screen shot below;

Here is also a good youtube tutorial that helped me. (Flexbox method starts from 12:57 min)
https://www.youtube.com/watch?v=ffb34dCmMVQ

Hero:

Another thing I noticed was that the hero video looks somewhat cutoff when looking at it from a PC. I looked at the CSS settings for the video in inspector and changed it to 100vh instead of 60vh and I think it looks full size and not cutoff in the top after that change. See screenshots below. 60vh is the original viewport height that you set.

60vh (original size)

100 vh