Struggling to properly implement designs to my pages

1

Hi
So I can easily create the markup for a site but I struggle to animate it and even make it look better:
Take for example the first project:
https://codepen.io/Kish2000/pen/xNRpBE

I have about 3 ideas in mind to actually look beautiful and satisfying and it is a very simple page to design but I couldn’t implement what I had in mind.
What could I be doing wrong?

2

Do you have something specific in mind you want to achieve and need help with? We can’t know what you have tried or wanted but didn’t manage to do.

3

Take this site for example

The scrolling animations on that

4

And this one as well

5

Maybe start by picking something a little closer to your current skill level, otherwise you will likely get very frustrated trying to do things that are too difficult.

There are sites like codrops which has a bunch of cool stuff to learn from.

As for the scroll animations there are also libraries to help you get some of that.

Look at youtube for some tutorials
https://www.youtube.com/results?search_query=Scroll+Animations

6

Check out https://uimovement.com/
For design inspiration: collectui.com, https://www.lapa.ninja

7

Thank you sooo much
These are all great resources :slight_smile:

1 Like
8

I realize this is an old topic but it was all I could find. Are there any sources about how to go from UI design to html/css/javascript like you learn here on freecodecamp? I know how to make my own websites now with react/vue using component frameworks, but getting a website to look like a design (from dribbble/figma for example) is something else for me.

Edit: https://www.youtube.com/watch?v=aQMsSbrVzEU this guy for example does it very smooth, would love to learn how to do this. (For example: a customer hires a designer, makes a design, then wants me to build it using React/scss)