I am a firm believer that if you want learn how to do something, you need to do something. In the past year I have been working mainly with the web as an UX designer. Lately there has been a move to design in browser. This has forced me to up my knowledge of how to code for the web.
If you want to learn how to do something, you need to do something
I have benefited a lot from the openness of web community. There is a lot of sharing of code snippets, how-to videos and frameworks to help make it easier to get started. In the past year I have learnt the following concepts: responsive web design, atomic design patterns, CSS3, HTML5, Sass and build tools like Gulp/Grunt. One project byTravis Neilson called DevTips Starter Kit was updated recently. It is a small project that was created to help get started with creating a website. He is a big fan of Sass over SCSS (it’s Sass not SASS). I am familiar with SCSS for preprocessing CSS. This exercise of reverse engineering Sass to SCSS will help me see the differences between both syntax. What I did:
- Convert Sass to SCSS
- Restructure the project to separate CSS and SCSS
- Add variables for fonts
- Extract colours used in project out to variables
You can check out the code here on Github https://github.com/lifeofmle/SCSS-DevTips-Starter-Kit