I would love to get some feedback on my three projects on Survey, Product landing and Technical documentation page

I would love to get some feedback on my three projects on Survey, Product landing and Technical documentation page
0

#1

I have actually forgotten to ask for feedback in this forum for my projects. I have already created a topic for feedback of the survey page and was thinking if i could paste the other three links in this topic

I’m anyways pasting the links please suggest if you require me to create new topics

Survey Page
Product landing page - i have svg animation in this one :slight_smile:
Technical documentation page


#2

I recommend you to submit one at a time. You’ll get more feedback for one project that for 3.

Survey form looks clean to me. The inputs are very clean and it works good.

Landing page needs responsiveness on the menu and the first section. I would also change the color combination for the pricing. Oh, and I don’t see the SVG animation.

The documentation page needs a background color change ASAP and the arrow in the right is in the middle of the screen, which I think is not ideal because it’s taking space away from the content.

I’m visiting the site from my phone, so maybe on desktop some of these comments don’t apply.

Good job!


#3

Thank you so much for the feedback, i will going forward for the new projects post one at a time

I have changed the colors on the documentation page and for arrow i took a different decision to make it the part of the content before every section

I’m working on the landing page so far changed the pricing colors but working on the first section
I did not show the animation on the mobile page but it is there on the tablet and laptop mode

If you like i can show the svg animation on mobile but i wonder is it good to show svg animations on mobile? Sorry i’m new to svg animation i do not know the best practices.


#4

I have also added the svg animation to the mobile and changed the form width and height.


#5

Hi, I just looked at the technical documentation page (on a laptop), so all my comments are about that.

First of all, the layout is clear and functional. Every button that I press does exactly what I’d expect it to do. So the fundamentals are solid. Well done!

That said, there are a number of things that could improve the UX slightly:

  1. When I hover over any item in the sidebar, the layout of the whole menu jumps slightly. And then it does the same when my pointer leaves the highlighted item. This is super annoying. See if you can fix that.

  2. The sidebar navigation menu is only useful when a user is at the top of the page. Did you consider making it sticky so that it’s still available to click on when a user is reading lower sections?

  3. The buttons to return to the top of the page are a bit small and it took me a moment to find them. You might consider enlarging them, changing their color, or moving them to the left so that they’re more readily apparent.

  4. When I click on any item in the sidebar, the page jumps to the appropriate section. This is fine, but a smoother scroll might be better. This might take some time to implement, however. You’re controlling navigation with <a> tags right now, but I don’t think there’s any way to get a smooth scroll with that. (Someone please correct me if I’m wrong about that.) But if you instead scrolled to each section by using JavaScript, you could do this:

    window.scrollTo({
      top: WHEREVER_YOU_NEED_TO_SCROLL_TO,
      behavior: 'smooth'
    });

That would give you a smooth scroll instead of a jump. (I’m not 100% sure that it would look better, though. Since the page is fairly long, a smooth scroll all the way to the final section might be annoying. You could test it out.)

  1. When the page jumps to a section, the section heading is stuck right at the top of the viewport. It might be good to add a bit more margin or padding to give it a little space to breathe.

Again, these are all just tweaks that might improve the solid work you’ve already done. Good job!


#6

product landing page is weird.

having one straight color all the way down with no alternations between sections makes it feel bland.

This looks really odd.

That nav bar blends in way to much


#7

thank you so much for feedback i will work on some ux tweaks and get back


#8

Thank you for feedback and yes you are right about how odd it looks i guess my approach for this design was not up to the point, im now already thinking to redesign the product landing page completely, i got an idea from one of my designs on my behance portfolio, I will use both css grid and flexbox for this one


#9

Hi @michaelnicol hope you are doing good ! I just wanted to say that i have redesigned the product landing page and made it more colourful. I have created a new topic get the feedback on that page


#10

The features part looks odd. On smaller screen the main title is not centered, and the features page should flex int a column.

(use screenfly --> http://quirktools.com/screenfly/)

Its much better, but the title page coloring is hard to look at. Two bright colors do not mix well. try white instead of blue. or something.


#11

Hello @michaelnicol i have redesigned using a different color scheme and add js code for navigation


#12

Okay i checked it out --> https://maheth.github.io/CompleteFreecodecampProjects/ProductLanding/index.html

Here is what i can say:

  • The blue color scheme is too bright. Use like a purple or something. You have bright white, brighter blue, and bright white and orange text. Try some black text also btw.

  • collapse into the 3 bars on smaller screens. On desktop it just looks weird (and blocks stuff).

  • Again bright on bright with that ‘Get Started’ button.

  • Add more features here. It looks bland currently

  • Try adding a box shadow to your header to separate it from the page. box-shadow: 3px 3px 5px 5px;

  • This video is way too small:

  • Don’t color your text the same color as the fixed navigation bar. And that gap between ‘Pricing’ and the prices themselves is way too big.

I feel like your trying to over modernize your webpage. Take a step back, look at multiple examples of product landing pages and use that as inspiration.

I have never seen a landing page with no images of the product itself.


#13

Thanks i will look into the designs, in a way i’m getting practice to think differently to code which i feel is good, but i will take some time and take a simple approach later on.

I have another question i’m also almost done with my portfolio page and yet update on github pages once i submit that link in freecodecamp and then create a new topic to get feedback on that page, will i get a certification after the feedback or once i submit the link in freecodecamp the certificate is automatically generated?


Feedback for My Def Leppard Tribute Page
#14

I have no idea, that is something you would have to create a separate topic about.


#15

Hello @michaelnicol i have made some some changes to color scheme to make the colors appear lighter and removed some svg backgrounds which were over modernizing my page

Here is the link

This is still in work in progess but i feel you will like this better.


#16

Make the video bigger.

Just move all the content below the header in the first place.

can you post this on codepen so i can take a shot at the color scheme?