I recently graduated from an almost 3-month intensive coding bootcamp. Before this, I was teaching English as well as Yoga (I actually stumbled upon my love for coding while making a page for my yoga practice and teaching). The path to becoming a front-end developer was at times very fun but also very overwhelming. During the most challenging days, I came back to the lessons I’d learned in my journey as a yoga practitioner.

If you aren’t able to do something today, keep practicing and you WILL get it some day.

I admit, I began my journey into the world of yoga with purely physical goals — I want to do a handstand; I want to do crazy arm balances. When I started, I couldn’t do ANYTHING! Not a push up, not a crow pose, not even anything resembling a crow pose. If you see my above picture, you’ll see that I’m quite comfortable in side crow now. What you don’t see is the literal YEARS I spent working on it. Years spent face planting, twerking my wrists, and sliding off my elbows. Even today, my poses don’t hit their mark all the time. I still face plant and slide, but a lot less frequently. A year from now, I will hopefully be able to hold even longer, stronger, and more sturdy poses.

When I started coding, I was working only with HTML and CSS. I’d struggle with floats, get my flex properties mixed up, and had no idea about how animations worked. In the first month of bootcamp, I was SO comfortable and happy with CSS, but living in what can only be described as JavaScript hell. I didn’t understand what parameters are, calling functions was a nightmare, and I had no idea what a callback is. I didn’t want to ask any of my teachers for help because I knew I’d cry as soon as I opened my mouth. On my lowest day I went home, opened Codecademy, and told myself I will NOT leave my chair until I understood every part of the functions unit. And I did. I sat and read and experimented and played with code until.. suddenly .. CLICK. It all clicked. Just like crow pose clicked.

A few weeks after JavaScript we began learning React Js — a new language, new rules, new things to be confused about. However this time I reminded myself of JavaScript. I reminded myself of crow pose. I avoided headache and stress by reminding myself that one day it will click — and a few days later, it did.

The stressful times are just temporary. Learn from them and enjoy the challenge.

One of the most uncomfortable positions for me in yoga is just sitting on the ground. To do it properly requires SO MUCH physical engagement and awareness. It’s easy to just slouch and chill out, but then your yoga teacher yells at you and tells you to straighten up. It’s even harder for me when I’m sitting for over a minute, back straight, core tight, and trying to meditate. Meditation is HARD for me. I think about a million different things, like “what’s for dinner”, “how can I solve this piece of code”, “I’d love to go for a swim”, and my favourite, “I’m so bored of sitting here omg”. They say that if you can’t meditate for a minute, you should be meditating for 30 minutes. When something is uncomfortable or stressful, it is a reflection of what you need to focus and what you need to improve. Every time I am uncomfortable in a seated meditation, I need to remind myself that I can leave this position at any time — however I must use the time that I AM ‘suffering’ in it to grow.

The same could be said about the hardest days of bootcamp. There was one day, right in the middle of React week, where I just thought to myself, “I could just quit now, go back to teaching elementary school, and I won’t have to face another challenge again”. But then I remembered WHY I decided to leave that career and become a developer. I remembered how well I’d done in javaScript by just sticking to it, and I remembered that only a few more days in this uncomfortable React week, and I would be able to master that too. It’s easy to let go of things that are hard to do, but growth happens when we push ourselves, not when we settle.

A common problem with coding languages is that there is so many of them, and as soon as you finally feel comfortable with one, you get thrown eye-first into another, with its own set of idiosyncrasies. After only a few short weeks in the JavaScript vortex, I am here to provide you with 3 more problems I faced in my travels and how I solved them.

1. My CSS backgrounds don’t work when I deploy them on my phone. Should I throw out my iPhone?

Next time you have this problem, check the background-attachment on the image in question. The culprit might be that it is ‘fixed’, which is a state that many mobile devices don’t support. You can work around this in many ways. I chose to put in a query that changes the background-attachment to “scroll” (aka the default) when on a touch device:

2. My ‘if’ statements in my script aren’t working! Are && and || a total lie??

