#CodeNewbie: How Getting Sassy & Learning LESS Gave Me More Options

It was supposed to be an easy site. Three pages. Maybe four. The restaurant was getting call-in orders for another restaurant in a different city with a similar name. They needed a web presence with their menu, address and phone. Nothing complicated. Could I do it? Sure!

My husband and I own a computer repair and sales shop. We haven’t advertised web development. But I have built a site or two over the five years we’ve been in business.

The timing couldn’t have been better. I am in the middle of learning to be more of a “professional” web developer. I had just taken a class on using a design process, with client questionnaires, and wire framing ideas. After having recently been burned on another development gig, I had found a good contract to cover all the bases. I was going to do this one right!

We scheduled a time to fill out the questionnaire. I understood what they needed and what they didn’t. I use the form and our conversation to created a simple wireframe. We were on the same page.

I was going to be building my first paid HTML5/ CSS3 website after years of using content management systems (CMSs) for everything! They didn’t need a CMS. Most small businesses don’t. But that is all I knew how to use for a very long time until learned better. Let me explain.

I am an advanced beginner web developer. I started learning HTML about 10 years ago. But, that is where I stopped… with HTML. You see I switched to using a CMS. If I had chosen WordPress I would have been golden. But I choose Joomla! and I never fully understood what was going on under the hood.

I could build useful, functional sites. I envied the people who created the platforms I used. I thought they must have advanced degrees in computer science. I figured I was destined to be a consumer of products made by people smarter than me. Such is life. I would make the best of what I knew.

Then two things happened around the same time this past summer. 1. I discovered almost all of my Joomla! sites had been hacked. 2. I heard a story on NPR about people changing their life by learning to code. Really code. From scratch.

I didn’t know how to fix my sites. That made me angry with myself. The NPR story gave me hope. People were learning to code in months not years. There was hope for me.

Come hell or high water I was going to get that knowledge. So I started looking for a coding bootcamp to attend. I quickly learned that the “best” ones seemed to run in the thousands of dollars. Since I don’t have a spare $1,000 per month lying around. I moved on.

I googled and researched and read reviews I tried a variety of free and low cost courses.

I learn best by drinking at the fire hydrant. I try to get as much exposure from as many good sources as I can until it clicks. I was powering through a variety of web design course learning a little from all.

One early morning, I was watching a course by Hampton Catlin, the creator of Sass. It was apart of a web design course I am taking. I had just learned CSS earlier in the summer. It was amazing.

For the longest time I thought the people who created the templates that I used to make sites look nice were superhuman. As I learned, I was beginning to understand they were talented designers who just understood a few more languages than I do. Seeing such knowledge was with in my reach was so empowering.

So even though I was just beginning to grasp the scope of what CSS3 offers, I was powering through Hamilton’s Sass course. He’s a funny guy and a great teacher. Sometime somewhere during that class as I was learning about nesting selectors, variables and mixins I think he mentioned LESS. That micro nugget of information would prove to be my salvation on the project for the restaurant.

A little after I learned about CSS, I started learning how to use bootstrap through another course. (I did mention I enjoy drinking at fire hydrants.) After getting a good working knowledge of bootstrap, I found the world of professionally built HTML5/CSS3 bootstrap themes. They cost a fraction of what I would spend on Joomla! themes. It just kept getting better.

The restaurant wanted a very simple site that looked nice. So I went in search of a nice HTML5 / CSS3 bootstrap restaurant theme that I could tweak to match the look and feel of the customer’s business. I found what I thought was the perfect theme.

I purchased it downloaded it and opened it and started poking around to get my bearings. The template actually had way more than was needed for the restaurant. So I started noting what needed to change. I started deleting pages, copying pages, and renaming things. This was going to be so nice.

Until it wasn’t.

There was a bug in the template. I couldn’t get a response from the developers to fix it. I tried googling for a solution. I redid the work just in case it was me, twice.

I had invested so much time editing the site and entering in hundreds of menu items. I refused to give up on the template. I knew I couldn’t redo it as nicely myself. I had to find a solution.

I got two different code mentors on codementor.io to try to help me fix it. One fixed one issue. Then another problem cropped up. The other spent 45 minutest trying to find a workaround so that I could create anchor links to make navigating the monster menu easier. It didn’t work. The template refused to allow you to create anchor links.

A simple site that should have taken a few days was stretching out over weeks. The problem was some custom JavaScript. I don’t understand JavaScript, as yet. I was going to need to start again with a different template.

So I found another bootstrap template. It wasn’t specifically for a restaurant but it was really well commented. The code was very clean and the custom CSS file was accessible. There was hope that this might not be a costly learning experience.

The element that made me cling to the first template for so long was the menu page. It was a handwriting font on a black board picture. Simple enough. One day soon I hope to be able to code one in my sleep. I’m not there yet.

Still, if I could just recreate that page, I would feel like I could give my clients what I was seeing when we were talking about their site.

I had already coded their 100+ item breakfast menu before I decided to abandon the other template. The thought of redoing that was depressing. I needed to some how take what I had done and move it to the new template.

I started searching the CSS file for the classes on the menu. No luck. How was this thing being modified? I saw a folder called “less” and remember the class on Sass.

Maybe. . . ?

I opened the folder and found a file called menu.less

I opened it. Bingo.

I am new to all of this. And the class I took was on Sass, not LESS. But it was enough. It took me a while some trial error and googling but I was able to extract the classes I needed to make the restaurant’s menu work on the other templates page. It isn’t exactly the same but it is close enough. I can live with that.

I almost didn’t take the Sass class. It was the last class in a course that I’m still working on. I didn’t understand how to apply the information as it was being taught. But when it was needed it came to my rescue when I needed it the most.

I’m more than half way done and am really satisfied with how the site is turning out. I am meeting the client’s stated needs and creating a site I’ll be proud to add to my portfolio.

One challenge down. Many more to go until the day when I will no longer be a #CodeNewbie.