How to make your website visually appealing without the use of JS
If you’re like me then it's possible that you have created a website in a programming language like Ruby without the use of JavaScript. Issues you may run into is not having the ability to easily create events or change visuals at the click of a button. This guide will give you some tips on how to create a stylish website without the use of JavaScript.
Creative Buttons
Adding style and colors to your buttons can really make your website pop and stand out. Tutorials and code examples are all over the web for you to view and follow. A good website to see different button examples styling with CSS is https://www.w3schools.com/css/css3_buttons.asp. Buttons are especially useful for making your website stand out and they can be styled to follow any website's theme.
Better Backgrounds
There are multiple ways to make your website stand out using backgrounds. With hundreds of free services online like canva.com that provide professional photos to use, there will never be a time you can’t find something that matches your website theme. If you decide that you want a video background instead of a still image, you can easily add one to your website using video tags.
In this example, I have a video background that will automatically play and loop continuously. Along with the video playing, you can also have audio automatically play if your video has audio.
Playing hide and seek
Playing hide and seek refers to the art of hiding visuals on your site that takes up space or doesn’t belong. In my case, this was when a user selected “nothing” from a selection box. When the user sees the show page of their selections you wouldn’t want them to see “Salt, Sugar, Vinnegar, Nothing, Nothing, Nothing”. So you would hide the code using an if statement to check if their selection was “Nothing” then don’t show it.
As you can see in this screenshot when the name of the recipe isn’t “Nothing”, it will show the recipe but if the name is “Nothing”, then it won’t be shown on the webpage.
When creating a new meal I have selected “Nothing” in the optional additional recipe boxes.
On the meal’s show page you can see all the recipes selected but you will notice that because I have selected “Nothing” in all of the additional boxes, they don’t appear making the website look clean and not bloated.
Easter Eggs
Using the same method as “Playing hide and seek” you can easily create easter eggs on your website. In my example, I made it so that if you go to an ingredients view page, you would normally see the same video background, but if you were to go to bacon’s view page, you would see a completely different background.
