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!
The website uses VH instead of SVH for vertical positioning. That’s interesting.
In terms of how to learn web development, it’s a long winding complicated process. I’d suggest to learn HTML, CSS and vanilla JS, then going with React and TS. Once you go through basic courses / documentation on those, you can try making some proper full fledged websites.
The x.ai website looks very simple and can be recreated (in terms of visuals) with only HTML and CSS.
The way to learn if you have no idea where to start is to start learning, get a bunch of courses on Udemy, or just watch YouTube, or maybe there are some courses on Coursera.
Until you at least have a solid grasp of what is a website and what are the basics of creating them, I’d strongly advise not to bother with trying to recreate anything.