Any of you designers ever learn frontend?
Anonymous 07/27/24(Sat)11:55:47 | 13 comments | 2 images
I've spent years doing UI, UX, and graphic design. I want to start building some web stuff myself, but I'm daunted by the steep learning curve. HTML and CSS come pretty easy, and I understand the fundamentals of flex. Jumping into this side of things isn't so bad.
But I'm daunted as shit by JS. Suffering through the initial Hello World tutorial sounds brutal, and even beyond JS, merely setting up and maintaining a workspace (vscode, the terminal, installing packages, git, etc.) looks painful.
Anybody know of a decent video course with a tolerable instructor and a focus on modern techniques (flex-centric, good JS framework)?
But I'm daunted as shit by JS. Suffering through the initial Hello World tutorial sounds brutal, and even beyond JS, merely setting up and maintaining a workspace (vscode, the terminal, installing packages, git, etc.) looks painful.
Anybody know of a decent video course with a tolerable instructor and a focus on modern techniques (flex-centric, good JS framework)?
Anonymous 07/27/24(Sat)12:09:52 No.456482
>>456481
Odin project.
There's kinda a steep learning code at the start of the js course, but that's because they teach you essentials like git and version control. But it's necessary, and it's not too difficult desu.
I've had more trouble mastering illustrator pen tool than getting up and started with js.
Odin project.
There's kinda a steep learning code at the start of the js course, but that's because they teach you essentials like git and version control. But it's necessary, and it's not too difficult desu.
I've had more trouble mastering illustrator pen tool than getting up and started with js.
Anonymous 07/27/24(Sat)15:28:43 No.456483
>>456482
Thanks anon. This looks solid. The foundations course outline puts command line, git, ssh etc. up front, and then hits HTML, CSS, Flex before going to JS. Makes good sense.
I'll throw a few hours at this while the wife and kid are out of town, and try my best.
Thanks anon. This looks solid. The foundations course outline puts command line, git, ssh etc. up front, and then hits HTML, CSS, Flex before going to JS. Makes good sense.
I'll throw a few hours at this while the wife and kid are out of town, and try my best.
Anonymous 07/27/24(Sat)17:07:13 No.456485
>>456481
why not just find online tutorials like w3schools and start building projects yourself? easy to test them on localhost.
I write code into notepad this way and build sites, never used any program because I'm working on my own and don't need to use them
why not just find online tutorials like w3schools and start building projects yourself? easy to test them on localhost.
I write code into notepad this way and build sites, never used any program because I'm working on my own and don't need to use them
Anonymous 07/27/24(Sat)17:08:45 No.456486
>>456481
there's like a bunch of Udemy courses...here is one I started:
https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3
I was learning but I stopped because I just don't see any jobs for this where I live.
there's like a bunch of Udemy courses...here is one I started:
https://www.udemy.com/course/design
I was learning but I stopped because I just don't see any jobs for this where I live.
Anonymous 07/27/24(Sat)18:02:52 No.456488
>>456485
Yeah true I could just write code snippets locally and that'd get me halfway there without the frustration of JS or a "proper" workspace, because I'm mostly concerned with CSS at the moment.
But also I'm the sole product designer at a small company, and I'm starting to get frustrated at my frontend devs for doing a middle-of-the-road job no matter how thoughtful I am in Figma about flex containers, using columns/percentages for when the viewport scales down, even using 'object-fit: cover' to adjust image containers etc. it's like I have to spell it out so much.
To be fair, they're just junior and never built a scaled up iterative web site before. But if I'm going to be typing all this shit out in my Figma annotations, I might as well start doing some of it myself.
So the goal is to help by digging into the codebase myself (eventually), and to become more intelligent about writing classes for a type system, a set of padding values instead of just writing them every time. Even our classes for buttons, form fields, colors are kind of fucked up, and not perfect.
So that's why I want to learn the damn stuff, markup, JS and all.
Also, I feel like I could freelance on some good money with skills like these, once the fed lowers rates, and there are apes out there with venture capital who want to build a slick website. List my services at outrageous prices and see who bites. That's the dream anyway.
Yeah true I could just write code snippets locally and that'd get me halfway there without the frustration of JS or a "proper" workspace, because I'm mostly concerned with CSS at the moment.
But also I'm the sole product designer at a small company, and I'm starting to get frustrated at my frontend devs for doing a middle-of-the-road job no matter how thoughtful I am in Figma about flex containers, using columns/percentages for when the viewport scales down, even using 'object-fit: cover' to adjust image containers etc. it's like I have to spell it out so much.
To be fair, they're just junior and never built a scaled up iterative web site before. But if I'm going to be typing all this shit out in my Figma annotations, I might as well start doing some of it myself.
So the goal is to help by digging into the codebase myself (eventually), and to become more intelligent about writing classes for a type system, a set of padding values instead of just writing them every time. Even our classes for buttons, form fields, colors are kind of fucked up, and not perfect.
So that's why I want to learn the damn stuff, markup, JS and all.
Also, I feel like I could freelance on some good money with skills like these, once the fed lowers rates, and there are apes out there with venture capital who want to build a slick website. List my services at outrageous prices and see who bites. That's the dream anyway.
Anonymous 07/27/24(Sat)19:44:12 No.456492
>>456488
nice
nice
Anonymous 07/28/24(Sun)20:15:54 No.456502
>>456481
/g/ainfully employed anon here. before you learn javascript, get comfy with the terminal and git. you can use those tools to work on html+css projects without touching js. from there, you can use vscode if you want, but many people find editing files from the terminal more comfy.
once you've learned the basics of using the terminal, then do js. here's some things i wish i knew when i started:
>there are 2 kinds of javascript: client-side and server-side. client-side is what runs in your users' web browsers. server-side is what runs on the server that sends data to your users.
>client-side and server-side javascript work differently. when you google "how to do X in javascript," be sure to check that the result you clicked on works in the environment you're programming for.
>most server-side javascript projects run on nodejs, which is a special environment that adds extra features to javascript. not everything in node will be available in the browser.
>typescript adds some safety features to javascript, which protect you from common programming bugs. the trade-off is that you have to learn a more complex system. it's worth it if you're working on a large project with many people, or if you want a job.
>people will tell you to learn javascript frameworks (react, vue, svelte, etc.), but you don't need them for a personal project. if you want to learn a framework to get a job, learn react. the others are much less frequently used, and once you know one, picking up another isn't too bad.
>if you get sick of javascript (as many people do), you can write your server-side code in another language, like python or go. this is much nicer.
>if you really, really hate javascript, you can use a library like htmx and never write any javascript yourself.
basically, start slow, double-check what you find on google, and remember that there are alternatives.
/g/ainfully employed anon here. before you learn javascript, get comfy with the terminal and git. you can use those tools to work on html+css projects without touching js. from there, you can use vscode if you want, but many people find editing files from the terminal more comfy.
once you've learned the basics of using the terminal, then do js. here's some things i wish i knew when i started:
>there are 2 kinds of javascript: client-side and server-side. client-side is what runs in your users' web browsers. server-side is what runs on the server that sends data to your users.
>client-side and server-side javascript work differently. when you google "how to do X in javascript," be sure to check that the result you clicked on works in the environment you're programming for.
>most server-side javascript projects run on nodejs, which is a special environment that adds extra features to javascript. not everything in node will be available in the browser.
>typescript adds some safety features to javascript, which protect you from common programming bugs. the trade-off is that you have to learn a more complex system. it's worth it if you're working on a large project with many people, or if you want a job.
>people will tell you to learn javascript frameworks (react, vue, svelte, etc.), but you don't need them for a personal project. if you want to learn a framework to get a job, learn react. the others are much less frequently used, and once you know one, picking up another isn't too bad.
>if you get sick of javascript (as many people do), you can write your server-side code in another language, like python or go. this is much nicer.
>if you really, really hate javascript, you can use a library like htmx and never write any javascript yourself.
basically, start slow, double-check what you find on google, and remember that there are alternatives.
Anonymous 09/08/24(Sun)02:51:47 No.457329
You can use Fastapi with fasthtml and htmx and deploy it on a Webserver.
That way you can avoid a lot of js.
Also svelte makes a lot easier.
Also you can use Claude sonnet 3.5 to auto-generate html js and css for you.
In figma and lunacy you can copy the css. So just do the styling of components there and copy it (for some cases)
Git does not require you to use the terminal, just use the git client in vscode. It is mostly self explanatory.
Also "fork" (a bit more advanced) and "github desktop" are easy to use git clients.
What is the problem that you want to solve?
That way you can avoid a lot of js.
Also svelte makes a lot easier.
Also you can use Claude sonnet 3.5 to auto-generate html js and css for you.
In figma and lunacy you can copy the css. So just do the styling of components there and copy it (for some cases)
Git does not require you to use the terminal, just use the git client in vscode. It is mostly self explanatory.
Also "fork" (a bit more advanced) and "github desktop" are easy to use git clients.
What is the problem that you want to solve?
Anonymous 09/08/24(Sun)17:40:19 No.457344
I learned by just doing it. Maybe it helps that I started in the 90s with the limits of web design. I love designing but I can't draw or paint or anything so coding is the only way to make visual designs for me so I spend time building sites and things as just progress. I suggest just following tutorials and copying them and trying to change one variable at a time and see the results as you go. Then have a page in mind and try to recreate it. Until recently I didn't know how to create a mobile version of a website but I still managed. Now I have my site and I made a music player for it, and I am designing skins. It seems daunting but it's not that hard. Javascript is a real bitch but there's ton of resources.
Anonymous 09/10/24(Tue)14:53:45 No.457368
Anonymous 10/15/24(Tue)22:49:21 No.458066
Give it a try!
Anonymous 10/22/24(Tue)22:00:27 No.458326
how to get job in ui/ux
if i work another day in call center i will kys myself
if i work another day in call center i will kys myself
Anonymous 01/14/25(Tue)16:02:24 No.459291
>>456481
I'm going to learn full stack myself
I'm going to learn full stack myself