CSS & Design-to-Code Workflow
Hi all!
So, my journey in React and Next.js is going well, but I've hit a roadblock when it comes to transforming designs into code, especially in layout and styling. Here's where I'm stuck:
- Crafting different layouts or the 'shell' of a web app from a design or an existing web app is puzzling me.
- I'm trying to streamline my process from design (be it Figma or any other tool) to a functional web app.
While I'm fond of React/Next.js and TailwindCSS, I know the bedrock is solid CSS skills.
What's missing for me is a structured bridge between theory and practice. For instance, with React, I learned the basics, watched a build, and then created my own projects. But I'm lacking that 'link' for CSS and turning designs into top-notch websites.
I'm keen on learning a structured workflow to translate designs into code, filling that crucial gap between theory and practice. Does anyone have a roadmap or workflow they swear by? Any courses or resources that guide you through this process step-by-step?
If this discussion needs more depth, I'm up for a one-on-one mentoring session. I'm ready to invest in my education, be it through time or course purchases.
2 Replies
I say this with everyone but I think it really just comes down to practice. Keep practicing, and you'll eventually develop a workflow/style that you like working with.
I also think a lot of it is having an eye for design and attention to detail. For example, a lot of people see the first attached image and produce the second attached image.
But I think one thing that's definitely worked for me is starting with the semantic html. Lay out all your html first, and then start styling from the least specific to the most specific.
I also like having multiple stylesheets that have different tokens in them. For example, I'll have a stylesheet for all my fonts, another for all my colors, an additional one for my paddings/margins...
And then with Sass, I combine them all into a
_tokens.scss stylesheet that I can then import into my component stylesheets.
Got it! Thanks! 👐🏻