TLDR: explain how to rebuild x.ai to me, like I'm a 5 year old.
Hi everyone, I'd like to improve my Web dev skills and am looking for advice on how to get started and make it work. So my idea is to recreate this website as it currently is x.ai for starters (including the animated background). And later on, build up my personal website on that style. I simply want to use it as a base for following websites. I want to start by the mobile first approach.
How do I start? Should I try building it from scratch by hand (html,css,js) or rather use a framework (I had Gatsby in mind)? What is the best practices to make this a sustainable and reusable project?
Please bear with me, I can do figma quite confidently but I have little to no skills in web development yet. So if there is any word of advice for a beginner, I'll be grateful! Thanks!
I would read up on flexbox and grid, here are some games to practice:
http://www.flexboxdefense.com/
https://flexboxfroggy.com/
https://cssgridgarden.com/
You can do everything on your own, check out keyframes and transform. Play around with it!
https://animista.net/play