How To Create A Dynamic 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!

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

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!

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.

How To Use The < summary > And < details > Tags To Make An Interactive Cheeseburger With HTML / 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.

How To Create A Simple HTML Horizontal 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!

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.

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

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.