From knowing nothing to building FrogOS themes

Recently I set myself a challenge. The FrogOS offline theme builder was released and I was eager to work out how to build themes. I didn’t have any experience with theme building or design but I didn’t want to let that hold me back.

Background

I have very little experience with coding or web design. I have played around a little with some bits and pieces, but none of the things that I was able to do were through any understanding; it was more through trial and error. If I say that I knew what a tag was and that different tags did different thing you might get my level. For instance, I knew that <h1> was the largest heading tag. I did not know how to make that appear on the page how I wanted it to. This was to be my first real look at understanding HTML, CSS and JavaScript.

Starting off

One thing I didn’t want to do was to have to go and keep pestering people in the office about what something was or did in the code. I was determined to learn myself and see if it was possible. I looked around online for ways to learn code and found a lot of good options. Personally, I went with CodeAcademy for the simple reason that it was free and simple. It took no set up, no downloads and no previous knowledge. Just what I needed. Once set up and logged in it was simple to move around, find lessons and begin to learn some basic code.

The Process

I had no idea how long it would take me to gain enough knowledge to build a theme but I was willing to dip in and out of CodeAcademy in order to learn what I needed to to build themes and maybe more in the future. To begin with I learnt the basics. What is HTML, how does it link with CSS and then how can I begin to style my code so that it produces something that looks nice and works. I hit a few stumbling blocks along the way and this is where I realised that a little help was needed. I didn’t want someone doing it for me, I wanted someone to bounce ideas off and to discuss what they had done to resolve a problem. I managed to get a few friends and colleagues to sign up for CodeAcademy and we began learning alongside each other. Late night emails and tweets resulted in me getting through the basics pretty quickly. By the end of week 1 I was pretty pleased with myself. I could display information on a page and style it how I wanted to (still pretty basic but enough to get a few ‘ooohs’ and ‘aahhhhs’ when I achieved something new).

After the basics I began the course on JavaScript. It is not a language that I particularly enjoyed learning if I’m honest. The only thing that kept me going was knowing that there were exciting things to come if I could get through it. More late night emails and tweets later and I had worked my way through 41% of the JavaScript course.

I came to a standstill at this point. I had been coding here and there every day for nearly 2 weeks and needed to do something with it. I couldn’t do any more lessons as I felt a bit disheartened by not really using my new found knowledge. The discovery of CodeAcademy projects really gave me the boost I needed to do more. The project took me through the steps of completing small projects, taking the skills I had learnt and putting them to some use. I decided I was ready!

Setting up

Setting myself up was relatively easy. I needed the files. No problem, these were shared online using GitHub. GitHub is for code review, and code management of open source and private projects. Frog stores the files here for users to access and download.

I then needed a way of editing the files. I use Adobe DreamWeaver for this but there are Open Suorce applications out there that you can use to do the same thing. I used DreamWeaver because I already had it and I know there would be a lot of support out there if I got stuck.

The final thing I needed was a server to host my files on. I don’t have a server so I used the advice provided on GitHub and downloaded Xampp to create a server from my laptop. This was straightforward to set up and I was up and running within 15 minutes.

Creating my first theme

I am not a designer. I don’t claim to be and don’t think I ever will be. I know what looks good but that doesn’t mean to say I can do it myself. I didn’t want to let this get in the way though. After all, I wasn’t trying to learn how to be a designer, I just wanted to be able to create themes. I started with the test files. My HTML and CSS lesson I had done really came into their own. I started looking at the code and knew exactly what to do straight away. It was simple to refer back to CodeAcademy when I got stuck and remind myself what to do but I found that the more I did the less necessary this became. After a few goes with the test files I decided I was ready to try it for real this time.

The first time I loaded the file I was a bit confused. This looked nothing like the files I had been using to test and I couldn’t get my head around what was so different. I looked back through some things I had done and changed in the test files and before long realised that I could use the bit of knowledge of JavaScript to help me through the more difficult bits. After that it was simple. In fact I was having so much fun I worked until about 11:00pm on different ideas and trying new things. I found that I could change nearly anything I wanted and add in my own styling. If I wanted squared corners, I could have them. If I preferred the site with a background colour instead of an image, I could do it. Before long I was able create themes I was pretty pleased with. Not only that, opening them in a browser and testing them showed that I had no errors or problems with my themes. A very proud moment.

Some tips

So what advice would I give? First, find yourself a good way of learning code. Definitely learn HTML and CSS basics. It will lead and feed into your end design and give you a much greater understanding of what is happening with your code. Second,  rope other people into learning with you. It is far more fun and a little competition between you for who can get the most badges is always good for motivation. third, Google is your friend. Don’t be afraid to search for the answer online. The setup of Xampp took me a bit of a google search to get right but it was better than me tearing my hair out trying for hours. Finally, don’t give up. Parts of learning to code are pretty dull. You sit there coding for an hour and realise you have just spent the time making a bullet point list. Don’t get disheartened. The lists are so important for understanding the style of the drop down menus in FrogOS and it is great to look a the Theme code and think “I understand that and I know how to change it if I want to.”

Maybe one day some of my themes will make it onto the Frog Store and maybe even on to some sites in classrooms that I will never see the inside of. A very proud man will be sitting at a laptop on the day that happens. I’ve got a lot to learn still and I will continue with the CodeAcademy until I feel that I have enough knowledge to try the next challenge. Either way, I set myself a challenge and 2 weeks later I achieved it. #proud

About Phil

Admin for Primary Learning Platforms, everyday run of the mill tech junkie and primary school teacher
This entry was posted in News. Bookmark the permalink.

One Response to From knowing nothing to building FrogOS themes

  1. Chris says:

    It’s good to hear your the journey you took to create a theme, I do have a previous understanding of html and css but had never come across javascript like this before so it took me a little time to get my head around this ( I also went for the trial and error approach).

    Had you considered creating a coding working group? Surely this would benefit those who wish to improve on their web skills!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s