blog.justinwoodie.com
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:
If you're looking to create a simple, dynamic progress bar, I'll show you how with this simple tutorial using JavaScript and CSS!
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!
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.
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.
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!
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.
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.
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!
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.