So there’s this guy who’s learning to code, Robert and me had remote mentorship from an awesome senior dev, Emile who introduced some great tools and technologies to us.
Sketch is a Mac app that’s similar to Photoshop Illustrator but even better for UI design.
Export Sketch designs into Zeplin and grab CSS values from this web app, great for collaboration with team members.
It’s like Haml but slimmer (lol). Slim reduces the syntax that you would usually write in full-form HTML.
Modular CSS with Sass (taken from Emile’s lesson plan)
- Why SASS is necessary http://alistapart.com/article/why-sass
- Basic guide for SASS http://sass-lang.com/guide
- Why modular CSS is the way to go http://thesassway.com/advanced/modular-css-an-example
- Explore the original SASS website http://sass-lang.com
- Clone the following repositories for research purposes. See how they have build they frameworks using SASS. What is common between the two frameworks?
- Try to get those frameworks up and running by reading the README.md
- Sass basics https://teamtreehouse.com/library/sass-basics
- Understand that SASS exists and what problem it tries to solve.
- Understand why SASS is the ideal way to build scalable CSS.
- Understand why frameworks such as bootstrap and foundation use SASS.
It’s an efficient way to lay out and align webpages, great for responsive pages. Less CSS margins, more Flexbox.
- Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox
- Flexbox froggy game https://flexboxfroggy.com
- Flexbox defense game http://www.flexboxdefense.com
Update: there’s now CSS Grid which helps too.