Howdy guys. This weeks work was not that bad. The only part I struggled in was when Jonas was using the terminal. I have a windows OS and it was hard following along to the video tutorials. I had to stop the videos and look up the different CMD inputs that he was using. I also had some issues compiling to sass. I eventually somehow figured it out and got progress. I really liked using the VS Code terminal. Most of the stuff was not that confusing, except for Mixins and extends (I need to re-watch those parts).
- natours/v4/package.json / natours/v4/package-lock.json
- Codepen Walkthrough
Problem Set – BEM/SCSS Problem Set
- 04-button-set/package.json / 04-button-set/package-lock.json
This problem set was pretty much straight forward. I really enjoyed using SCSS. It is much easier than using the typical CSS syntax. My favorite additions are the variables such as $color-primary, and nested CSS. It makes my life so much easier instead of writing all the class names and getting confused. I did not want to try using @each loops and YIQ functions because I am not that ready for that stuff and I did not want to hassle myself in learning something new that fast. I just wanted to do the basics and get this part down. I tried to make the example look as similar to the original.
Describe how you are using node.js for this project. What is node.js? What is the node package manager (npm)? What is the particular package you’re using for this project? How did you install it and note that it going to be required for your project moving forward? How did you setup the Sass compiler to run?
- npm init
- npm install node-sass –save-dev
- Change the script inside of the script tag in package.json
- “compile:sass”: “node-sass sass/main.scss[InputFileDirectory] css/style.css[OutputFileDirectory]”
- npm run compile:sass
- “compile:sass”: “node-sass sass/main.scss css/style.css -w”
- the -w is to keep watching the file for whenever you save, it will automatically compile SASS to CSS.
This is what I have so far. This is my method using my Windows computer. I will continue to update my personal notes if I come across something new. This was hard to explain..