Apologies, I've been on vacation for the past few weeks, so I haven't been as active watching the ELI5 channel for un-resolved posts.
I think of front-end development as a hybrid of two discrete-yet-intertwined skills:
Far too often, developers (such as myself) tend to look at design as purely the Emotional/Aesthetic practice. We focus on "Oh I need to learn Photoshop" or "I need to learn Sketch" or whatever the hip-new design tool is.
But really, what we need to learn are principles of design and design critique. I was lucky enough to attend a Design Critique for Non-Designers workshop when I was only two years into my professional career. This workshop curriculum was the Non-Designers Design Book. We worked through the book doing quick sketches, then passed our work to our neighbor for thoughtful critique based on the principles outlined in the book.
Most apps are really about laying out enough information for people to make a decision. Whether that decision is to respond to taking aggro in a video game, mash that like button on youtube, or keep on reading that twitter feed for just a touch longer; presenting the information in an accessible, aesthetically appealing way is fundamental to front-end development.
The book and workshop grounded me in a basic but useful understanding of the principles of whitespace, typography, and color when it comes to the layout of information to guide decision making. My skills at collaboration with designers grew. I could understand what was more critical about the design they're presenting, and orient my technical learning towards how to implement mockups effectively.
There's quite a bit more I could go on about how much there is to learn about the design side of front-end development, but let me shift to the implementation side.
Modern web technologies are amazing. Like, seriously. Flexbox is amazing! I go back to this css-tips guide to flexbox every few weeks.
CSS is a fantastic language. But it's really hard. It looks straightforward at first, but then you start looking into the permutations and how the rules flow through the page, and suddenly it makes sense why css is so hard.
I tend to rely on micro-design libraries like Tachyons. Tachyons makes it possible to translate the design of the page into code with very little hand-writing of CSS. The very intelligent maintainers of tachyons take care to manage cross-device compatibility, and "all" I have to do is learn a very terse syntax for describing those rules. There are other alternatives to Tachyons out there, but I can only really be good at one or two tools that solve a particular problem at a time; so I've happily stuck with them for the last year.
We can't build software without intertwingling Design and Implementation, but one of the flaws in my design process is that I know how hard certain things are to implement! So I design away from them.
There's no such thing as cheating when it comes to learning; so feel free to look for libraries that solve the problem, and dive on into the source code! "Oh, react modal library uses classes, CSS transitions and CSS easing animations to show the modal! Cool!" "This one uses math to change the height in the browser processing loop, neat!"
It's up to you to decide how deep you want your understanding to be. As a primarily back-end and infrastructure developer, I'm OK with my broad-but-shallow knowledge of design and how CSS works. I can rely on my peers, asking the internet, or grabbing a pair-partner to walk me through the stuff that's making my head hurt.
Once you find the underlying core features, play around with them inside of Glitch or CodePen or some other public hosting site. Use this to get a feel for how they work independently of the program you are trying to build directly. Now you have space to throw things away or try weird stuff without worrying about saddling future-you with something you don't understand well but have to maintain.
Good luck out there! I'm rooting for you!
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.