Finally done with Product Landing Page

Hello again everyone. Its been almost a week since i last posted my second Project(Survey-form). I finally completed my third project.

This time, i decided to take a completely different approach rather than just copying the example layout as i was feeling a bit ambitious. It was a lot more difficult and frustrating to complete this project.

Took a lot of hit and trial with this one, especially with the logo and the map-image part.And also a lot of googling stuff. Not a good experience. It felt good when it was completed though. Just like last time I would like to get your Feedback on this one as well.

Edit:I have finally made the appropriate corrections as pointed out by @bbsmooth . i have also made the Page a lot more mobile screen friendly. This is done for now.

Here’s the link : https://codepen.io/parth0201-in/full/XWgVjzJ

3 Likes

This is a really solid effort. There’s not much to pick on here, but I’ll try my best :slight_smile:

  • The email address input at the bottom needs to have a <label>. Placeholder text is just supposed to be an example of what you want the user to enter but it does not take the place of a label. If you want to be really accessible you can add the autocomplete attribute to the input.

  • I think you need a few more heading tags. The “About Us” is definitely a heading. The six feature cards below the video probably need a heading. As well as the three plan descriptions. You don’t necessarily need to have them visible on the page, you can visually hide them. But blind users that use screen readers depend on headings to help them get an overview of the page, so you should have a heading for every distinct section of the page.

  • The five <section> tags should probably be wrapped in a <main>. Best practices dictate that you have one <main> element on your page and all of your content goes in main. This doesn’t include the <header> and <footer> for the page which will go before/after main.

  • Now I’m going to get real picky here :slight_smile: For the world map, I would leave the alt attribute for the first image (world map) blank because it doesn’t really provide any useful information since there are six additional continent images that have good alt text on them. So the screen reader user doesn’t need to hear the “world map” alt text since they will hear the six continent images alt text. Also, the Australia image accidentally has “North America” as the alt text.

  • I’m not sure what the purpose of the phrase “Security and Speed with Lightning VPN” below the world map is supposed to be doing here? I don’t think it is acting as a heading because there doesn’t appear to be any content under it that elaborates on that concept. If you just mean to say that you will get both security and speed with Lightning VPN then I think you need to say that a little better. You actually do say that in the sentence above the world map, so it seems like you are restating this, which is fine, I think it just needs to be reworked a little so that it seems more like an informational statement than a heading. Again, this is very picky and you are certainly free to disagree.

  • I think I would turn the sentence above the video into the heading “How Lightning VPN Works” and then just have the video underneath. This adds a useful heading to the page and is similar to how you handle the About Us section.

Again, really nice job, I’m being very picky about some of these issues just because there isn’t too much to pick on here.

Thank You for analyzing my Work @bbsmooth . Sorry for such a late reply. i just wanted to complete the course before i went back and did the corrections you spoke of .

i wrote " alt " for every image because i thought that’s considered the norm and best practice. But you are right, it doesn’t really do anything on world map image.

“Security and speed with lightning” was supposed to be a catchphrase like express vpn’s “the vpn that just works” but i couldn’t think of any, so i went with whatever came to mind. Seems like you didn’t find it catchy :cry: .Well, i will either remove it or think of something new.

The sentence was written for a different video that explained just what a vpn is. when i thinking of a name for the product, i didn’t actually know that a vpn lightning (still different from lightning vpn but close enough) actually existed. i will change that as well.

Great job. It looks great.

1 Like

Thank you @Innocent-Bern .

1 Like

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