One of my goal for 2019 is to learn front end. I've been following some tutorials and experimenting with the code part of front end development by learning React. I'd like to learn some design part too.
I've used photoshop a long time ago to create simple layouts. Is it still the preferred tool to use for designing layouts?
Does anyone have a good list of tutorials (Awesome list of design maybe?) and/or books that take you through the design phase all the way to coding?
I'm mostly interested in Progressive Web Apps.
Top comments (2)
Sorry for being late. You say you want to learn front-end right? Here's a roadmap. For your convenience, I'll write it here plus the resources I used to learn them:
That's just a few things you will learn about the front-end. In general, read the documentation first before reading other tutorials. They usually are more in-depth and follow-able in my opinion.
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:
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!
Zee