Product Landing Page - Writera

Code Feedback
1

Hi guys,

Just finished my first landing page ever. I am not the best at design at all but kinda like the final result. I tried to make it responsive.

The feedback of the community has been super helpful. Please feel free to leave a comment and constructive criticism.

Really appreciate all feedback.

Thank you :blush:

URL:
https://camillacabto.github.io/Writera/

3 Likes
2

Hi @camillacab!

I think your project looks awesome! I like the subtle animations, colors and layout.

Two small things.

  1. There is a typo in the learn more section

  2. Maybe you could apply a darker linear gradient over the header image so the white text stands out more.

Keep up the good work!

Happy coding!

1 Like
3

Thanks for pointing it out @jwilkins.oboe! I have implemented the changes you suggested. :slight_smile: And thanks again for your comment on my project.

1 Like
4

Your page looks good @camillacab. Something to revisit;

  • Verify the user has entered a valid email addr. Throw an error if not.
    • You learned to do this when you created the survey form.
1 Like
5

Hey @camillacab. Your page looks really good ;).

Thereā€™s a minor responsive problem. At certain width, the h1 element of the ā€œcontent-centerā€ class goes below the navbar.

I may not be super expert in this, but thereā€™s something in your CSS that I donā€™t get.
So you have a body element that contains a header and about five sections and a footer element. So I consider your body element as the ā€œParent elementā€ or ā€œFlex containerā€ and the other sections (including the header and the footer) inside it the ā€œChild elementsā€ or ā€œFlex itemsā€. Right?

I wonder why you are not using the display: flex on the Flex container?

All in all, you did a great job :slight_smile:

1 Like
6

Hi @Pejman,

Thanks a lot for your comment and feedback. :smiley: I will fix the h1 for sure.

Do you mean turn the body element into a flex container and consequently all its children (header, sections, and footer) into flex items? Iā€™ve never seen this approach, not sure if it would work for this layout. But will do some research about it, thanks. :slight_smile:

In this case, the body element is not a flex container. Only some of its children are flex containers, so that would help to position the flex items inside them.

7

Thanks again @Roma :slight_smile:

8

@camillacab,

You can either turn the body element into a flex container or put all the sections, header, and footer in another parent container. Do some research about nested flexboxes.

Actually, Iā€™m going to make my next project (technical documentation) about the flexbox layout and nested flexbox.

Have fun :wink:

1 Like
9

Thanks @Pejman. Yep, I have seen nested flexboxes before but never seen someone using in the body element itself. Actually, it may be a good idea for a technical documentation page since we have to split the width of the whole page only between the table of contents and the content itself and there is no extra elements with different sizes :slight_smile:

Good luck with your project

1 Like