re: Looking for Tutorial/Book recommendation for Creating graphical Web/Mobile interfaces VIEW POST


Hey Zubair!

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:

  • Design (Information, Emotional/Aesthetic, Interaction, and Experience)
  • Implementation (Layout, Accessibility, Progressive Enhancement/Graceful Degradation, Animation, and Cross-Device)

The Design Side

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.

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.

If I had a Magic Wand, Here's How I would Have Everyone Learn Front End

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.

What I would suggest is finding a website you like, then attempt to re-build the layout using FlexBox; perhaps aided by tachyons. Once you can do that comfortably; start thinking about the interactions. "Oh, this is a button that pops up a modal? How would I make that work if I had to build it in plain JavaScript? What about if I had to make that work in React?"

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.

When All Else Fails, Try Bungee Jumping!

If you want to be a really great front-end developer; you'll want to go "bungee jumping." Bungee jumping is when you start at the highest level of the abstraction for a challenge you're experiencing. Then, you jump down the libraries and abstraction layers until you reach the native HTML/CSS/JS features. Perhaps rarely, you dive just a bit further into how particular rendering engines or JavaScript interpreters implement those features.

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.

What about React?

I know this isn't exactly what you wanted. I heavily emphasized CSS and HTML, and I'm guessing you want to emphasize the JavaScript side. Companies are paying big bucks for React developers, after all!

I heartily recommend Wes Bos's JavaScript courses. I find that they provide a really solid breadth of challenges to work through, and the community is very helpful when you need to go deeper.

Good luck out there! I'm rooting for you!


code of conduct - report abuse