Refactoring My Bootcamp Project & How I Ended Up With Background Animated GIF On Text
It has been a month and a half since I graduated from the coding Bootcamp and, there’s a lot to do post-school. First, I did mock interviews. Second, lots of networking. My Linkedin account has grown from 200+ people to the 500+ connection mark. There are also Discord groups, Twitter contacts, questions submitted on Stack Overflow, and meeting one recruiter after the other. Lots of brilliant people from all walks of life in my life lately. Third, there are interview questions, algorithms such as reversing letters, finding duplicates, and lots of other coding exercises.
Last but not least, this article’s topic refactoring the projects with CSS. The Ruby on Rails Small Reviews project has been a canvas for the artist that lives inside me to have a blast doing some fixing to the bland-looking site while also keeping things minimalistic.
So let’s go to the views/layout/application.html.erb file and put some links we’ll need:
The first thing that I needed to do was centralize the website. Everything in the website must be centralized if in the future I’ll want to add columns to the left or the right or both. We also need to think about media queries and have a responsive website.
For that, let’s do the following to the <div class=”content”> inside <body> from file app/assets/stylesheets/application.scss:
For the footer, we’re going to use the <footer> tag. For cleaner HTML files, I’m doing my best to remember some of those specific tags as a footer in this case. Here’s the code:
That’s an example of what we can do with HTML.ERB, ruby code is done on an HTML file inside a tag.
Let’s go back to the SCSS file and ensure that the footer is centralized at the bottom of the page.
Finally, we’re getting to the feature I added to all header one letters in the project and why I wanted to write about design in this blog post. If you way down to a few years ago on my Small Reviews Instagram page, you’ll notice I liked those glitchy aesthetics that were trendy at the time. I was all about all school, analog stuff from my childhood like this:
Or this:
Since I’m looking for something that resembles the projector light at a movie theater, let’s take the second picture and add it to the background of the permanent marker letters I love so much:
I even kept a codepen to share and keep for future reference:
So if you just graduated from Bootcamp and looking for suggestions to make your portfolio projects look awesome. I hope you loved these CSS suggestions and found them helpful.
Please, let me know what you think. And we can also talk about movies, cause everyone is a critic.
Summary:
- How to centralize content with CSS.
- How to add a footer to a Ruby on Rails project and keep it at the bottom of every page with CSS.
- How to add a background animated gif effect to text with CSS
