Tribute Page - Yuri Gagarin

Code Feedback
1

Hi All, give some feedback about my project. Thx

https://visardor.github.io/freeCodeCamp-tributePage/

Code
https://github.com/visardor/freeCodeCamp-tributePage

15 Likes
2

Hey, awesome design! :smiley: I love the simplicity and the clean layout and the super cool header image/animation :slight_smile: One thing that is a bit weird is that the menu links open in a new tab (and they basically lead you to the same page), which is maybe a bit counter-intuitive, but other than that, really truly amazing page! :star_struck:

3 Likes
3

That’s one of the best projects I have ever seen. How did you achieve the animations? Was it pure CSS and HTML or you used JavaScript too?

4

I really don’t have any criticisms on your proj. Just wanted to say that the simplicity and organization of your js code is something beautiful.

1 Like
5

Hi, thanks for you advice, i redesign my navigation links)

1 Like
6

Hi, it’s a pure css and js. I add a class to the element, when it become over of point of the screen. Sorry for my eng)

7

Looks very nice, good job.

  1. I would disable text selection on the .page-header text.
.page-header__intro {
  user-select: none;
}

Or keep text selection but not have the cursor change.

cursor: default; or pointer-events: none;

  1. Having the menu toggle at the top right but opening the navigation menu from the left makes the navigation UX a bit cumbersome, especially on wide screens. I would prefer the toggle and menu being closer in relation so you don’t have to move the mouse so far to get to the menu. This is more an issue because the toggle isn’t triggered by the screen size. If the toggle was only active when the screen was narrow it wouldn’t be a big deal.

  2. I would prefer it if the menu closed when clicking the links and when clicking outside the menu (i.e. clicking on the page).

  3. I’d give the hover ::after pseudo-element a tiny bit of border-radius (like 2px) just to remove the hard edges.

  4. About the .heading-secondary text “WHO IS IT”. It is a he. So something like “Who was he” is more appropriate.

Again very nice job on the page.

1 Like
8

Great tribute page! Since I don’t have many criticisms for you, perhaps you could help me out instead? :sweat_smile:

I think your animations are amazing and where can I learn how to build them? Any tutorials on FCC or other sources? :thinking:

Secondly, in my own tribute page I used animate.css (library) to add animation. I rather prefer your style and customization, especially with the animated title. Could you give criticism on my own animation and how to make it better? :grinning:

Here is my code… You can find the animation in the app.js file and feel free to ask me any questions on my code. :grin:

2 Likes
9

Thank you so much, i’m follow your advice, and it looks better

10

This. We are all learning to code…but this kind of animation and the way you lay things out is amazing. Any help for more of us animationless learners? :smiley:

I aim to be this kind of developer:nice and clean design, eye catching animations. Can pure CSS and pure JS achieve this beauty?

11

Thanks so much! But I think that using animate.css restricts many possibilities and hopefully @Vis can enlighten us to create such great animation using pure JS and CSS. :grinning: :wink:

1 Like
12

Hi, so about links, i recomend you to read this articles or just look through it:

Firstly you need to make block or text invisible,with opacity, translateX, translateY or scale,
After that in some momemt you add a class, that move element in current position in layout
So try to write own animation with block or text looking animate.css

Sory for my eng)

1 Like
13

Some inspiration:

1 Like
14
1 Like
15
1 Like
16

https://www.youtube.com/watch?v=C_JKlr4WKKs - How to create css animation during scroll with pure js.

1 Like
17

Thanks so much for sharing your knowledge with us! Good luck on your future projects. :grinning:

18

You might also want to check out the Intersection Observer API.

I haven’t actually done much with it but it is a pretty handy API for triggering actions on scroll.

2 Likes
19

Thx, for useful link

20

Hamburger navigation icon seems like not belongs to the other parts design - background color too light and margins are small in comparison to other page elements. I’d recommend picking colors related to page backgrounds.

Link click is not memorized - it’s more comfortable for a user to see at which section he is now.

When I open navigation, move to another section and click page area outside navigation I want navigation block get hidden on click. Now I have to click X icon which is not so comfortable.

The page itself looks very nice, well done! :clap: