Ways to Make your Website Pop!

Now we all know that making your web application look modern and presentable is a huge part of the overall project, but there are so many ways to make it look good! Today, I’m going to show you a few of my favorite frameworks for CSS that’s both easy to use and make your application stand out!

Bootstrap

Bootstrap and CSS are like 2 peas in a pod, they are rarely seen without one another. The Bootstrap framework is both easy to install and easy to implement. All it takes is one quick command you’re ready to go! It features Sass variables, mixins, responsive grid systems, extensive prebuilt components, and powerful JavaScript plugins. You can use Bootstrap for pretty much every styling aspect of your project, including the navigation menu, drop-downs, image/video carousels, paginations, onClick alerts, and even themes. You can download bootstrap with the following command or head over to the website for more information.

My personal favorite use-case for bootstrap is building responsive navigation menus. They provide great documentation and code snippets for users to copy and paste to their own website. The code below ticks off almost every major feature of a modern day navigation bar, which includes active links, a dropdown menu, and a search bar. You can of course add other styling aspects like colors, height, position, and spacing to customize it and make it your own!

SVG (Scalable Vector Graphics)

I came across this animation tool quite recently and was blown away by how simple and fun it was to implement. For those of you that are unfamiliar, an SVG is a file format that allows you to display images on your website. This means that you can scale an SVG image up and down as needed without losing any quality. Here is the step by step process to make an animated logo or header title using SVG and a little bit of CSS.

  1. Head over to Figma.com and type out the word you wish to animate. Make your background black, the word a lighter color.
  2. Next, right click on the word and select “outline stroke”. Now make the stroke color white and the outline 1–3, while also deleting your fill color. You should end up with something like this.

3. Import this image as an SVG and drop it in your file. Now we want to animate the lines similar to a snake moving through the word before connecting at the very end.

4. Below the entire SVG tag, write the following code to grab the length of the stroke lines. We’re going to use these numbers to animate the path in CSS later.

5. So now that we have all the path lengths of each letter, we can start animating them! For each letter, we’re going to input this code into our CSS file. Stroke-dasharray: adds space to path length and stroke-dashoffset changes the position of the path. If we get the exact length of the path and plug it into both attributes, then each letter will animate from 0 to the end of letter with no gaps. An optional attribute I added to my project was to ease each letter forward 0.3 seconds from the previous one so the animation looks smoother.

AOS (Animate On Scroll)

This is also a great lightweight framework that’s both easy to install and implement! It doesn’t have as much functionality as Bootstrap, but it’s still a great way to modernize your web application in small ways. AOS does exactly what the name suggests, it allows you to animate elements upon scrolling up or down on your screen. Some of the simplest animations are fading, flipping, zooming, and sliding. Here are the steps to add AOS to any code!

  1. Install AOS, add the link and script tags, then initialize it.

2. Add the following code to your divs:

AOS has a bunch of customization you can add to your initial animation including the following. See the full list of animation attributes here.

These frameworks are only a small fraction of all the different types of animations and CSS styling tools that make a good website great. Hopefully you’ve found something you like or learned something new with these technologies!

For more information about me, please visit my LinkedIn or Github!