Responsive Manage Landing Page

Hey @chizoba-009, some suggestions to improve you code:

• Theres no need for a Nav Element; theres no nav menu. So this should be wrapped in a Header Element.

• The "Track company-wide progress", "Advanced built-in reports", " Everything you need in one place" are using the wrong headings size. When using headings, you CANNOT skip heading levels. So these should be h3 headings.

• The "Simplify how your team works today" should be an h2 heading.

• The Alt Tag for the images of the people should NOT be blank. They need to let screenreader users, who they are; "Headshot of [Insert Name Here]".

• The input for the "updates in your inbox" shouldn't be type="text" it should be type="email" so that browsers can properly recognize it.

• While having interactive content (cards, links, icons, buttons, etc…) can definitely make content less static, if not done properly, it can actually have negative effect on your users experience. By simply just applying a “hover” effect to your content, you’re assuming that every device is compatible with “hover” effects. Unfortunately, most devices are not. To provide your users a better experience, you can use the @media (hover: hover) . Now users that that are devices that are not “hover” compatible will be able to enjoy your content.

More info:

https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/

https://youtu.be/uuluAyw9AI0

• Your CSS Reset is very little, you want to add more to it. Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

• For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

More Info:

https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

Happy Coding!

Hello @chizoba-009

Other than the fact that you did not do the form validation, Your projects looks very nice i especially like the slider

• As for the form validation you can use bootstrap which will mean that you only have to do some if else statement in your JS like the example below

• HTML

   <form>
            <div class="form-group col-6">
              <input type="text" class="form-control" id="email" placeholder="[email protected]">
              <div class="invalid-feedback" >
                Please input a valid email
              </div>
            </div>
            <button type="submit"">Get Started For Free</button>
          </aside>
        </form>

• JS

callToActionFormValidation();

function callToActionFormValidation() {
  form.addEventListener("submit", (e) => {
    const reg = /\S+@\S+\.\S+/;
    if (!reg.test(email.value)) {
      email.classList.add("is-invalid");
    } else {
      email.classList.remove("is-invalid");
      alert("email submitted successfuly");
      email.value = "";
    }
    e.preventDefault();
  });
}

in this example, regular expression was used but you can use alternative means

• Nice project and Happy coding