What I need to make the same this page

What I need to make the same this page
0

hi

I really want to become a web designer but I am facing some challenges so far and these challenges make my coding life like hell. my goal is to design as much as this webpage without using Webflow

please type " How to animate a video on scroll — After Effects & Lottie in Webflow" at youtube bar search to see what is talking about the video

please guys I really want to master this field

Why not just get a free Webflow account, download the project assets and follow along with the project? You can then dig into the code that Webflow produces and work out how it’s all put together.

If that’s too much of a challenge, try working on something smaller and gradually move up to more complex designs.

The freeCodeCamp curriculum will give you enough HTML & CSS knowledge so you can make a start on deciphering the code that Webflow outputs, but you’ll have to constantly keep referring to sites such as https://developer.mozilla.org/en-US/ and https://www.w3schools.com/ to give you a bit more indepth knowledge.

2 Likes

Hey @Mansoorhamad!

I couldn’t agree anymore with what @phildc has explained in his post.

However, to give you my answer and advice is a tricky one. That is because I do not know your skills and background. What is your level of skills in both web design and development?

So I have watched the video that you have mentioned. By the way, it is a beautiful design, and even I have fallen in love with the concept of animation on scroll. But, honestly, would I go out there right now and design a web layout and implement this design concept?

The answer is no.

(Note that my answer is based on my personal situation and doesn’t mean it is right and that everyone should do the same.)

I personally wouldn’t because even though I am at a comfortable level with HTML and CSS (I also have basic skills in JS) and have a decent experience in design (graphic design included). In that video, if I am correct, to make this involves using software and tools such as After Effects, Bodymoving extension, Cinema 4d, and even Webflow. All of these, which I have no experience in and some are clearly at an advanced level. Then there is a bit of coding involved like JSON (again, something that I have minimal experience in).

What my point is to become a great web designer (and developer) is to start from small. Build up and train your skills first and then challenge yourself to something as big as this. That was actually my (big) mistake that I have learned from my design studies. I failed a project because I became too ambitious in what I wanted to do in my work that was time-limited. Therefore my expectations were unrealistic.

As I have mentioned above, I do not know what is your skills and knowledge in both coding and design background. So, I hope my example below will give you some ideas.

Imagine that you are a boxer, wrestler, or even a Pokemon trainer!

There is no point to challenge a world champion when your skills are basic or non-existent. Instead, you train and challenge a trainer (that would be a web project) that is on the same level as you. When you feel you have done all the training at that level, then you can challenge someone else whose level is slightly above.

  • If you succeed the challenge, move onto the next level of training and repeat the process at the next level.

  • If you have not succeeded, retrain your skills and challenge another trainer at that level.

That video on scroll design concept is considered as the world champion. You admire it and feel inspired by what it does. So, make it your goal that you plan to build your levels to the point that one day you will be on that same level. :slight_smile:

That is something I personally do (and something I wish I did back then).

I hope this helps, but it would be great to know more about you, so maybe we can give you further advice in the future.

Happy coding and designing! :v:

4 Likes