Tech Blog #1: Back to the Basics

Business & Tech

The Pickup

Not too long ago I decided to learn something new so I decided to pick up Ruby on Rails.

Why ROR? Well I read a few articles on different web technologies and this framework sounded like the simplest one to pick up.

Why pick up technology as a topic? Well I’m really interested in manipulating the web around me. Manipulating as in creating my own web app and making it look, feel and behave the way I want it.

Technology is rapidly developing and I really want to contribute in some way.  Well, not immediately, as I am a loooong way from contributing anything meaningful at this stage. However I do plan to look back at these posts and have a laugh much later on. As they say, I want my future me to be thankful to my present self – and picking up something new, that you’re devoted to, is a good start IMO.

So I signed up to One Month Rails a fabulous little program developed by Matten Griffel. Within a month and 2 weeks, I was able to develop a fully functioning web site with the look and feel of Pinterest. I hit a few roadblocks along the way – namely, GitHub key generation and Heroku deployment, among other arduous activities – but I was able to push an app out. I was super-impressed! You see I tried a few self-study courses before but with this one, I was able to go through the end-to-end process of developing something tangible.

Pulling in the reins

After completing the course however, I’ve come to realise that:

  • although i was able to develop an app with the online courses, I am by no means a web developer
  • I need to take a step back and get a good grasp of HTML 5, CSS 3 and Javascript even before I revisit Ruby and ROR again

Yes, again. Repetition is key.

And besides, one should never really expect to be a web guru inside a month. That is just pure fantasy. The course crams the knowledge in a month and it achieves its purpose with the help of the tutorial vids, links, community support and Google.

So I have taken a step back and I’m in the process of going through HTML 5, CSS 3 and Javascript. I expect to be competent on the 1st two and at least have working knowledge of Javascript (sufficient to recognize and manage existing code).

The Plan

Here’s my rough plan:

n.b. Green = Lapsed time, Yellow = Now

Pretty high level I know but I didn’t want to over plan and have a super-tight schedule with no room to breathe and deliver nothing tangible in the end. When you’re just starting to learn something new on your own, you don’t know what you don’t know, so I’m pretty sure I’ll be adjusting this plan as I go along.

ROR Starter

Here’s my takeout of what I’ve seen ROR is all about:

n.b. And if you can’t see that clearly, the above can be converted as PDF or PowerPoint (Go to: options / Dowload as “PDF” or “PPTX”).

Some extra ‘Help’

Now to help me along the learning path, I’ve created a cheat sheet / reference guide of what I intend to cover:

If you open the document, you will find some HTML and CSS code:

  • HTML:   pages 1-5
  • CSS:       pages 6-7

I will assume that you are not familiar with this process so I will describe what I have created here. If are familiar with HTML and CSS setup, go directly to ‘About that file‘:

  • It’s basically a webpage cheat sheet of my current plan to tackle HTML, CSS and Javascript
    • note: unfortunately WordPress does not allow me to insert HTML media, unless I create a separate post for the Blog 1 Helper attachment – but I lose the CSS component, so I copied my HTML and CSS code into a document instead.
  • If you want to see the web page, here’s what you need to do:
    1. copy pages 1-5
    2. paste it into Notepad
    3. Save the file by going
      • File
      • Save As
      • File Name = “Blog 1.html”
      • Save as Type = “All Files”
      • Hit ‘Save’

Repeat those steps for pages 6-7 except for the final 2 steps, which looks like this:

      • File Name = “Blog1.css”
      • Save as Type = “All files”
      • Hit ‘Save’

You will need to save both files in the same folder (the HTML file requires the CSS file).

If that description doesn’t help you, then try watching this.

Once you put it together, the html page should look like this:

Blog 1

HTML Blog 1

About that file

I probably could have written the above a little bit better and the presentation could have been styled more carefully. But hey, it’s a start and I’ll keep polishing it up as I go.

And anyway, it’s serves its purpose; it gives me a basic page of basic references. You have to walk before you can run.

Until the next Tech Blog

Has anyone out there been through something similar? Did you pick something like this up by yourself? Would like hear how you approached it. As you can see, I’m using a combination of reading, watching tutorials, goog-ling, stack-overflowing (failed to mention that in the html page) and coding.

I know there are a lot of Meetups too but I’m hesitant to attend at this stage until I feel ready.

Perhaps you may know how best to embed a HTML page within a post, like my struggles with inserting a document with HTML and CSS code? I’m a novice and you might be a learned man. I want to get there.

Thoughts are welcome.

PC @ MMA

3 thoughts on “Tech Blog #1: Back to the Basics

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