,
13 tweets,
10 min read
Read on Twitter
Someone asked me for tips in the comments, so I might as well make this a thread. Here are my personal recommendations for how to get started with front-end development, APIs, CSS, React, UI design and more 👇
🖼️ APIs: If you're looking to learn one modern framework for building REST APIs, check out FastAPI by @tiangolo. It's fast, easy to use and easy to learn, powered by type hints and it even comes with auto-generated docs. fastapi.tiangolo.com 
🖼️ CSS: I think CSS becomes a lot more approachable once you really understand the rules & underlying concepts and focus on layouts, not just styling. So the book I'll recommend is maybe a bit unusual: "Learn CSS Layout the pedantic way" by @mikitotakada: book.mixu.net/css/
🖼️ CSS layout: I only came across Every Layout @layoutplusplus recently, but the content that's published so far looks amazing. The mission: "teach you how to better harness the built-in algorithms that power browsers and CSS". every-layout.dev
🖼️ UI design: In terms of actual *design* & building UIs, Refactoring UI by @steveschoger and @adamwathan is an amazing resource. It especially helps pointing out those small little details that just "look good" but that you may have never noticed before. refactoringui.com
🖼️ React: It's a good time to learn React & if you do, start with the more intuitive latest best practices. For an intensive step-by-step course, check out "React for Beginners" by @WesBos. (Disclaimer: Haven't taken it myself but only heard good things!) reactforbeginners.com
🖼️ Live editor: @CodePen makes it really easy to get started and live edit HTML, CSS and JavaScript in your browser. You can add dependencies (like React) in one click and spend less time on your dev environment and more time building demos. codepen.io
@CodePen 🖼️ Live editor & inspiration: Since you all liked the thread, here's more! @Glitch is a bit like CodePen, just slightly more focused on apps. It's a lot of fun to dive into the community projects for different topics and remix them to build your own. glitch.com
🖼️ Vue: While I mostly work with React, I also really like @vuejs. If you've already done some stuff with JavaScript and jQuery in the past and want to get started with modern JS frameworks, this article by core dev @sarah_edo is a great introduction. smashingmagazine.com/2018/02/jquery…
🖼️ SVG: The SVG (Scalable Vector Graphics) format is great for illustrations and visualizations. It's all code, easy to generate programmatically, diffable, small and fast. Start with this guide by @css: css-tricks.com/mega-list-svg-…
🖼️ Deployment: @Netlify is pretty magical & I've been using it for pretty much all our sites and small apps. Connect your repo & each push to master will trigger a new build. Bonus: Deploy previews for pull requests and managed DNS for your domains! netlify.com
@Netlify 🖼️ React build system: If you're just getting started, you don't want to waste time setting up your env, compilers, dev server, test suite etc. "create-react-app" gives you a modern zero-config React environment with everything you need out-of-the-box. github.com/facebook/creat…
🖼️ Accessibility: Inclusive Components by @heydonworks features in-depth articles on common UI patterns & how to implement them in a robust & accessible way. It's one of my fav front-end blogs & has taught me so much about semantic markup and acessibility. inclusive-components.design
