Looking for Tutorial/Book recommendation for Creating graphical Web/Mobile interfaces

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.

Comments

[David Lozano]

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:

1. HTML5, CSS3, and JavaScript
2. UI Design - The course is paid but the blog in my opinion is enough
3. SASS
4. BEM - This is a CSS architecture. It's entirely optional but I really recommend you read it. It will help in structuring your front-end.
5. GulpJS
6. Webpack
7. ESLint
8. A Framework - Just choose one. Anything will really do. (If you need help, pick ReactJS - it's got tons of resources for beginners.)
   • Angular
   • ReactJS
   • VueJS
9. Testing (I recommend Jest
10. TypeScript - Not really needed but it would improve your JS a lot.
11. Progressive Web Apps - Read up the resources on the "See Also" section if you are really interested.

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.