CodeNewbie Community ๐ŸŒฑ

Cover image for From Front Desk to Front End p.25
Tauri StClaire
Tauri StClaire

Posted on

From Front Desk to Front End p.25

The majority of this week has been focused on preparing job materials for my job search! I THOUGHT I was good at this stuff bc I'm naturally p good with words, and utilized the Career Services at my university, but the instruction and direct support I've been given have completely revolutionized how I approach my resume, LinkedIn, and portfolio! These are still very much a work in progress, especially after an amazing meeting with my Career Coach Tiff today, one of the wonderful coaches that are part of Skillcrush's coaching team!
(if you're looking at this after-the-fact, sorry if my resume link is dead- once I make updates I'll be sharing an updated PDF link in future entries, or you'll be able to check-it on my portfolio!)

So I'm still in the PREP stage before launching my job search ๐Ÿš€

And my fingers are itching to get coding again, so I am COMMITTING some time every day now (no matter how small) to Git pushing some code (get it? git it..? Git innit...? ok I'll go now...)

So I started up my adventures in SASS again!
SASS is a pre-processor that allows you to write CSS-like code, but with nifty programmer-like features like nesting, mixins, and inheritance to do some powerful things with your code!

In order to install SASS, I learned about my path and had to check into my own system properties to see what system type I was running, 32-bit or 64 (it's 64).

I've struggled to install SASS with Node.js before using some instructions in a Udemy course before, but according to SASS' breakdown of the various ways to install this is a pure JS version of SASS and typically runs slower.

So I used the instructions on SASS official website about how to install and directly add it to my PATH, then I was ready to install the Live SASS Compiler using this handy article by Medium, into my VS code so I was ready to create SASS documents (.scss files in my case) and transpile them (change a file from one language to another) into CSS! Browsers will only read normal .css files, so this step is crucial!

At first I created my first SASS file following the instructions in the Medium article to name it the exact same as my CSS file and used VS code to enable the "watch" flag to automatically transpile whatever I save, then I tried out some SASS code to make sure it was working, saved it, and WOW IT WORKED! and totally vanished all the work I had done on my CSS so far to replace it with the new CSS I just compiled from my SCSS file. xD I'm just going to say, thank goodness for Github... Now we're back on track!

It's very convenient to transpile directly thru VS code, but SASS' docs have great instructions about how to compile (and set up a watch flag) directly thru the terminal as well. I used these docs to learn everything else I'm going to implement into my portfolio which is working a lot better for me than using a Udemy course. Everyone learns differently, and I just happen to need something in writing before it really sinks in for me, but if I were an audio learner I think a course would be more helpful!

I started off my SASSy adventures by implementing some variables into my code! Variables are not unique to SASS, you can actually use variables in straight CSS (w3schools on that) but they do have different syntax so I started with that.
Variables are especially helpful when keeping consistent brand colors! It would've been REALLY nice to have this implemented before I coded my CSS, so I could just write "$purple-blue" whenever I wanted that specific shade I've chosen for my portfolio, but this has been a great exercise!
Check out my .scss file on Github to see how I implemented styles! I saved them and NOTHING on my portfolio changed, which means eeeeeverything is going according to plan, muah ha ha!

I am actually loving being in this job search phase and working on projects! I am living that developer life, and it's a party now!! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

Top comments (1)

frosty8104 profile image
Laura Gieg

Sassy code! ;)