HTML and CSS only

Photo by Seth Doyle on Unsplash

So this week I’ve been playing around with landing pages and I thought it would be cool to have a video play on a loop in the background. It wasn’t very hard to figure out but there are a few css things that are important to know to have it work properly so I thought I’d share what I learned.

First let's set up our html page…

Part 1 — Countdown Timer

Photo by Agê Barros on Unsplash

In this series I want to go over some methods that are widely used by building small apps to help focus our goals.

For this first one we will build a countdown timer using html,css, and js, focusing mostly on the Javascript. This series will assume you know enough html etc… to get started and that you are set up in your environment. I will be using VSCode.

Okay so first off I have created a folder with a html, css, and js file.

Part 1

Photo by Pankaj Patel on Unsplash

So this week I want to help get a total beginner to get some stuff on a webpage.

We will use mostly html and css, possibly some js too.

Okay so first this will assume that you have a code editor and at least know what the terminal is. I will be using VSCode on a macbook pro.

If you don’t have VSCode follow this link and it will get you set up.

Alright first let's open our terminal on a mac …

Photo by Pankaj Patel on Unsplash

I have been trying to get better at making my websites/web apps responsive and so this week I looked into doing so with pure css and once I got it it became pretty easy so I’d like to share with you what I’ve learned.

Let's talk about the @media rule in css…

(taken from

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape…

Photo by David Herron on Unsplash

This week I thought I’d give a little intro to ruby on rails. The past few weeks I’ve been getting back into rails for job interviews and I gotta say, I forgot just how easy rails can be to get an app up and running quickly. So the aim of this post is to get you up and running with your own rails project and run with it.

Okay so first things first Rails is a web application framework written in ruby. It allows you to write much less code to get the job done. Rails uses the DRY principle…

User management for ruby on rails.

Photo by UX Indonesia on Unsplash

This week I want to talk about Devise for Ruby on rails. These past few weeks i’ve been diving back into Rails and I discovered an amazing authentication tool that is just so mind blowingly easy to use that my projects are now going to get done so much faster.

In this post I’m just going to go through the initial setup of Devise so that you can add it to your existing project and continue on your own.

So with that being said let's get started.

Devise is a gem for user management…


This week, we have a pretty easy problem. We are asked to write a function that returns the number of vowels used in a string. Vowels are a,e,i,o and u.

That’s it, that’s all we have to do.

Okay so here we go, we start with our empty function…


Photo by on Unsplash

Alright, so last week I said to pay attention because the next post was related so if you haven't read the previous post go ahead and do that now by clicking HERE.

Done that? Great! lets upgrade from steps to pyramids. As you can guess this will look familiar to the steps problem and if you want to just try do this problem after looking at the steps post go for it.

Here is our problem,

We are asked to write a function that accepts a positive number N. The function should console log a pyramid shape with N…


Photo by Rodion Kutsaev on Unsplash

Okay so this problem is a good one and my next post after this is very closely related to this.

Let's start with some directions.

We are asked to write a function that accepts a positive number N. The function should console log a step shape with N levels using the # character. We are also asked to make sure the step has spaces on the right hand side.


'# '
'# '
'## '

and so on. Notice the empty spaces, this is important to remember.

Once again we start with our function…


Photo by Diomari Madulara on Unsplash

O.k. so this is going to be a shorter problem than the last few but I will once again go into as much detail as possible in the hopes it will help you understand better.

For this problem we’re asked to write a function that accepts a string. The function should capitalize the first letter of each word in the string then return the capitalized string.

E.G. capitalize(‘a short story’) → ‘A Short Story’

Before we start working on this problem let's look at a little tip.

First, let's look at the .slice() method. Slice is used on a…

Brian Butterly

Learning to code, one day at a time.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store