10/28/2017

5/08/2017

How To Customize Your Blogger Website Logo On The Safari Frequently Visited Page

How To Customize Your Blogger Website Logo On The Safari Frequently Visited Page

Overview:

If you're a Safari browser user, you'll notice the frequently visited website section on a new browser tab when you start surfing the web. If you have a website built on the Blogger platform, I'm going to walk you through a very simple tutorial on how to get your own website's logo customized for the frequently visited section.

5/07/2017

How To Create A Simple Code Your Own Adventure Game With Javascript

How To Create A Simple Code Your Own Adventure Game With Javascript Codecademy

Overview:

I have started learning Javascript through the easy to follow tutorials on codecademy.com, which I highly recommend checking out and am here to share my journey. This is the first of many tutorials / articles I plan to write related to this programming language. My first creation is a code your own adventure game with a simple interactive prompt feature for the user (as seen in the above screenshot from codecademy). The games focus is on one of my favorite comic book characters: Hellboy and whether or not you'd like to try arm wrestling him! Think you have what it takes?

If you decide to go through the Javascript tutorials on codecademy you'll come across a similar code your own adventure you'll have to create that focuses on singer Justin Bieber. While I didn't want to post up the exact program I made for that challenge, I decided to create one focused on Hellboy which can be used as a reference if you run into any obstacles.

How To Take A Screenshot On A Mac Computer

How To Take A Screenshot On A Mac Computer

Overview:

Have you ever wanted to take a screenshot of your entire Mac desktop or just a specific item on it, but didn't know how? Well, look no further, as I have the simple tutorial on how to do this below, enjoy!

5/06/2017

How To Crop An Image Using The CSS Clip Property

How To Crop An Image Using The CSS Clip Property

Overview:

Have you ever wanted to crop one of your images and focus on just a section of it without editing it in Photoshop? Sure it doesn't take long using the Adobe software, but what if you could do it even quicker with code? I'll show you how! With this basic tutorial, I will show you how to crop any image using the CSS clip property. Let's begin.

9/24/2015

How To Use The < summary > And < details > Tags To Make An Interactive Cheeseburger With HTML / CSS

How To Use The <summary> And <details> Tags To Make An Interactive Cheeseburger With HMTL CSS

Overview:

Getting creative with code can be a lot of fun, so I decided to use the <summary> and <details> tags to create an expandable and collapsable menu in the form of a Cheeseburger. Who doesn't enjoy cheeseburgers?!? To tackle this project I used basic HTML table elements for the layout and the summary / details tags for the menu. Using these tags allows information to be revealed and hidden at the click of a button!

The HTML code to create this is very basic. The more involved coding is the CSS, to make it look like a cheeseburger.

The tags themselves may not be supported by all browsers, if you'd like to see the current support status, visit W3Schools: details / summary.

9/15/2015

How To Create A Simple HTML Horizontal Navigation Bar Styled With CSS

How To Create A Simple Horizontal HTML Navigation Bar Styled With CSS

Overview:

In this tutorial I will walk you through creating a simple Navigation Menu Bar with HTML and CSS for your website (as shown in the image above). If you're in need of a basic navigation menu at the top of your blog just follow along with these basic steps below, to create your very own!

12/12/2014

How To Create A Weekly Agenda Styled With CSS Using The Rotate Transform And Transition Properties

How To Create A Weekly Agenda Styled With CSS Using The Rotate Transform And Transition Properties

Overview:

As I learn more about what can be done with coding, the more fun it becomes. With this project I decided to create a weekly agenda with HTML and CSS that used the rotate transform and transition properties of CSS3. These specific functions are used to spin and show a larger block with text upon mouseover. More specifically, when you hover your mouse over a day of the week, the small tile will rotate 180 degrees and show the information on the back within a larger tile.

*For now, I still have some bugs to work out and this agenda does not work correctly in Safari, but it does work great in Chrome and Firefox.

12/11/2014

How To Create A Fancy HTML Calendar Styled With CSS That Uses Hover Enlarge To Expand The Days Of The Week On Mouseover

How To Create A Fancy HTML Calendar Styled With CSS That Uses Hover Enlarge To Expand The Days Of The Week On Mouseover

Overview:

I have created a basic HTML and somewhat fancy (in my opinion) calendar that I styled with CSS and uses hover enlarge to expand the days of the week when you mouseover them! Below I have them demo for you to try out! After that I have the HTML and CSS code. Let me know your thoughts on this by leaving a comment below and feel free to make improvements on this code!

*Note that this calendar does not work correctly in Safari. I have some bugs to work out.

12/07/2014

How To Create A Simple HTML Scroll Box For Your Images

How To Create A Simple HTML Scroll Box For Your Images

Overview:

If you're looking for a quick and simple way to create a scrolling box for your images, check out this simple tutorial.

Below is the demo I have created of a basic scroll box in HTML, which will allow you to scroll from top to bottom with your mouse to see the images contained inside the area. Let's check out the demo and code!

7/20/2014

How To Backup And Save A Copy Of Your Entire Website / Blog On Blogger

How To Backup And Save A Copy Of Your Entire Website Blog On Blogger

Overview:

The popularity of blogging and creating websites has grown immensely over the last decade. Blogger remains a great platform for creating and maintaining an online presence. With any website, creating a backup of your work is a great idea. With Blogger, the solution for backing up your website is very simple. Just follow the steps below: