Off the Ridge Code Newsletter


All posts in "Uncategorized" & Free Blogging course

Published April 11, 2015 in Uncategorized - 5Comments –

could be best described as an ‘everyday developer manual’ or, better yet, a ‘how to succeed as a developer’ book. John Sonmez is a teacher, speaker, and the author of “ Soft Skills: The software developer’s life manual,” in which he talks about “soft skills” – a developer’s career, productivity, fitness, investing, as well as marketing oneself. John, as he puts it on his blog, is passionate about “taking the complex and making it simple.”

John compares a developer who writes code to a blacksmith setting up shop in a medieval town. He urges developers to think of their employer as a customer; this promotes an attitude of working for oneself in order to attain a better result, and not simply acting as a drone in a 9-5 job.

Simply put, the topics presented in this book are worth their weight in gold.

John is very successful at what he does; he regularly blogs at where he gets over 3,000 views a day, and offers to help other developers create blogs. When I saw a free email course on “How to boost your career,” I immediately signed up. After all, it is free. All you have to do is provide John with your email address. In return, you will receive  bi-weekly emails on how to get started with hosting and installing your own wordpress blog. There are also lessons followed by ‘homework.’ Yes, you need to do some work. After all, John won’t be writing your blog posts for you but he’ll be there twice a week to remind you how much you’ve been slacking off! Ok, perhaps he won’t call you a slacker but he’ll insist that you work hard and will offer his priceless guidance to help you create your own successful blog.

I highly recommend that you, at the minumum, give some thought to it and check out his free course at

How to create column with CSS3

Published April 20, 2014 in Uncategorized - 0Comments

How to create column using CSS3

In order to create (float) a colum using CSS3 you need to perform to simple steps:
1. Set its width
2. Set keyword ‘float’

Click here to download the ‘Before’ HTML if you’d like to follow along with the article.

The first I’m going to do is take the section that starts with ‘Lorem ipsum’

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere, urna ut pulvinar sagittis, leo leo aliquam dui, eu iaculis nisl risus at lectus. Nunc tincidunt, odio vulputate dignissim sagittis, lectus sapien fermentum neque, ut accumsan est nibh id sapien. Etiam in nulla eget mi condimentum hendrerit vel a turpis. Cras eget nibh euismod, auctor purus eget, iaculis urna. Vestibulum odio nulla, dictum quis turpis ut, laoreet viverra erat. Cras ut leo eget magna imperdiet vulputate a vitae justo. In dui ante, tincidunt nec porta eu, ullamcorper a odio. Phasellus in purus elit. Mauris ac faucibus magna. Quisque auctor nec dolor eget egestas. Quisque eget ante ut velit interdum eleifend. Vivamus sodales dapibus felis scelerisque auctor.

and add a new ‘class’ to it:

<aside class=”sidecolumn”>


<aside> is an HTML5 keyword that “consists of content that is tangentially related to the content around”, but it also allows me to link CSS to it.

Let’s create the CSS class for it that will go between the <style>…</style> tags:

width: 200px;
  margin-top: -50px;

The sidebar will float to the right, with width of 200 pixels and decreased top margin by 50 pixels so that it fits our page nicely.
This will actually create a sidebar. We can improve by marking-off the main section and creating a small gutter between the main section and the sidebar itself – so that it doesn’t look like it’s running into one another.

In order to do that, I’m going to add a <div> for the entire main section – it will go right after the closing of </aside> and right before the beginning of the <footer> section.

<div class=”mainSection”>

It’s looking much better, but I’d like that image to be also positioned to the right so I’m going to add a class to the image itself.

img class=”image”

<a href=”” target=”_blank”><img class=”image” src=”” border=”0″ alt=”programmer photo: programmer programmer.jpg”/></a>

Let’s add the necessary CSS for it:

.image{  width: 150px;   height: 150px;  margin: 10px;  float:right; }

This is pretty much it. You can download both and before html files here: