WebDev

1150 readers

1 users here now

Community for all things Web Development related.

founded 1 year ago

MODERATORS

[email protected]

How to recreate this website? (Beginner adivce, Best Practices) (lemmy.world)

submitted 1 year ago* (last edited 1 year ago) by [email protected] to c/[email protected]

6 comments fedilink hide all child comments

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!

top 5 comments

sorted by: hot top controversial new old

[–] [email protected] 6 points 1 year ago

I would suggest mastering vanilla HTML+CSS before moving onto frameworks. It'll be much easier to understand once you know the basics.

[–] [email protected] 4 points 1 year ago

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

[–] [email protected] 3 points 1 year ago

[–] [email protected] 3 points 1 year ago* (last edited 1 year ago)

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.

[–] [email protected] 1 points 1 year ago

Just dive in, try! It's like one page or two right? If you don't have the technical skills yet you can go with the fundamentals and just use vanilla js, CSS and HTML. But if you go with a framework shouldn't be too bad either. They make a lot of aspects of the development easier but I do believe that you need to have a proper grasp of the fundamentals

load more comments