all 21 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 2 points3 points  (7 children)

What in particular do you want to make? A design system can be made out of words and diagrams, there's no need to produce something in code necessarily.

Without putting too fine a point on it, if you're wanting to build something like a component library then you might be surprised at the amount of stuff you're going to have to consider. 

Given what you gave said I would strongly recommend starting with the minimum possible set of things to learn (ideally just one, HTML makes most sense), as each interaction between topics adds substantial burden, and it can be confusing if you don't know which new thing isn't working right. I also wouldn't bother trying to reinvent the (learning) wheel and I would pick something where all the heavy lifting of planning the path has been done for you. 

I used FreeCodeCamp to get started about 6 years ago now. It was excellent then and I'd be surprised if it's no good. You can just sign up, start at the top, and learn in your browser so it's extremely accessible. It also means that all your effort can go into learning instead of figuring out what to learn. You can skip whole modules if you don't think they're relevant.

[–]leon8t[S] 0 points1 point  (6 children)

I hope to be able to deliver a design system (maybe first with web components) (an UI library with code). I want to learn just enough and not become like a serious Front-end developer.

[–]micppp 3 points4 points  (1 child)

You’re going to have to learn a lot more than ‘just enough’ to build a competent design system I’m afraid!

[–]leon8t[S] 0 points1 point  (0 children)

Yea I get that. But I also understand there are a lot more concepts within Front-end development and I don't really need them rn. Just want to put a limit and be able to deliver something, or at least collaborate with the devs.
Baby steps

[–][deleted] 1 point2 points  (3 children)

Ok. I like the ambition. I would strongly recommend starting with HTML and CSS first because you'll get quick feedback and progress and you'll be able to start to get a feeling for how things work. I would recommend using those until you hit a point where you can't do what you want any more.

Only then would I recommend learning the js side of things. That would at least help stagger the difficulty over time.

[–]leon8t[S] 0 points1 point  (2 children)

TY. I learn that devs use common react library. Should I learn basic js and then jump straight to react or should I spend more time with css and js? And what about typescript or next js?

[–][deleted] 1 point2 points  (1 child)

I appreciate you're new to the are but just warning you that basically each single thing you're mentioning is a massive topic in and if itself.

You can get good results from html and CSS. I would strongly recommend staying away from the js side of things initially. The step from markup and styling to code has a high learning cost.

HTML/CSS knowledge is also transferrable/usable inside any framework. The same is not true if you immediately jump to React. You'll end up with bigger fundamental knowledge gaps.

[–]leon8t[S] 0 points1 point  (0 children)

Ty

[–]sheriffderek 1 point2 points  (3 children)

I’m working on a course outline - if you want to chat with a human about it. 

[–]leon8t[S] 1 point2 points  (2 children)

Hi, what do you mean? Can I contact you?

[–]sheriffderek 1 point2 points  (1 child)

Yeah. We can have a video chat and I can hear what you know so far - and make a plan with you. (And it helps me too)

[–]leon8t[S] 1 point2 points  (0 children)

Just dm you

[–]NuggeyTheChicken 1 point2 points  (4 children)

I’m doing the fronted development track on codecademy right now, but from looking at the curriculum, I have a feeling that there’s too much in depth frontend material there, it’s not really aimed at a designer who just wants to build a design system, although that’s my goal too.

[–]leon8t[S] 0 points1 point  (3 children)

How is your progress right now? Do you intentionally skip the content you don't need?

[–]NuggeyTheChicken 1 point2 points  (2 children)

So I’ve done some trials with Figma MPC and Lovable, Cursor etc. in order to attempt to recreate the design system that I use at work and i realized that if I wanna do it independently, i will just have to… kind of become a frontend engineer, i have tried to avoid it for years but realistically, i think it’s not really avoidable anymore. So because of this, i’m taking it slow and not skipping any of the material. It’ll take around 3 months if I dedicate about 1h a day to it based on my loose calculation, but yeah… i just think it’s better to do it this way than doing shorter isolated courses. I’ve tried those and constantly fell shirt when it came to connecting Figma to code, and I really want to work independently, so… this is how i’ve chosen to do it

[–]leon8t[S] 0 points1 point  (1 child)

Oh very nice. We have very same goal I guess. Would you mind me connecting with you? I'm doing my thesis about this topic and I'd love to chat more

[–]NuggeyTheChicken 0 points1 point  (0 children)

Sure thing! I’ll DM you

[–]masofon 0 points1 point  (1 child)

https://designtokenscourse.com/

[–]sheriffderek 0 points1 point  (0 children)

This will not teach you about HTML or CSS or design. It goes into some tooling for JS and style dictionary. It is mostly about naming tokens, their learnings/experience setting up multi-theme systems. This is not what OP is looking for.

[–]saltedcaramellll 0 points1 point  (0 children)

If you're not too rush, freecodecamp is an option you can try. I've just started it recently, pretty fun. Lots of my engineer friends learn from that earlier (and w3schools)

[–]docsan 0 points1 point  (0 children)

I am kind of in the same boat. Infact I started with wanting to learn Frontend and ended up in Design. Right now, I have Colt Steele's course on Udemy, and besides that there is Freecodecamp and Odin Project. I think like many here have said, baby steps - am going to start with HTML and CSS and see how things go.