3/02/2024

How To Add A Related Posts Widget With Image Thumbnails And Blog Post Titles To Blogger

No comments:
How To Add A Related Posts Widget With Image Thumbnails And Blog Post Titles To Blogger

Related Posts are a great way to increase engagement on your blog and keep readers scrolling through your content. If you'd like to add a simple Related Posts Widget with image thumbnails and blog post titles to you Blogger website then you've come to the right place! Follow this simple step by step tutorial below:

10/29/2017

How To Create A Dynamic Progress Bar With JavaScript And Style It With CSS

No comments:
How To Create A Progress Bar With JavaScript And Style It With CSS

If you're looking to create a simple, dynamic progress bar, I'll show you how with this simple tutorial using JavaScript and CSS!

10/28/2017

How To Use The Object-Fit Property With CSS To Center And Crop An Image

No comments:
How To Use The Object-Fit Property With CSS To Center And Crop An Image For Mobile Responsiveness - Jefferson Memorial

Have you ever wanted to use simple code to crop an image and focus on a specific section of that image without having it stretch or compress? Today I'm going to show you how to achieve that with a quick tutorial using the Object-Fit Property with CSS!

5/08/2017

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

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

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

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

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

No comments:
How To Take A Screenshot On A Mac Computer

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

No comments:
How To Crop An Image Using The CSS Clip Property

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

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

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

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

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

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

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.


Copyright © justinwoodie.com ©