A complete beginner’s guide to learning Sass in a weekend
Are you interested in learning more about Sass but find that whenever you try to delve in, you’re greeted by a discouraging barrage of technical mumbo jumbo? Are current Intro to Sass tutorials promising help for supposed novices only to assume that this group of (apparently very enlightened) novices has already read every CS book from The Cluetrain Manifesto to the The Pragmatic Programmer and already has an opinion on Less vs Sass? Is that not you? Don’t worry! It wasn’t me either when I started digging into Sass. It may seem as though Sass requires a handful of traditional computer science knowledge to use, but the reality is that it doesn’t! This quick guide will break down all the basic terminology and concepts you need to know before you get started with Sass. And we promise, all you’ll find here are simple definitions of must-know, easy-to-grasp terms and concepts (The only prerequisite for this article is a foundational knowledge of HTML & CSS) that will be a primer to your Sass deep-dive. We’ll even restrain ourselves from throwing around the oft used “Feelin’ sassy?” puns as we explore Sass and convince you to give it a go. Once you feel comfy with the terminology mentioned here, we’ll take a look at writing some simple lines of Sass and then I’ll give you a great resource to help you learn Sass in a weekend!
What is Sass?
Sass is an acronym for Syntactically Awesome Stylesheets. A Book Apart’s Sass for Web Designers (arguably the best book on the subject currently) defines Sass as a layer between the stylesheets you author and the .css files you serve to the browser. This means that sass is actually written in .scss, then translated using a program into .css for the browser. Sass gives us super features that CSS doesn’t, allowing us to write some lines of code that simplify our overall work and make it easier for us to change things down the road once our style sheets become longer and more complex. Isn’t that nice of Sass? Think of it as a more sophisticated language that is improving CSS by adding advanced or missing funcgtionality - but Sass is no snob. Sass is actually an extension of CSS - so all valid Sass syntax is valid CSS3! Great isn’t it?
Sass doesn’t have a crazy learning curve either - if you know HTML & CSS, you could spend a weekend and come out the other side with an intermediate knowledge of Sass (later, I’ll give you the ONE resource you need to do just that). The other great thing about Sass is that you can use it little by little - start small by converting bits of an old stylesheet first and then keep going until the transition is complete. Once you’re comfy with this exercise, take a look at implementing some advanced mixins into your projects and before you know it, you’ll be well on your way to a solid grasp of Sass.
Note: Sass is just one CSS preprocessor. There are others - Less and Stylus for example, but in my opinion (and the opinions of others way cooler than me), you should focus on building up a Sass skill set.
What is a Preprocessor? You’ve probably read that Sass is a preprocessor. If you’re like me, the first time you heard that you thought “Oh great, are they using “pre” the way the auto industry uses “pre” when stating a vehicle is “pre-owned?” What does that even mean? That the car is used (their intention) or that the car exists in a state prior to being owned (therefore NEW? -my stubborn interpretation). Luckily, the term preprocessor is not confusing at all. It just sounds fancy. A preprocessor is a term from the computer programming world for something that takes some information (Sass) and converts it into something else (plain old CSS) so it can be understood by a third thing (your browser). Simply put, your browser is a processor. And Sass is a preprocessor because it processes the code before your browser does.
What is a mixin? Mixins are your buddies! They are reusable blocks of code that you write/define ONCE and then can use over and over again throughout your project. Think of when you’re writing a stylesheet. You must get tired of declaring your line-height, font-family etc over and over again, no? A mixin gives you the ability to declare these specifics once and use them several times without spending time rewriting the same stuff over and over!
Compiling/Compiler Compiling is the process of converting source code into something that can run on a computer. Simply put, compiling is translating. A compiler is the piece of software that performs the task of translating. In the case of Sass, your command line is the compiler. You need no previous experience with the command line when it comes to Sass - you’ll learn a couple of quick commands you can use very easily to install Sass and do one or two other very simple things, or you can download an app like Scout to use instead of the command line. Don’t let this piece of knowledge worry you and prevent you from learning about Sass - if you take a weekend to dig into Sass, I promise you’ll learn what you need to use it effectively, even if all you have right now is just HTML & CSS knowledge.
Command Line A command line interface (or the command line) is a text-only way of browsing and interacting with your computer. Check out our full tech term here for more on the command line. And have no fear! As I mentioned above, you’ll use the command line for some very very simple things including installing Sass in a matter of seconds because Sass is installed as a Ruby gem. This process is SO. SUPER. SIMPLE. though and the resource I’ll provide you with to learn Sass gives you a quick and super easy way to master the command line and get up and running with Sass. The truth is, you only need to copy a couple of commands to do one or two very quick things with Sass. And again, you can work around the command line if you want to (but you really won’t because it’s so easy and straightforward).
So there you have it! A little primer to (hopefully) demystify some of the terminology you may hear thrown around about Sass.
Read to dig in a little deeper? Check out our post on Sass here. We take a look at some simple Sass you could write today!
Ready for that ONE resource I mentioned earlier to help you master sass? Then pick up this excellent resource by A Book Apart to learn Sass in a weekend! It’s a short and very instructive read. Once you familiarize yourself with the concepts in this post, you’ll be able to fly through the book in no time!
A complete beginner’s guide to learning Sass in a weekend
On finding your voice in the tech industry when you’re new to code
I took a grant writing class as an elective in grad school. While I found the class to be surprisingly helpful, my professor did say one random unrelated thing in class that really stuck with me above everything else. He was talking about the pet peeves he has that really irritate him when reviewing grants. One of these is when people use the word “utilize”. He issued the class a semester challenge - give him one sentence where “utilize” makes more sense than simply “use”. At the end of the semester, no one had found a case where use wouldn’t do. This was a pretty profound moment for me because when I first got involved in the web industry, I was a bit of a magpie and wanted to include every shiny new trick I learned in my projects. Hey, learning to code is crazy exciting, what can I say! This advice – don’t use utilize when use will do – was my web Occam’s Razor, pushing me to simplify, edit, and focus. It helped me create better websites and be a better problem solver. When I recounted this new approach to a seasoned designer friend of mine, she congratulated me. She said the web industry is full of stories and advice like this that have helped her refine her skills and find her voice. One of her daily rituals is to try to discover content that makes her think and challenge her preconceived notions of what design is and what it can do. This , according to her, was an important part of growth in the web industry.
"There’s no ego. You have to get comfy with putting your words out there for others to respond to and possibly connect with. The web changes fast. If you want to be a part of it you have to be comfortable with changing too."I realized then that it’s not just about coding and building things that make money. So much of why this industry is great is because it’s full of people who continually review their approaches, scrutinize their decisions and share their struggles and insights with eachother. It’s part of the DNA of the web industry to continually develop, hone and grow. Much of this happens publically - seasoned web pros are big on writing, presenting, working on side projects that try new things, question current practices and strive to find the best way to do something. It’s an incredibly diverse conversation - with people across roles, levels of experience and expertise all discussing the same things and coming up with ideas and solutions together. You don’t have to have 800 years of experience to have something incredibly valuable to contribute (and remember, the web industry, like you, is a newbie too!). I want you to be a part of the conversation that is the web. How can you do that? By flexing your critical thinking muscles and engaging in the discourse that makes this industry great. Here are 4 tips to help you find your voice:
1. Follow people you admireI’ve talked about my love of (the arguably retro) feedreader, but it helps me follow many different sources easily in one place. I use feedly to keep track of all the websites I love and read them regularly. I follow a variety of voices and viewpoints so that I can consider many approaches before landing on my own opinion about something. I follow people like Chris Coyier, Jessica Hische, Pam Selle, Jeffrey Zeldman, Jared Spool, Katie Kovalcin and Kristina Halvorson – just to name a few – to get a wide variety of disciplines and schools of thought under my belt. I follow websites like The Pastry Box Project and read Net Mag and The Magazine.
2. Read all the thingsI read everything I can get my hands on, from A List Apart / A Book Apart, 5 Simple Steps, Smashing Mag, Jon Duckett ’s 2 recent incredible titles, and others. They’re organized as collections in my Kindle, and I try to make sure I’m covering every angle - from design to development to content strategy to research to UX. 15 minutes with my morning coffee and 15 minutes before bed really adds up!
3. Get over your Twitter fearTwitter, like all social media, isn’t inherently useful or useless. It’s all about how you use it. Create organized lists for people (I have lists for designers, developers, social media & content, for example) and add people in those industries to the list. Talk to them! You’d be surprised by the depth of conversations you can have and the enthusiasm with which these experts will share resources. You may be shy at first, but that’s okay! There’s no shame in following conversations for a while, getting comfy, and then participating.
4. PresentWhether it’s at a conference or to a crowd of 20 people…present! My sister recently wrote a great piece on overcoming your public speaking fears. There’s a great piece by Marie Forleo on the subject too. With speaking, just dive in. Consider submitting panel proposals for SXSW (where newbies and emerging ideas are welcome!) or volunteering to speak at a local middle or high school. Or how about starting a local coding or design meet-up and speaking for 5-10 minutes at each month’s meeting while leading the group? It may just be an audience of 7 or 8 of you but speaking publicly at all is a big, big win!
5. WriteSometimes I feel really bad for people who have to read my work. But you know who I feel worse for? People who had to read my work last year. It’s basically impossible for you not to get better at something if you keep doing it. So, I encourage you to write. You may hate it. You may wake up the next morning, read what you wrote, have a mini meltdown and hit the delete button so hard it pops right off your keyboard. Don’t delete anything! Put up work you aren’t proud of and let it inspire you to do better work next week, or keep editing it after it’s live if that’s a possibility - I go back and refresh old blog posts all the time. And you know what’s a great conversation starter? Your writing! Use Twitter to be all like “Hey so and so, I think you’re faboo - I’d love your thoughts on my post on this awesome new thing I just learned about/did.” This is not just a great way to network but also a great space for you to practice getting and implementing feedback on and in your work - something you’ll be doing every single day when you get your first, second, third and 10th jobs in the web industry. I promise you two things: You’re not as bad as you think you are. And your work will inspire at least one person. Writing is a great way for you to refine your professional voice and organize your ideas. Plus, it’s a great conversation starter and the easiest, quickest way for you to start participating in a conversation that needs your unique perspective. Check out medium for inspiration and create a goal to get your first piece up by October. Go on! YOU CAN DO IT! - For more tips on how to break into the tech industry and classes that will teach you everything you need to know, please visit Skillcrush.com.
Get your kids into code the fun way this back to school season
It’s back to school season parents! Are you excited? Frantic? Both? You have a lot on your plate - starting hectic morning routines anew, helping with homework, packing healthy lunches, managing after school activities, WHEW. And of-course during all this you’re probably wondering if your kids are learning the right things at school and how you can supplement their education at home. You’ve no doubt heard about the importance of computer literacy and getting your kids into programming and coding. But with the abundance of apps, toys, and books available, it’s hard to know where to start. Here are my top 4 choices for parents looking to get their young ones into tech:
1. HopscotchThis iPad app lets kids drag and drop functioning blocks of code to build their own programs. The app teaches kids programming fundamentals as well as critical thinking and problem solving skills in a creative environment. The app fosters a “learn by experimenting” attitude and encourages kids to play and try things and see what works. Hopscotch was actually inspired by Scratch, # 3 on this list. Hopscotch cofounders Jocelyn Leavitt and Samantha John hope to get girls into programming earlier and help fill the void of women in tech.
2. Hello RubyWe love everything about Linda Liukas and her upcoming children’s book Hello Ruby. The book raised $100k in 24 hours on Kickstarter and more than exceeded its initial goal of $10k by raising just over $380k at the end of its campaign. The book aims to teach 4-7 year olds about programming and open source culture through a smart, mischievous female protagonist and her whimsical adventures. Parents get a workbook so they can learn and help their kids solve problems in the accompanying activity book. We interviewed Liukas at the completion of her Kickstarter project - you can read that interview here.
3. ScratchScratch is a brainchild of the Lifelong Kindergarten Group at MIT’s Media Lab. It’s a programming language and comes with an extensive online community of it’s own. It’s designed for kids aged 8-16 and is totally free to use. Scratch allows students to create their own animations, interactive stories and much more. It uses drag and drop blocks of code similar to Hopscotch.
4. TynkerI learned about Tynker from my old boss, who’s wife Tanya homeschools their 3 kids. Tynker provides self-paced courses with tutoring baked right in. Their tutorials are interactive and fun for kids, allowing them to unlock achievements and badges, create customized projects and characters and build video games while they learn programming concepts. Sharing projects on the web with others is a big focus of Tynker’s and they hold summer camps to foster collaboration and knowledge-sharing. They occasionally run workshops exclusively for girls as well. For more, visit Skillcrush.com
The most frequent question I get from students in my classes is “Are we really going to build a portfolio? What can we possibly put in it when we’ve never had any clients or been paid for work?”
It’s a great question and one that merits lots of thought and discussion. What can beginners include in portfolios when they’re learning and just starting out? For starters, everyone in our Blueprints courses has access to loads of great projects to complete in class. All of these are great inclusions in a portfolio because they are focused prompts that aim to bring out each student’s individual creativity and unique approach to solving problems.
But there are plenty of types of work you can showcase in your portfolio besides the traditional projects or jobs that first come to mind. You can literally invent “fake”, imaginary, DREAM projects just for your portfolio. In fact, you don’t need to be a beginner to do this – experienced web designers and developers do it all the time to keep up with skills, try new things and provide fresh solutions to problems. Daniel Mall has talked about this extensively, Skillcrush friend and designer Katie Kovalcin swears by it. And our friends at Funsize.co frequently reimagine dream clients’ products.
“Put the work YOU want to be doing in your portfolio, not the work you think others want to see.” Says Kovalcin. ” If you make fake projects, the trick is to make it look real. Put in context: print it out and photograph it, mock it up however you need to as if it were really a finished product and not just comps/ideas.”
What I’m about to suggest to you is a framework of porfolio project categories that aim to showcase a wide range of your skills. you can do all of these without a client or previous experience. A few considerations:
- Make sure you are transparent in interviews and on your actual portfolio about the work you’re presenting and the processes you used to get to the final product.
- Challenge yourself to approach one actual client – a friend who needs a blog redesign or a mom and pop business. Offer to create something for them for minimal pay or for free. However, if this is too intimidating or you just don’t have the bandwidth, focus on creating and refining the projects below and give them context, like Kovalcin suggests
- Place an emphasis on process – don’t just focus on your ideas and execution. Use this time to go through the processes involved. Considering everything from research to user personas to briefs and wireframes. These are the types of deliverables that really make your work stand out, and showcase the life cycle of your project.
SAMPLE PRETEND (but still real) PROJECTS
1. The DREAM client website – A dream client website allows you to showcase how you think in terms of scale. I once interviewed a self-taught developer who learned to code over the summer and had redesigned the New York Times website on his portfolio. It was amazing. He thought through every detail – how it looked on tablets and mobile phones, what the app experience was like, how comments and threading worked in his solution and lots more. It was the only project in his portfolio – but of course it was so thorough and thoughtfully presented, it was all he needed to get the job.
2. The non profit or mom n pop website – A great project to include in your portfolio is the design or redesign of a small local non profit or your favorite neighborhood take-out restaurant. One of my favorite to-go haunts is a delicious Mediterranean place named Sarah’s. I’d love to redesign their website, giving it a completely modern feel (no flashing pointing hands for the special of the day) while staying true to the family’s wonderful sense of community and humor.
I’d also love to design an html menu page because right now the only way to view their offerings are by downloading a PDF (a pain on my iPad and iPhone bc I have to take 3 steps to download & view it). It also looks like they started working on a meet the chefs page – I’d love to see this through. It would be great if newcomers visiting the site could meet the chefs - they’d be so taken by their personalities & warmth they’d never be able to resist a visit (the chefs are a married couple. Whenever I walk in they look at me & gasp and jokingly ask “Deepina you are hungry AGAIN?” It’s hilarious & their joie de vivre really comes across in the spices in their food).
3. Your twist on an icon set – This is a pretty standard project, but its a great way for you to offer something for free to the visitors on your website and go include a project of a completely differently scale in your portfolio. An icon set might seem ubiquitous but if you do it well and use it as an opportunity to define your aesthetic (think Project Runway!) you could really wow people in an interview. Check out Dribbble for examples of icon sets done differently. Or what if you designed a few of your own emojis to add to the next set of releases? Very topical, fun, and creative!
4. Improved mobile product UX – Focus on mobile UX to show how you would improve the experience for an existing client or brand in the mobile landscape. This is a project that allows you to be creative inside some very specific constraints. Do some research here. Perhaps you love a website but think the mobile experience needs an overhaul. Work towards its reinvention and create ux deliverables every step of the way.
5. Redesigned newsletter template – This may sound like a snooze fest, but I did this for my first portfolio while applying for my one of my first jobs in tech. One of the administrative duties of that job was to redesign and send out newsletters about events, interviews, breaking news and other timely items so before I applied, I spent half a day redesigning the org’s newsletter, creating 3 samples and including it all in my portfolio. Needless to say, they were impressed. I got the interview (and two follow ups) AND the job.
There are many other cool projects you could make up and include. The above are my suggestions because they are things I get excited about and LOVE seeing when I’m interviewing developers because they will likely be working on these types of projects once hired. Have additional project ideas? Tweet us your thoughts @skillcrush or post them in the comments below!
This post is Part 2 in a series of posts about portfolios. You can read Part 1 here.
Today on the Skillcrush blog, I’m outlining a simple process that I use to buy tech gadgets with confidence every time and avoid that buyer’s remorse!
(via A Beginner’s Guide to Purchasing Tech Gadgets with Confidence | Skillcrush)
Buying tech gadgets can be intimidating. Overwhelming choices, a baffling range of price points, fear of buyer’s remorse, varying degrees of customer support at retail outlets and rapid product obsolescence & depreciation turn even the most zen & decisive amongst us to total mush.
So what’s the best way to overcome decision paralysis and make sure you buy the right computer, projector, portable speakers or fitness band? Let me walk you through the simple process I use in hopes it’ll help you too.
STEP ONE Identify what you want - Currently, I’m in the market for a projector for the master bedroom in my house. My husband and I are big movie nerds and we live in a loft townhouse. Our bedroom is upstairs and has great high ceilings. We never watch tv in our room but I suddenly have this intense desire to project old black and white movies against one of our large white walls. I know. I’m such a cheese ball. I’ll try to redeem myself by telling you that we also plan to play a LOT of the new Super Smash Brothers video game when it comes out this Fall. I’m quite the champion at that game. I know, I know my humility is unparalleled. Anyway getting this project up and running is my summer dream.
STEP TWO Identify a budget - This may sound like a no brainer but let me explain the two criteria I use to determine my budget. The first of course, is if I can afford it. The second is if I will feel like a fool spending a certain amount on a gadget even if I can afford it. $100 bucks? Sounds affordable. $100 on a bejeweled iphone case? I’m outta here. I have determined that I am willing to spend about $7-800 on this projector.
STEP THREE Spend some time on Amazon & Newegg (or other retailer you have had good experiences with) with 2 goals in mind: 1. Familiarize yourself with the features and specifications of several projectors (1 in your price range, 1 above and 1 below for 3 or 4 brands) and 2. read through lots and lots of reviews. This will help you understand what the product you’re in the market for is capable of doing and what the feature tradeoffs are across price points. A lot of times you may find a pleasant surprise - that the product does even more than what you thought it could do and you may be willing to stretch your budget a little bit. You could also find that you don’t need the extra bells and whistles at all and could come in way below what you anticipated. The point of this step is to familiarize yourself with all aspects of your product so you can make an informed decision. If you come across a term or feature you don’t know - jot it down. Once you’re done with this step go through your list and Google anything you aren’t well-versed in.
STEP FOUR Check wirecutter.com. This site is hands down the best I’ve found for help with purchasing gadgets. They’ve done hours and hours of the research for you and are incredibly practical when it comes to debating money vs feature trade-offs. They have never steered me wrong and every single recommendation of theirs I’ve followed through on has not disappointed me. They break things down in an easy to understand way and usually provide charts and graphs so you can compare products at a glance. Thanks to Wirecutter, I found a $500 projector comparable to their $1000 recommendation and feel great that I could potentially come in $300 under my original budget estimate. Yay!
STEP FIVE Do nothing for a few days. Seriously! By now you have tons of info swirling around in your head and you’re overwhelmed, exhausted and excited - a strange, heady mix. You need to let your newfound gadget knowledge marinate in your brain for a few days, consider all the reviews and ratings you’ve read about so you can find your footing again, narrow down your choice to the top 2 or 3 contenders and then ultimately make a decision you feel really good about.
Et voilà! Gadget purchased, existential crisis avoided. Enjoy your lovely new toy and go easy on the $4 lattes for a while.