Based on this, the answers “Trudeau”, “trudeau”, “justin trudeau”, and “Justin Trudeau” should all be correct. Let’s test it!

Yay! That works perfectly. Or does it?

SOLUTION: Every time you write an && or || logical operator, you need the start the next boolean expression from scratch. The correct way of writing the above code would be:

Let’s test it:

3. I’ve deployed my website, and some of my links just DON’T WORK on some devices! But they work on others! Am I taking crazy pills? Who invented this?

On my most recent project, I used jQuery to link my index.html page to another page of my website. I used the method windows.location.replace(‘file_path”);

This worked perfectly fine while I was making the website. When I deployed it, something strange happened: the link would take you to a different URL depending on the device you use! My boyfriend and mom have the updated iOS on their phones, and their safari browsers linked them to a different URL than my older iOS phone’s — they received errors but I didn’t, although I did receive an error on my macbook’s safari. How could the same link take different devices to different places?

SOLUTION: The above method isn’t supported by all browsers. A better alternative would be to simply use windows.location.

Like so many people out there, I began my coding journey learning HTML and CSS on sites that offer free lessons and take you through the basics of the various languages. However, as any developer can tell you, every CSS property has its own quirks and rules that go with it, and it’s very easy to get stuck without knowledge of all these nuances. So without further ado, here are the top 4 problems I faced when learning CSS on my own.

1. ‘Margin: 0 auto’ is a big lie because I can never centre anything with it. Should I just throw away my computer?

We’ve all been told about the amazing margin value “0 auto”, which will put your content in the middle of the page without having to use grids, flexbox, -or worse- give padding on right and left of the element while eyeballing your work. When I first started using margin: 0 auto, IT DIDN’T WORK ANYWHERE.

SOLUTION: in order for margin: auto 0 to work, you need to give a specific width to the PARENT of that element, so that the child element can find it’s place.

2. I can’t give my elements heights with percentages!! How will I ever make a responsive masterpiece?!!

A responsive webpage is one which will adjust its sizes and elements depending on what device the user is on — this usually involves a lot of proportional re-sizing of elements. For this, it’s always better to use % values vs. pixel values, since the browser can calculate the percentages for you and do most of the work for you without you having to write extra code.

One big problem I encountered was that giving percentage heights didn’t always work for me. Take this example, where I want the top half of my page to be yellow, and the bottom to be green:

SOLUTION: Just like margin 0 auto, we must give a specific height to the parent of an element (ie a pixel value or vh) before we give a % height to the child. Let’s give the wrapper a vh of 100, meaning that the wrapper will always take up 100% of the viewport height.

3. My images are enormous and all over the place and I can’t afford to smash another laptop!

Okay so let’s say that I want to make a website that has 2 pictures of beans, along with a caption for each picture. I want the picture and caption to be 300px wide, and I want a red border to surround each picture+caption combo. Let’s write some code:

SOLUTION: the image needs to also be given a width so that it stays the same size as its container. The best way to do this is to give all ‘img’ tags a width of 100%. Remember, this means that the image will take up 100% of the width of its PARENT, which is in this case, a 300px wide box.

4. My media queries aren’t working on SASS and now my boss is going to fire me.

SASS or .scss is a great way to write CSS code quickly, and have a pre-processing software compile your work into full CSS format. One big problem I faced and spent hours trying to solve with the google was that, sometimes, my media queries wouldn’t work! I’d put in the query, resize my page, and nothing would respond!

In this example, I have a yellow box in a black-bordered box on a salmon background.

As you can see from the media query at the bottom of the SCSS, I want to make the yellow box in the centre of this beautiful salmon-coloured page turn blue when the screen is smaller that 1000px. However, it stays as yellow in this case, even though I made the screen 700px wide:

SOLUTION:

Worry not, you just need to be more specific in your media query! Look at how the CSS turns out:

The rule that makes the box yellow is for “.wrapper .box .smallBox”, whereas the media query is for “.smallBox”. The yellow box rule is much more specific than the blue box rule, so the media query can’t override the original. It’s easy to fall into this trap when writing code in SCSS because we are nesting all the time.

Let’s make the media query as specific as the original: